WordPress Theme Customization Guide

Next Chapter…

Let’s get started! First, you are going to need a WordPress installation to work with.

Installing WordPress

If you are going to be doing this more than once, it is worth it to install a local server environment like MAMP, XAMPP, or WAMP. (If you are on a MAC, I highly recommend MAMP, it’s the easiest to use.)

These just allow you to run WordPress on your local machine without an internet connection. I personally build all of my themes on my local environment before taking them to a live site.

If you don’t have a local server you can also just install WordPress on a test site or a directory on an existing site. For example, install WordPress at http://www.mysite.com/test.

Most web hosts allow you to install WordPress and a database in one-click, but if you have to do it manually please consult the guide here: http://codex.wordpress.org/Installing_WordPress

Choosing a Theme

Ok, now for the fun stuff, let’s pick a theme.

This is really important, don’t gloss over it. Every theme is different, so you should pick a theme and get to know it really well.

Eventually you’ll be able to customize any theme easily, but it’s important to start with one that follows conventional WordPress best practices. That way it’s future-proof and bug-free.

Here’s some more themes that I would recommend:

Free

Twenty Eleven – This is a free theme built by the Automattic team, so you know it’s legit.
Hybrid Theme – I started with this framework, and it is one of the best. The theme is free, support is not.
Thematic – I haven’t used it, but I’ve heard good things.

Paid

Woothemes – The market leader. Criticized for their abundant theme options, but it seems the people have spoken with their wallets.
StudioPress – Makers of Genesis, which people seem to love. They have a different style, selling child themes for their framework, instead of selling a parent theme and letting designers create the child themes.

We developed the Genesis Framework to serve as a foundation for web design and functionality. Through child themes, we are able to showcase a variety of looks and features, while maintaining a solid and secure code base. This allows users to change their design without losing important data for SEO and keeps the HTML markup intact.
-Brian Gardner, StudioPress

Press Coders – That’s us. Up and comer, is it wrong of me to plug my own company? Oh well.

There’s about 1.1 zillion other theme companies out there, too many to list.

Free v. Paid Themes

There are free themes and paid themes out there, you need to know the pros and cons.

Free themes have a great price tag, but doing a Google search for “free WordPress theme” will show you the sea of crap you have to sort through. You can’t always get support with free themes, for good reason.

Paid themes obviously have a price tag, but that’s not always a bad thing. A company that is making money selling themes has more time and resources to dedicate to support, theme documentation, theme updates, etc.

Of course, just because a theme has a price tag doesn’t make it better than a free theme, but I think the leading theme companies have a high quality product more often than not.

The choice is yours.

How Themes Work

Child themes are the only way to go. They allow you to customize a theme without losing your changes if you update the parent theme.

For example, if you changed the color of the theme text by altering the Twenty Eleven style.css file, the next time you updated the Twenty Eleven theme, your changes would be erased. The same goes for any other file in the parent theme folder, which is why we use child themes.

When it comes to theme customizations, it’s really pretty simple: use child themes. That’s, to the best of my understanding, the reason child theming exists in the first place. Also, personally, I shy away from any situation where my primary theme is in a child theme. You see this practice in place at a number of theme shops where theme frameworks are used. If the primary design, the core theme, is already a child theme itself, that makes implementing future-proofed customizations a bit more difficult than it probably should be.
-Ryan Imel, WPCandy.com

1
2
3
4
5
6
7
8
9

/*
Theme Name:     My Child Theme
Theme URI:      http: //www.presscoders.com/designfolio
Description:    Child theme for the Designfolio theme
Author:         Your name here
Author URI:     http: //www.presscoders.com/
Template:       designfolio
Version:        0.1.0
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*
Theme Name:     My Child Theme
Theme URI:      http: //www.presscoders.com/designfolio
Description:    Child theme for the Designfolio theme
Author:         Your name here
Author URI:     http: //www.presscoders.com/
Template:       designfolio
Version:        0.1.0
*/
 
@import url("../designfolio/style.css");
 
#header {
	height: 150px;
}

Next Chapter…

