Matthew A Price

Static Website Template Engine

Matthew Price — Fri, 11 Jan 2013 20:05:25 +0000

Update April 14, 2013:
The following sites are using this tool:
http://uchooseslider.com

I have made some static webpages recently and I have been meaning to make an extremely simple template engine that will drive these sites. I always have a library of functions for getting html headers, footers and common functions, but I didn’t have the template portion. Here is a very easy to implement system that allows you to make static websites that do not need databases that load very fast. It basically lets you define a set of pages and then will automatically serve the correct page from a folder. This is instead of having to make new folders and index files for each new page.

I am using the Twitter Bootstrap for this example

Here is the folder structure:

/css/bootstrap.css /css/bootstrap-responsive.css /img/ /inc/min /inc/functions.php /view/ /index.php

So there are two functions in there that output the CSS and Javascript. My code uses Minify to server as few requests as possible.

function load_css() {

	$css = array(
		'/css/bootstrap.css',
		'/css/bootstrap-responsive.css',
		'/css/application.css'
	);
	?>
	
	
	
Now that we have the main php library of of functions written, we can attack the index.php file at the root that controls what template to serve.  This file will serve template files within a “view” folder.  Your urls will not show the “view”, it is just a folder where to store the templates.
	

So now here is an example of a template file.  It calls the display_header() and display_footer() functions


	
		
			
				
			
			
				
			
		
        



That’s it!  You can definitely go ahead and create a display_sidebar() function, or anything else you need and just place it in the functions.php file.
Download source files from GitHub Repository

U Choose Slider Plugin

Matthew Price — Mon, 31 Dec 2012 23:09:03 +0000

This is a WordPress plugin I wrote that stores information about slider images in the database. It also gives you a template tag that you can use to loop over the images and implement your own JS Slider in your theme. It has a management page in the wp-admin dashboard so that you can add a title, description, link to follow, image url, and the ability to make it active or inactive.

On the Github repo there are examples of how to implement this plugin with both jQuery Cycle and Twitter Bootstrap Carousel. All this does is store data, so it should in theory work with ANY slider script.

Here is the link to the repo: Github Repo

The plugin is in use on the following sites:
Sustainable Living Association (jQuery Cycle)
Be Local Northern Colorado (Twitter Bootstrap Carousel)

Note: If you find any issues or have any questions, please leave a comment at the bottom of the post.

Here is the Twitter Bootstrap Carousel Example:




    
        
        
        
            
            slider_image; ?>">
            
                slider_title; ?>
                slider_description; ?>
            
            
        
        
    
    ‹
    ›

Here are some screenshots

Adding a new slider to the db

Listing of Active Slider Images

Editing a Slider Image

Inactive Slider Images show up in a separate table below the Active Slider Images

Stream Phish iPhone App to AppleTV

Matthew Price — Sat, 29 Dec 2012 21:01:35 +0000

As far as I can tell, there is no setting in the app to send audio to an AppleTV. However!

I was watching a couple of YouTube videos from my iPhone streamed to the AppleTV. I then went to the Phish App to listen to last night's MSG Show. To my surprise it started playing through the AppleTV. I tested this and realized that after choosing the output from the YouTube App to be the Apple TV, that it then became the default output for the Phish App and voilà!

I know this has nothing to do with web development, but this is a trick i deemed important to share.

Enjoy!

Reduce the number of requests in your WordPress theme

Matthew Price — Sat, 22 Dec 2012 17:32:06 +0000

This simple code will allow you to load all of your themes css files into one request without a plugin. I have not yet found a plugin that works with other plugins nicely as not all plugin authors play by the rules when enqueueing scripts and styles. So i figured that I would start with my theme. I wrote my own theme for this site based on the Twitter Bootstrap. On its own there would be a request for the bootstrap css file and one custom one for my theme. And the javascripts would be one for the bootstrap and one for my custom js.

Add to this that I use Prettify for my syntax highlighting and you can see that the requests can start to pile up. Let’s say that your theme also uses modernizr, jquery ui, maybe a slider script, etc… it is easy to see that the js and css requests can really start to add up.

Let’s start with the minifier. I use Minify for this task. It is really easy to use and install. Just copy the min folder to the root of your theme. For this demo, you do not have to do any modification to the sources files. Then you can place the following snippets into your theme’s functions.php file to register and enqueue your scripts. In my case, I wanted to load jQuery from the theme as I often find that upgrades to jQuery break some code and this will mean that all my existing code will work even if WordPress upgrades its version.

You can view the source/inspect element on this page and see these two requests on my site. They will look like:

AND

Here is the code for your functions.php


add_action( 'init', 'map_register_scripts_styles' );
add_action( 'wp_enqueue_scripts', 'map_enqueue_scripts_styles' );

function map_register_scripts_styles() {
  // so the minifier needs relative urls, not with the full http://
  // this grabs the theme location dynamically and then parses the url so that we can end up with "/wp-content/themes/theme_folder"
  $template_location = parse_url( get_bloginfo( 'template_directory' ) );

  if ( !is_admin() ) {
    // if we are on the front end, deregister the default jquery and register my own
    wp_deregister_script( 'jquery' );
    wp_register_script( 'theme_jquery', $template_location['path'] . '/js/jquery-1.8.3.min.js' );
  }
  
  // create an array of css files to add to the minified request	
  $theme_styles = array(
    $template_location['path'] . '/css/bootstrap.min.css',
    $template_location['path'] . '/css/prettify.css',
    $template_location['path'] . '/style.css'
  );
  wp_register_style( 'theme_styles', $template_location['path'] . '/min/index.php?f=' . implode( ',', $theme_styles ) );
	  	
  // create an array of javascript files to add to the minified request
  $theme_scripts = array(
    $template_location['path'] . '/js/bootstrap.min.js',
    $template_location['path'] . '/js/prettify.js',
    $template_location['path'] . '/js/scripts.js'
  );
  wp_register_script( 'theme_scripts', $template_location['path'] . '/min/index.php?f=' . implode( ',', $theme_scripts ), array( 'theme_jquery' ), '', true );  		
	
}

function map_enqueue_scripts_styles() {

  wp_enqueue_script( 'theme-jquery' );
  wp_enqueue_script( 'theme_scripts' );	
  wp_enqueue_style( 'theme_styles' );
		
}

So you can see that at least your theme’s styles and scripts will be loaded with one request a piece.

Note: the minifier will not perform any compression on a file with “.min” on it. So you are just including it so that all the scripts can be included with one request. This is by no means perfect, but it works on this site and where there once were 6 requests, there are now only 2. I am working on a way that would register a script to a global that could then be accessed from a theme so that my plugin’s scripts and styles could be merged with the array that I use in my theme to register styles and scripts and really reduce the number of requests.

Enjoy!

Revised Most Commented Post Plugin

Matthew Price — Thu, 26 Jul 2012 19:24:00 +0000

Awhile back, I created a plugin that would allow you to put a template tag on your site to display popular posts based on the number of comments on posts. It was quick, dirty and not the best code I have ever written.

I have completely rebuilt it using the WordPress Widget system so you can add it to your sidebar via the Widgets Administration panel.

This widget works based on the number of comments on your posts. It takes the most commented post and gives it a value of 1. You can then pick up to three levels to compare the other number of comments per post. You can also pick the number of posts to display in your sidebar.

So basically, if you select levels of 0.6, 0.3, and 0.1, then the posts that are above 0.6 and below 1 will be listed and assigned a CSS Class of “fire”. The ones between 0.3 and 0.6 will me assigned “medium”. The next level will be “medium” and the last will be “mild”

This will allow you to use CSS in your theme to style the posts and create a sort of “heat map”. You could assign the fire level to be red, medium to be orange, etc.

This is used in my sidebar, although i do not differentiate based on color. If you inspect the “popular posts” in the sidebar, the CSS classes are still there.

I find that this is a useful way to display popular posts…whatever people are talking about the most should be a good metric for what is popular.

You can view the code and download it here:

https://github.com/matthewaprice/WordPress-Most-Commented-Posts-Widget

OS X Mountain Lion First Look

Matthew Price — Wed, 25 Jul 2012 16:51:32 +0000

Here’s a quick overview of my first impressions of OS X Mountain Lion.

Notification Center
The notification center is great. Really nice to have this built in on an OS level. I booted up mail and within minutes, I was notified of a new piece of mail and I very naturally used the banner notification and clicked through to the email.

Safari
Safari now finally has the SSL notification IN the URL bar. Putting the lock as a missable icon in the upper right as before was not very helpful.

I love the new iCloud tabs. That is going to be very handy as I have a MacPro, MacBook, and iPhone.

I also like the dynamically sized tabs. By default, if you have one tab it takes up the entire width of the browser and as you add them, they get smaller.

The share button is also quite nice. I really like one click options to do common tasks.

The tab browser is DOPE. The full sized previews are really awesome and make identifying tabs super easy.

The Dock
I was annoyed that Launchpad was put back into my dock. ^_^ But i really like the new subdued dock indicators. They are smaller and more square. Aesthetically, I just like them more. The overall appearance is softer and smoother.

Notes
As someone who uses these often and I place my notes onto different IMAP accounts, this is nice to have a dedicated app to consolidate them and make them easy to find and update.

Messages
So you can now adjust your status directly from a tabbed chat window. That is nice to not have to go and find the buddy list to adjust. And you can also adjust your status on per account level from the chat window too.

As I find new cool features/updates, I will post them here

Community Funded Update

Matthew Price — Mon, 18 Jun 2012 17:14:52 +0000

I would like to take this opportunity to explain some of the cool features and projects that are on Community Funded. For a little background, I have been working on this site since I was brought in as a consultant in August, and became the Director of Development in November. The website is a crowd funding website that takes advantage of the power of Mega Community Collaboration (MC2). Here is what this about: MC² happens when motivated groups of individuals and organizations focus on common goals to maximize their community’s resources. Modern technology allows for the connection of many diverse communities to form The Community – which possesses all the resources and funds needed to make incredible things happen. Community Funded will transform this potential into energy through the power of MC² .

The website has some really innovative features that separate us from some of the other crowd funding websites.

Giftbacks
While other sites bind you to a funding level, our site works more like E-Commerce. We allow our Project Creators to offer items at a minimum pledge level. So a project can offer items “piece-meal” which are normally part of levels on other sites. A project can offer, for example, a Tee Shirt, A Shout Out, Tickets to Exclusive Events, Music Lessons, Gift Cards, Pint Glasses, etc. There is no limit to what a Project Creator can offer. This allows a member to do some cool things. The first being, you can go from project to project adding Giftbacks to your Giftbasket (think shopping cart), and pick and choose what you want in return for your pledge to the project. What this then allows you to do is fund multiple projects at one time! You can swipe your credit card once and fund many projects at one time. This is a really cool advantage to using our site.

We take this to another level with our ability to Explore for Giftbacks. If you are either undecided about what project to support or just want some cool shwag and just want to make your community stronger, you can just browse for the Giftbacks that projects are offering. You can then check out and voila, you have supported projects and your community.

Non-Profits
Most crowd funding websites are dedicated to normal threshold style pledging (project creator has to raise a certain amount of money in a given time to get the funds). There are some other types of sites that are dedicated to fundraising for not for profit companies, our site allows for both styles. We have a proprietary system in place that allows you to fund both types of projects in your Gift-Basket at once! The monies pledged to not for profit projects go directly to the organization. You get an email receipt that you can use as your tax deduction where appropriate. So not for profit projects have a goal, but they get whatever is pledged. They still have a time frame, but it is not threshold style pledging. Being able to tap into the not for profit networks means we are able to gain access to the people who are used to giving and then they become exposed to the normal projects.

Matched Funding
We have a great system in place that allows for our members who are inspired by a project to offer matched funding. This is fun and makes the site more powerful. So when an organization or individual offers to match funds, a standard pledge that comes in is worth more! If a project is being matched for $5,000 and you make a pledge, your efforts are worth 2x. And a project can have more than one matcher, so your pledge can be worth 2x,3x,4x, or more.

More coming soon…
We are working on some more amazing features that will empower our communities and make this an even better tool.

Here are some links to check out on the site

http://communityfunded.com/explore-projects/
http://communityfunded.com/explore-giftbacks/

Fun with WordPress Transients

Matthew Price — Sun, 10 Jun 2012 14:36:33 +0000

It has been awhile since I have written, but I wanted to detail how and when to use WordPress transients. First off, what are transients? WordPress has a great API for storing data that might be either the results of an expensive/complex query, or data that does not change that often. The rationale behind these is to make the pages load faster without having to do the expensive queries for every user that visits your site. They offer us an expiration date so that the data can be regenerated on a schedule.

Let’s say that you have a site displays posts after filtering by custom fields and categories. In order to perform this filter, there are a number of table joins that have to occur to generate the posts that meet the criteria. Transients are great because they give us the ability to store the results of the query in the options table for quick and easy retrieval. Once you set a transient value, a site visitor will retrieve that data as opposed to doing all of the database heavy lifting. If you put an expiration of 10 minutes on the data and you have 1000 visitors an hour coming to your site, that means that only 6 people will actually have to do the query from scratch.

I will go through a couple of different examples below

 'post',
			'tag' 		=> 'favorite-books'
		);

		$results = new WP_Query( $query_args );

		// now that we have the results we can store this in the transient for later retrieval
		// the arguments are " 'transient_name', $data_to_store, 'expiration date in seconds' )
		set_transient( 'favorite_books', $results, 3600 );
		$favorite_books = get_transient( 'favorite_books' );

	}

	// now we can return the results.
	// if the transient was there in the beginning, then we are just returning the original reference to $favorite_books,
	// otherwise we are returning the freshly set transient
	return $favorite_books;

}

