WordPress Theme Lesson 14: Finalizing Your Theme

This final lesson is about improving pieces of our theme. We add a favorite icon, screenshot for WordPress admin, looking at other WordPress functions to make some parts better, and finally take a look at plugins you can install to make the theme better.

It hasn’t been easy to find a good closing point on a WordPress theme tutorial because there is so much more you can do. But the initial goal of this tutorial was an introduction to create your own theme from scratch, getting a strong foundation, and getting familiar with the WordPress API. Hopefully it has been enough to achieve an overview of the path ahead on what you want to learn next, and you now have a basic theme as a starting point. The internet is full of tutorials for pieces of WordPress theme and plugin coding – just Google it.

Small Improvements to our Theme

Favorite icon

Most web pages use a favorite icon/bookmark icon which appears next to your adress bar and in the bookmark list if the page is bookmarked. Normally it is a 16×16 pixels image, and I’ve created a ridicolously simple one for our theme, following the Space invaders theme.

Right click on the image to the left and choose Save as… Save it in your theme’s images folder.

To define a favorite icon for your site add a <link rel="shortcut icon"> line in the header. So for our theme add the following line in header.php, somewhere inside the <head> block.

header.php:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory') ?>/images/theme-favicon.png" />

Theme Screenshot

If you take a look in WordPress admin » Appearance » Themes you’ll see that most themes listed have a screenshot. It makes it look more appealing and interesting, and gives you a quick view of what the theme looks like without previewing or activating it.

In order to give your theme such a screenshot, you need an image named screenshot in your theme’s folder (theme root folder, not in the images or some other folder).

I normally take a screenshot of the finished site and resize it so it fits 300×225 pixels. I’ve made one for you here. Right click on the link, choose Save link as.. and save it in your theme’s folder. It will automatically appear along your theme.

Better Pagination

In our index.php, search.php, and archive.php we’ve used the most common pagination method used in blogs: displaying a link to newer and older entries by using posts_nav_link(). But in many cases numbered pagination works much better, especially for jumping several pages at once. I use numbered pagination on this and my other blogs.

There’s a well-known plugin, WP-PageNavi, which provides you with a customizable numbered pagination system, but if you prefer not to install a plugin WordPress offers a function which pretty much does the same: paginate_links().

I won’t go through the code for replacing the pagination, since the Codex page pretty much explains how to do it. By providing parameters and adding some styling you achieve pretty much the same as with the WP-PageNavi plugin. The advantage of writing the pagination yourself is embedding it in your theme so you won’t need to install the plugin again if you change to another WordPress installation.

Plugins to Improve Your Theme

There are thousands of plugins available (in writing there are 17,800 according to the WordPress plugin directory) to improve your site, so in this section I’ve simply focused on fulfilling the most basic needs – such as image viewers, social buttons and search engine optimization. A thumb rule is, if there is a general need for something in WordPress, most likely there exist a plugin which does just that.

Image Viewer

Depending on your WordPress settings, when clicking on an image you’ve uploaded and attached to your post, it’ll either lead to an attachment page for the image or display the full-size image. Either way the reader has to use the back-button in the browser to continue reading the post. It’s much better to use some kind of javascript image viewer which overlays the image ontop of the page without taking you to another page.

There are many image viewer plugins available for WordPress. On this site I use Shutter Reloaded, but Lightbox 2, Thickbox, Lightbox Plus, FancyBox, or any other works just as well. Just choose one which fits the needs of your site. I like Shutter Reloaded because the navigation buttons always displays at the same place regardless of the image size, it shows the image as large as possible to fit in your screen, and has a button for displaying it in full size if applicable.

Social Buttons

A great way to spread your posts on the internet is to provide social share buttons – buttons on each post which readers can share your post on their Facebook wall, Like, tweet, add to favorites, and more. Again there are plenty of WordPress plugins which takes care of this for you. SexyBookmarks is a tastefully designed and highly customizable sharing plugin. Socialize is another. On this blog I use an account at AddThis and embed some code in my theme files for the row of sharing buttons you see on the bottom of this post.

Gallery

At some point you’d most likely need to display a series of images, and for that you can use the built-in WordPress gallery function or a gallery plugin. I highly recommend NextGen Gallery. In my opinion there is no better plugin.

Search Engine Optimization (SEO)

Seach Engine Optimization is important if you want your site to appear on search sites such as Google, or any other internet search engine. Enrich your blog with meta information by providing better titles (different from your post title), a description and keywords. To learn more about SEO and WordPress, check out WordPress Codex on SEO.

In our theme we’ve already made sure all pages get extensive descriptive titles by using bloginfo('name'); wp_title(); inside the <title> tag. But we haven’t added any meta tags, such as description or keywords, because the content may vary from each post or template. So it’s a good idea to use a plugin which takes care of this variation for us. I’ve used both All in One SEO Pack and SEO Ultimate, both great SEO plugins.

Caching

To speed up the loading time of your site you can use cache plugins to temporarily store pages to make it faster the next time someone loads it. Quick Cache, WP Super Cache, W3 Total Cache are three great cache plugins, with each their own advantages and disadvantages. I don’t recommend using W3 Total Cache on a WordPress multisite.

Tutorial Conclusion

As mentioned before it’s difficult to find a ending point in a WordPress theme tutorial since it covers such an excellent and complex CMS. But I need to stop somewhere – the initial goal was to show the most basic of writing a WordPress theme without it becoming to long and boring, or focused on specific areas you might not find interesting or relevant. WordPress can do so much more than this, and I hope you’ve been encouraged to dig deeper and learn more rather than finding it to complex and stupid to bother. At least you have a basic theme as a starting point which you can copy and modify instead of writing a new theme from scratch all over again.

If you haven’t followed all the steps, seem to have misunderstood something or might be missing something, you can download the theme complete with all files here:

Click here to download the source files for our theme.

Thank you for reading, and I hope this has been useful!

This concludes the final lesson of the WordPress Theme Tutorial. Start writing a theme of your own!