To customize a theme, we need a fast and easy way to see how the theme is put together. We also need a way to test CSS changes without constantly saving and re-saving. Enter Google Chrome Dev Tools.

How do I use the Dev Tools?

It’s easier to show you than tell you how to do it, so here’s a video for your viewing pleasure.

Uploading your changes

After you figure out which changes you want to make, you need to add them to your child theme stylesheet and upload the new stylesheet to your site. There are a few different ways to do that.

WordPress Appearance Editor

It’s possible to use the editor built into WordPress to make your changes. This is a fast and easy way to make a few changes, but it’s not a good long term solution.

To edit your child theme stylesheet inside WordPress, first make sure your child theme is active. Next login to your admin area and go to Appearance => Editor. You should see your child theme stylesheet in the editor, if you don’t, click “Stylesheet” in the right hand column.

You can make your edits here and save them.

Text Editor/FTP

The most common way to edit website files is to use a text editor to edit the files and upload them to the child theme folder via FTP. I use Coda, which is an all-in-one solution for MAC, but there are lots of other programs to do this.

Text editors:

For Windows, http://notepad-plus-plus.org/ is one solution. For MAC, try Text Wrangler.

FTP programs:

Fire FTP is free and easy to use (Firefox browser add-on)
SmartFTP is compatible with Windows

When we make changes to any theme files, you will need to make the changes in your text editor, then FTP them up to your server to overwrite the old file. (Or make the changes in the appearance editor and save)

1
2
3

#header-container, .footer-widget-container {
background: #253944;
}

1
2
3

#header-container, .footer-widget-container {
background: #E01B6A;
}

1
2
3
4
5

<?php
 
// Insert valid php here
 
?>

Enqueueing

One of the most common uses for the functions.php file is enqueueing scripts and styles.

This is WordPress’ way of adding new scripts and stylesheets to avoid any sort of conflict between WordPress itself and themes and plugins.

For example, let’s say you want to add Cufon font replacement to your child theme. Cufon requires you to add 3 script tags to the <head> of your theme. So let’s go hack up a header.php file and manually add the scripts, right?

NO! Hopefully you’ve been paying attention and you know we are going to be good little boys and girls and enqueue our scripts so there are no conflicts.

Head over to http://cufon.shoqolate.com/generate/ and download the necessary files if you want to follow along. This same process will apply to any scripts you want to use.

Note: Read over the full usage of the wp_enqueue_scripts function here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

In your functions.php file (in between the tags,) add the following:

1
2
3
4
5
6
7
8

add_action('wp_enqueue_scripts', 'add_my_scripts'); // We are using the wp_enqueue_scripts function, and giving our function an arbitrary name of add_my_scripts
 
function add_my_scripts() {
	wp_register_script('cufon', get_bloginfo('stylesheet_directory') . '/js/cufon-yui.js');
        wp_enqueue_script('cufon');
        wp_register_script('my_font', get_bloginfo('stylesheet_directory') . '/js/my.font.js');
        wp_enqueue_script('my_font');
}

There are a few things going on in the code above.

1. By using the wp_enqueue_scripts hook we only add scripts on the front end of the site, not in the admin area.
2. It is common practice to register your script and then enqueue it using the wp_register_script() and wp_enqueue_script() functions. You give your script a handle (so that WordPress knows about it) which in this case is ‘cufon’ and ‘my_font’, then you tell WordPress where it is.

The last thing that cufon requires is a 3rd script tag that looks like this:

1
2
3

<script type="text/javascript">
    Cufon.replace('h1');
</script>

We are not going to enqueue this script, instead we can just add it to the head using wp_head:

1
2
3
4
5
6
7
8
9
10
11

add_action( 'wp_head', 'my_js' );
function my_js() {
 
    if ( !is_admin() ) { ?>
 
        <script type="text/javascript">
          Cufon.replace('h1');
        </script>
 
<?php }
}

The whole enchilada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
add_action('wp_enqueue_scripts', 'add_my_scripts'); // We are using the wp_enqueue_scripts function, and giving our function an arbitrary name of add_my_scripts
 