// now you can call this function like this....
$favorite_books = get_my_favorite_books();
// now since this was a WP_Query object, we can do a regular loop
if ( $favorite_books->have_posts() ) : while ( $favorite_books->have_posts() ) : $favorite_books->the_post(); global $post;
?>
	
	
	


now let’s try a more complicated query to see the real power of why these are really great
 'my-custom-post-type',
			'tax_query' => array(
				'relation' => 'OR',
				array(
					'taxonomy' => 'my-custom-taxonomy',
					'field'    => 'slug',
					'terms'	   => array( 'my-term-1', 'my-term-2' )
				),
				array(
					'taxonomy' => 'my-other-custom-taxonomy',
					'field'    => 'slug',
					'terms'	   => array( 'my-other-term-1', 'my-other-term-2' )
				)				
			),
			'meta_query' => array(
				array(
					'key' 	  => 'price',
					'value'   => array( '100','1000' ),
					'type'    => 'numeric',
					'compare' => 'BETWEEN'
				)
			),
			'orderby' => 'title',
			'order'	  => 'ASC'
		);

		$results = new WP_Query( $query_args );

                // One cool use of this is that you can feed in POST or GET variables into the query_args and cache search results
                // you could use the search query as the transient and then look for that transient.
                // if the transient exists, then someone else has performed the same search.  
                // why do the query if someone else already has?

		// now that we have the results we can store this in the transient for later retrieval
		// the arguments are " 'transient_name', $data_to_store, 'expiration date in seconds' )
		set_transient( 'complex_query_results', $results, 86400 );
		$complex_query_results = get_transient( 'complex_query_results' );

	}

	// now we can return the results.
	// if the transient was there in the beginning, then we are just returning the original reference to $complex_query_results,
	// otherwise we are returning the freshly set transient
	return $complex_query_results;	

}

