10 Tips For Creating A High Quality WordPress Theme

1. Don’t forget php wp_head(); ?>

If you look inside most WordPress themes <head> tags, you will find a function called wp_head(). From a first glance, this function may seem fairly useless, however it is extremely important. A large percentage of plugins require the wp_head(); function to “hook” into the WordPress header. Without this code between your <head> and </head> tags, you may find that a large portion of your plugins will not work. Similar to wp_head(), you will find wp_footer() in the footer.php file of a majority of themes. This function is used by plugins to hook into your footer to hook code in. An example of something that requires this is Google Analytics.

2. Prefix your PHP functions

As a developer, it is considered best practice to prefix your PHP functions. There are numerous benefits from doing so. Besides being easier to read, you will also prevent yourself from clashing with other functions that plugins etc may create.

And poor example of prefixing your PHP functions is as follows


function foo_bar($foo){
...
}

Instead, add a prefix to your function. Common prefixes are your initials, or a simple way to reference your site

function sennza_foo_bar($foo){
…
}

The effort required for this is minimal but it can save you a lot of headaches down the road.

3. Use dummy content

The primary goal of most websites is to display content. While this is commonly known, it is surprising how many websites you will find that have no list styling or block quotes styled. An easy way to ensure that you style everything is to use dummy content.

What dummy content does is injects your WordPress website with various types of pages, posts and comments. From this dummy content you are able to easily see if there is anything you missed. Possibly you forgot to style the ordered list, or you didn’t style a right aligned image, this is no longer an issue with the dummy content.

A great resource to use is WP Dummy Content.

It is installed through the WordPress importer by uploading an XML file containing the various content pieces.

4. Start from a base

In order to save time, a large majority of developers prefer to code from an existing theme. There are two great base themes that are available that will ensure that you have got everything you need to begin creating your high quality theme. Take a look at Starkers Theme and the html5reset.org WordPress theme.

5. Keep it streamline

Keeping your theme streamline not only will save you time in creating stunning content, but it is good practice and you will thank yourself for it later. There are a few different situations that you can streamline your content, but the most important to me is in the thumbnail image.

If you cannot see the thumbnail image in your post editor, chances are that you haven’t enabled it in your theme. To do so, just add this snippet to your functions.php

add_theme_support( 'post-thumbnails' );

Now that you have posts with thumbnail images, you will want to take advantage of the add_image_size function. This handy function allows you to set different thumbnail image sizes for where the content is displayed. Setting different image sizes is simple with the use of the add_image_size function. Below where you added the theme support for post-thumbnails, place the following code:

add_image_size( $name, $width, $height, $crop );

To simplify the above code, enter the name of your image size inside the brackets, for example ‘homepage-thumbnail’. After that, set your width and height and then whether you want to WordPress to crop the image. An example of a working add_image_size function would be:

add_image_size( ‘homepage-thumbnail’, 190, 190, true );

Now to call the image at that size, all you have to do is place the following code inside your loop:

the_post_thumbnail( ‘homepage-thumbnail’ );

If all went to plan, you should now see the resized version of your thumbnail. If you already had the thumbnail generated, you will need to regenerate the thumbnails. A good plugin for this is Regenerate Thumbnails.

6. Remove the links menu item

As WordPress is being used more an more for a full CMS website, as opposed to just a blog roll, some features are being used less and less. There is a new function that has been added to WordPress 3.1 that makes it quite easy to remove unwanted menu items. In this example, we will remove ‘Links’. Placing this in your functions.php will remove the unused menu item.

add_action( 'admin_menu', 'my_admin_menu' );

function my_admin_menu() {
remove_menu_page('link-manager.php');
}

You now have a cleaner Admin dashboard for yourself and other users!

7. Comment your code

Commenting your code will not only make it easier for you to reference back later on, but if another developer picks up your code they should be able to understand what you have done as it is written there for them. How you choose to comment is really a personal decision, I personally comment my code as follows

/*
Foobar …
========== */

It is about finding what works for you and sticking to it. You may find that you need to reference back to how you did something in a project a few months later, and having comments there to remind you will save you a lot of time that you would otherwise spend wasting trying to work out how you solved the issue.

8. Don’t forget pagination

There are loads of amazing plugins in the official WordPress repository that handle pagination for you. If you are after a quick solution to a problem, then this will definitely do the job for you! WP-PageNavi is one of the most popular WordPress plugins, and is very well developed.

If you want to dig into the code yourself you, then you are looking for the paginate_links() function.

The default usage is shown here (taken from the WordPress Codex – paginate_links

<!--?<span class="hiddenSpellError" pre=""-->php $args = array(
'base'         =&gt; '%_%',
'format'       =&gt; '?page=%#%',
'total'        =&gt; 1,
'current'      =&gt; 0,
'show_all'     =&gt; False,
'end_size'     =&gt; 1,
'mid_size'     =&gt; 2,
'prev_next'    =&gt; True,
'prev_text'    =&gt; __('&amp;laquo; Previous'),
'next_text'    =&gt; __('Next &amp;raquo;'),
'type'         =&gt; 'plain',
'add_args'     =&gt; False,
'add_fragment' =&gt;  ); ?&gt;

Because the function takes all of the information needed to generate page links, you can use it for almost any pagination list. Here is some code to generate pagination links for an article archive:

// get total number of pages
global $wp_query;
$total = $wp_query->max_num_pages;
// only bother with the rest if we have more than 1 page!
if ( $total > 1 )  {
// get the current page
if ( !$current_page = get_query_var('paged') )
$current_page = 1;
// structure of “format” depends on whether we’re using pretty permalinks
$format = empty( get_option('permalink_structure') ) ? '&page=%#%' : 'page/%#%/';
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => $format,
'current' => $current_page,
'total' => $total,
'mid_size' => 4,
'type' => 'list'
));
}

The above code results in the following HTML

<ul class="page-numbers">
	<li><span class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="http://mysite.com/page/2/">2</a></li>
	<li><a class="page-numbers" href="http://mysite.com/page/3/">3</a></li>
	<li><a class="page-numbers" href="http://mysite.com/page/4/">4</a></li>
	<li><a class="page-numbers" href="http://mysite.com/page/5/">5</a></li>
	<li><span class="page-numbers dots">...</span></li>
	<li><a class="page-numbers" href="http://mysite.com/page/10/">10</a></li>
	<li><a class="next page-numbers" href="http://mysite.com/page/2/">Next »</a></li>
</ul>

9. Add excerpt functionality to pages

A great line of cool to have in your functions.php file is this snippet to add excerpt support to your pages. This is handy if you want to pull a snippet of text from a page and then place a read more. For example, on the homepage of your theme you may want to have some content from an about page with a link to read more. Rather then using a text-widget, you can simply query the page_id and call the post excerpt. This means less editing and its one less thing that the user has to worry about.

add_action( 'init', 'my_add_excerpts_to_pages' );
function my_add_excerpts_to_pages() {
add_post_type_support( 'page', 'excerpt' );
}

You can now call the excerpt of pages into different areas of your website to assist in keeping it streamlined.

10. Theme Check using WP Theme Unit Test

The final step with any theme you create should be running it through the Theme Check plugin. This plugin will review your code and make sure that your code is up to standards, and that you are not using any depreciated functions or other mistakes. Once you have passed this, your theme is ready to be released!