function add_my_scripts() {
	wp_register_script('cufon', get_bloginfo('stylesheet_directory') . '/js/cufon-yui.js');
        wp_enqueue_script('cufon');
        wp_register_script('my_font', get_bloginfo('stylesheet_directory') . '/js/my.font.js');
        wp_enqueue_script('my_font');
}
 
add_action( 'wp_head', 'my_js' );
function my_js() {
 
    if ( !is_admin() ) { ?>
 
        <script type="text/javascript">
          Cufon.replace('h1');
        </script>
 
<?php }
}
?>

Next Chapter…

Customizing Template Files

Even though you can do most of your customization with style.css and functions.php, there are times when modifying a template file is the best solution.

Of course we are never going to modify a template file in a parent theme, we are going to duplicate the parent theme template file in the child theme, and modify that one instead.

As an example, let’s say you want to use the Nivo Slider plugin on your site. This plugin requires you to add this template tag to the page where you want the slider displayed:

1

<?php if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); } ?>

So let’s create a custom page template that displays this Nivo Slider with our page content below it.

Creating the Custom Template File

Since we just need a normal page, you need to copy/paste the page.php file from Designfolio into your child theme folder. Don’t remove it from the parent theme, just duplicate it into the child theme.

Rename the duplicated file page-nivo.php.

Open page-nivo.php in your text editor, and add this to the very top of the file:

1
2
3
4
5

<?php
/*
Template Name: Nivo Slider
*/
?>

That line tells WordPress that this is a page template, and allows you to select it on the page edit screen. You should now have page-nivo.php with the lines above added in your child theme folder.

Modifying the Template File

You can now modify the template file any way you wish and it will not be overwritten if you update the parent theme.

Next, add the template tag for the Nivo Slider plugin wherever you want it to show up. We are going to add it just inside the .content div:

1
2
3

<div class="<?php echo PC_Utility::content_layout_classes_primary(); ?>"> // Add Nivo template tag below this line
 
<?php if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); } ?>

That will add the slider inside the .content div on your custom page template. Now all you have to do is go to Pages => Add New in your admin area, select “Nivo Slider” under Template, and publish the page. Voila, you have a custom page template!

Here’s the code for the entire page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?php
/*
Template Name: Nivo Slider
*/
?>
<?php global $theme_object; /* Reference theme framework class */ ?>
<?php get_header(); ?>
 
<?php PC_Hooks::pc_after_get_header(); /* Framework hook wrapper */ ?>
 
	<div id="container" class="singular-page">
 
		<?php PC_Hooks::pc_after_container(); /* Framework hook wrapper */ ?>
 
		<div id="contentwrap" <?php echo PC_Utility::contentwrap_layout_classes(); ?>>
 
			<?php PC_Hooks::pc_before_content(); /* Framework hook wrapper */ ?>
 
			<div class="<?php echo PC_Utility::content_layout_classes_primary(); ?>">
 
			    <?php if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); } ?> // Nivo Slider template tag
 
				<?php PC_Hooks::pc_after_content_open(); /* Framework hook wrapper */ ?>
 
				<?php get_template_part( 'loop', 'single-page' ); /* Framework standard loop. */ ?>
 
			</div><!-- .content -->
 
			<?php PC_Hooks::pc_after_content(); /* Framework hook wrapper */ ?>
 
		</div><!-- #contentwrap -->
 
	</div><!-- #container -->
 
<?php get_footer(); ?>

Next Chapter…

Hooks allow you to customize your theme in lots of cool ways by modifying or adding to the processes run by WordPress to generate your site content.

Action Hooks

These are the hard-hitters of the WordPress hook world. Every time a certain action happens in WordPress you have the option to step in and alter the default behaviour for that particular event via an action hook.

For instance, every time a post is saved in the WordPress admin the ‘save_post’ action hook is triggered. At this particular point in the WordPress script execution you have the option to do something custom. This is why hooks are so powerful; and good luck to you trying to do this without using a hook!