// now you can call this function like this....
$complex_query_results = get_complex_query_results();
// now since this was a WP_Query object, we can do a regular loop
if ( $complex_query_results->have_posts() ) : while ( $complex_query_results->have_posts() ) : $complex_query_results->the_post(); global $post;
?>
	
	


Now let’s say that you only write a new article that would be displayed by the complex query once a week. Why should every user be getting the results by performing the query? With the complex example, the transient will live for 1 day. So over the course of a day, only one user will be actually doing the database heavy lifting.
I hope this helps you out and will make your blog or site more efficient. These are very helpful and should be used to eliminate excess database queries.
For more information, view the Transients API on the WordPress Codex

Community Funded

Matthew Price — Tue, 14 Feb 2012 21:40:26 +0000

So I have been working on a project that has become my main focus. I am really proud to be the developer for www.communityfunded.com. We currently have a splash page up that allows the public to register as a user.

Here is a brief summary of the project:

Community Funded will connect people, ideas and resources in historic new ways, empowering our communities and promoting “grass-roots economic recovery.” Anything’s possible when it’s Community Funded.

Please sign up to be a part of something really special.

Here is a link to our Facebook page with some more info and response from the public: https://www.facebook.com/CommunityFunded

Keep Users Based On Role Out of WP-ADMIN

Matthew Price — Mon, 09 Jan 2012 14:36:11 +0000

Here is a quick and dirty way to keep your users out of the WP-ADMIN area. I have not found a good way to redirect a user from the wp-login.php page to a custom page and not profile.php. (anyone knows, please let me know : > ). I needed this as i had a front end system for users to manage their profiles. That part needed to look like the regular theme and not like the admin area.

This code can be placed in your theme’s functions.php or in a plugin. You can replace “administrator” with any role that you choose.

function wp_admin_role_limiter() {
     if ( ( is_user_logged_in() ) && ( preg_match( '/wp-admin/', $_SERVER['REQUEST_URI'] ) ) ) {
          if ( !current_user_can( 'administrator' ) ) {
	       header( 'Location: http://www.domain.com/custom-profile-page/' );
	  }
     }
}
add_action( 'admin_head', 'wp_admin_role_limiter' );