Firstly you would have to find the right place in the maze of WordPress code, and secondly your changes are in a fragile state of existence because as soon as an organized administrator hits the update WordPress button your changes could be overwritten in an instant!

All other action hooks work in a similar way. You get the idea, right?

Filter Hooks

Filter hooks are more subtle creatures than actions hooks. You typically take some WordPress content (e.g. the post content) and modify it somehow, before returning back into the WordPress mix.

For example, if you wanted to modify the post excerpt then just use the ‘the_excerpt’ and you can modify it as you need and customize its appearance.

The important thing to note here is that you MUST return whatever value is passed to a filter hook (plus your modifications of course) or you could break some functionality of your site. Don’t panic though; you will be fine as long as you always return an expected value.

Show Me Some Code Already!

OK, so enough theory. Let’s see some hooks in action shall we (pardon the pun!)?

By now you should have a child theme with a functions.php file defined. If not, you can download a sample Designfolio child theme here.

Let’s say that you wanted to add some custom content to the bottom of each page on your site. For this you could use the ‘wp_footer’ hook which adds code directly before the closing <body> HTML tag.

Right, so we know what hook we want to use but how do we write this in code? Take a look at the following:

1

add_action( 'wp_footer', 'pc_custom_footer' );

This single line tells WordPress that you want to do something when the ‘wp_footer’ action is triggered. The second parameter ‘pc_custom_footer’ is the hook callback function. This is just the function name that is called when the hook is triggered.

All we need to do now is to specify the ‘pc_custom_footer’ function as follows:

1
2
3

function pc_custom_footer() {
	echo "<div style='text-align:center;'><p>This is my custom footer message!</p></div>";
}

Inside the hook callback function (i.e. the function that runs when the ‘wp_footer’ hook is triggered) you can see that we just have a simple echo statement which prints a <div> tag at the very bottom of the page. Simple huh?

The full code then looks like this:

1
2
3
4
5

add_action( 'wp_footer', 'pc_custom_footer' );
 
function pc_custom_footer() {
	echo "<div style='text-align:center;'><p>This is my custom footer message!</p></div>";
}

As a reminder, that goes in your child theme functions.php file (in between opening and closing php tags of course).

So that’s a walkthrough of an action hook, but how about a filter hook example?

We are going to keep things simple and use the ‘the_content’ filter hook. This hook allows you to modify the content before it is actually displayed in the web browser. So, if you wanted to customize all your posts with a message then you can do as follows:

1

add_filter( 'the_content', 'pc_custom_content' );

This line informs WordPress we are up to something and intend to modify the content via the ‘pc_custom_content’ hook. Let’s define that hook callback function now:

1
2
3

function pc_custom_content($content) {
	return $content."<div><p>Brought to you by PressCoders.com!</p></div>";
}

Here, you will notice something slightly different from the action hook callback function. This time we have a single function parameter $content. This is the content of the current item being displayed on the screen (blog post, page content etc.) It is VERY important that this value is returned from the function back to WordPress. Think of it as WordPress is trusting you with something very precious, but it expects it back so don’t have any grand ideas about making off with it. Or else!

We are simply adding a <div> HTML tag to the bottom of each content item WordPress passes to the ‘the_content’ hook. That wasn’t too bad now was it?

If you want to test out both of these hooks in your own Designfolio child theme here is the full functions.php code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
 
/* Designfolio Child Theme.
 *
 * v1.0.
 */
 
function pc_custom_footer() {
	echo "<div style='text-align:center;'><p>This is my custom footer message!</p></div>";
}
add_action( 'wp_footer', 'pc_custom_footer' );
 
function pc_custom_content($content) {
	return $content."<div><p>Brought to you by PressCoders.com!</p></div>";
}
add_filter( 'the_content', 'pc_custom_content' );
 
?>

Note: In the examples above we have used the function prefix ‘pc_’. It is a good idea to prefix your function names with something unique to avoid conflicts with other functions.

Who are the Press Coders?

David Gwyer

Code ninja, English gentleman, bug assassin.

Check out our Premium WordPress Themes, get a free WordPress theme,
or watch some WordPress video tutorials.