Tips and Tricks

Exclusive offer: get 50% off this eBook here
WordPress Theme Development - Beginner's Guide

WordPress Theme Development - Beginner's Guide — Save 50%

Learn how to design and build great WordPress themes with this book and ebook.

$23.99    $12.00
by Rachel McCollin Tessa Blakeley Silver | May 2013 | Beginner's Guides Open Source WordPress

In this article by Rachel McCollin and Tessa Blakeley Silver, authors of WordPress Theme Development - Beginner's Guide we'll look at some added extras, some additional bells and whistles you can use to make your theme just that bit better.

You'll learn how to create and make use of additional template files to add extra flexibility and functionality to your theme, as well as how to use conditional tags to display different content in different parts of your site. You'll also learn how to make use of the Theme Customizer and optimize your site for SEO.

You can create perfectly good, workable WordPress themes without any of these extras, but you'll find that you can take your WordPress themes much further with these techniques.

So let's get going!

(For more resources related to this topic, see here.)

Adding more template files to your theme

Let's say our site needed to display posts from a specific category differently from the rest of the site, or we needed the home page to work differently, or maybe we wanted to have more control over how search results or 404 pages were displayed.

With template files, we can do all that.

A search.php file for search results

WordPress handles search results pretty well already. Let's see what's displayed in our theme if we try to search for example post (Note that we've now added a Search widgetto the right-hand side footer widget area to make this possible):

As you can see, it' s using our index.php template file, so the heading reads This Month:.We'd rather make it more obvious that these are search results.

Now let's see what happens if we search for something that can't be found:

Again, the heading isn't great. Our theme gives the user a message telling them what's happened (which is coded into index.php as we'll see), but we could beef that up a bit,for example by adding a list of the most recent posts.

Time for action – creating a search.php template file

Let's create our search.php file and add some code to get it working in the way we'dlike it to:

  1. In your theme folder, make a copy of index.php and call it search.php.

  2. Find the following code near the top of the file:

    <h2 class="thisMonth embossed" style="color:#fff;">This Month:</
    h2>

  3. Edit the contents of the h2 element so the line of code now reads:

    <h2 class="thisMonth embossed" style="color:#fff;">Search
    results:</h2>

  4. Find the loop. This will begin with:

    <?php if (have_posts()) :?>
    <?php while (have_posts()) : the_post();?>

  5. The first section of the loop displays any posts found by the search, leave this as itis. The second section of the loop specifies what happens if no search results are found. It's in the following lines of code:

    <?php else : ?>
    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something
    that isn't here.</p>
    <?php get_search_form(); ?>
    <?php endif; ?>

  6. Underneath the line that reads <?php get_search_form(); ?> and before <?php endif; ?>, add the following lines of code:

    <?php endif; ?>, add the following lines of code:
    <h3>Latest articles:</h3>
    <?php $query = new WP_Query( array ( 'post_type' => 'post', 'post_
    count' => '5' ) );
    while ( $query->have_posts() ) : $query->the_post(); ?>
    <ul>
    <li>
    <a href="<?php the_permalink(); ?>">
    <?php the_title(); ?>
    </a>
    </li>
    </ul>
    <?php endwhile; ?>

  7. Save your search.php file and try searching for something which isn't included in the site.

What just happened?

We created a new template file called search.php, which will be used to display theresults of a site search. We then edited the heading to make it clearer, and added somecode to display the latest posts if the search had no results.

We actually did something pretty advanced, we added a second loop inside our original loop.

Let's have a look at the code we added after the search form:

  • The function $query = new WP_Query() runs a new query on the database, based on the WordPress WP_Query function, which is the function you should use when running a loop inside the main loop.

  • We gave WP_Query the following parameters:

    • 'post_type' => 'post' – this ensures that the query will only look for posts, not for any other kind of content.

    • 'post_count' => '5' – this tells WordPress how many posts to show. Five, in this case.

  • We then output the title of each post with the php the_title() tag whichwe've already used higher up in the loop to display post titles. We wrapped this in a link inside a list item. The link uses the_permalink() to link to the blog post whose title is displayed. This is very similar to the main loop.

  • Finally, we added endwhile() to stop this loop. This doesn't replace theendwhile() at the end of our main loop, which is higher up in the file.

For more on WP_Query and how to use it to create multiple loops, see http://codex.wordpress.org/Class_Reference/ WP_Query.

Let's have a look at what our users will see when they do a search now. First,a successful search:

Next, an unsuccessful search:

So that's how we set up a template file for search results. Our search page is only displayingtwo posts because that's all we have on our site. If there were more than five, it would justdisplay the five most recent.

Now let's set one up to display some pages differently.

Creating a custom page template

In many themes, all pages will need the same basic layout and content, with the same sidebarsand footer and the same styling. But sometimes you may need some pages to look different.

For example, you might want to use different sidebars in different pages, or you might wanta different layout. Here we'll look at the second of those two options.

Time for action – creating a custom page template

Imagine that you have some pages containing a lot of content which you want to displayacross the full width of the page, without the sidebar getting in the way. The way to handlethis is to create a page template which doesn't include the sidebar, and then select thatpage template when you're creating or editing those pages. Let's try it out.

  1. In the same folder as your other theme files, make a copy of your page.php file and call it page-no-sidebar.php.

  2. At the very top of the file, above the line reading <?php get_header(); ?>,insert the following code:

    <?php
    /*
    Template Name: Full width page without sidebar
    */
    ?>

  3. Find the following line of code:

    <div class="content left two-thirds">

  4. Edit it so it reads:

    <div class="content left full">

  5. Now find the line that reads <?php get_sidebar(); ?> and delete it.

  6. Save your file.

What just happened?

We created a new template file called page-no-sidebar.php, and edited it to displaycontent differently from our default page template:

  • We edited the classes for our .content div, using the object-oriented approach to styling used by the layout-core.css file. This will apply styling for the .fullclass to this div, so that it displays a full width instead of two-thirds of its containing element.

  • We removed the line calling the get_sidebar include, so that it won't be displayed on any pages using this template.

The lines we added at the top are essential for WordPress to pick up on our page templateand make it available in the WordPress admin. Page editors will see a drop-down list of pagetemplates available, and the name we defined in the template is what they'll see in that list,as shown in the following screenshot:

As you can see, in the Page Attributes box to the right-hand side, a new select box has appeared called Template. Our new page template is listed in that select box, along withDefault Template, which is page.php.

Now we can try it out by assigning this template to a page and seeing how it looks.

WordPress Theme Development - Beginner's Guide Learn how to design and build great WordPress themes with this book and ebook.
Published: March 2013
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Time for action – assigning a custom page template to a page in our site

It's very simple to make a page in our site use our new page template.

  1. In the WordPress admin, open the editing screen for one of your pages. Here we'll use the About Us page.

  2. In the Page Attributes box, select the template called Full width page without sidebar.

  3. Click on the Update button to save changes to the page.

  4. Now visit the page to see how it looks.

What just happened?

We edited one of our pages so it uses the page template we just set up. This is how it nowlooks in the browser:

The page is displayed without a sidebar, and the content stretches to the full width of thepage. Good job!

Have a go hero – styling the custom page template

We added the body_class() templatetag to the <body> tag in our theme's header.php file, using the following code:

<body <?php body_class($class); ?>>

This tag automatically assigns classes to the <body> tag depending on what type of contentis being displayed and the template file being used. The great news is that you can use it totarget our new page template.

Try doing this with your theme, using the .page-template-page-no-sidebar-phpclass, which will be assigned to the <body> tag for any pages using this template.

For example, you could try:

  • Changing the color or size of the page title, using the .page-template-page-nosidebar- php h2.page-title selector

  • Hiding some content on this page only, using the display:none declaration(although it's much better to delete the content from the template file as then the content won't be output in the first place)

  • Moving the sidebar to the left-hand side instead of removing it altogether— using layout styling for the sidebar and the content

  • Adding an additional background image (or a different one) to those pages

There are plenty of possibilities!

For more on creating custom page templates, see http://codex.wordpress.org/Pages#Creating_Your_Own_Page_ Templates.

Working with conditional tags

Along with using page templates to display different content in different parts of your site,you can also use conditional tags. These are bits of PHP that tell WordPress to check ifsomething is the case and, if so, run some code or, if not, to either run a different pieceof code or to do nothing at all.

We'll scrape the surface of conditional tags here as it's a huge subject that you can do agreat deal with, but it can get very complicated.

First, let's have a quick look at what conditional tags should look like.

Conditional tags' syntax

The basic syntax for conditional tags is as follows:

<?php
if ( [condition] )
{
// code to output when condition is met
}
?>

If the condition isn't met, WordPress would just skip the contents of the conditional tagand go straight on to the next bit of code. We'll create an example of this shortly.

You can also check when a condition is not true, using an exclamation mark:

<?php
if ( ![condition] )
{
// code to output when condition is not met
}
?>

Or you can use else to add an alternative action if the condition is not met:

<?php
if ( [condition] )
{
// code to output when condition is met
}
else
{
// code to output when condition is not met
}
?>

These are the three basic ways of using conditional tags.

Incorporating conditional tags in our theme

Can you think of any examples where we've already used conditional tags in this book? Fora start, there's our loop, which we've used in all of our template files. When looking for poststo output, WordPress checks if there are any posts to display, and displays them if this is thecase; if not, it does nothing.

The code in the loop which does this is shown as follows:

<?php if ( have_posts() ) : ?>
// code to display our post titles and content
<?php else : ?>
/// code to output if there are no posts
<?php endif; ?>

You may have noticed that this code is slightly different from what you'vealready seen in the loop, which uses while (have_posts). An ifstatement checks if there are posts, but a while statement just tellsWordPress to do something while there are posts to display, and isn't used for checking conditions.

The else statement and its contents are optional, but it helps to have something there just in case WordPress can't find anything to display. In our search.php template, as you'll remember, we added some code to output a list of recent posts inside that else statement,so that it's only displayed if the search finds no results:

<?php if ( have_posts() ) : ?>
// code to output posts if the search is successful
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that
isn't here.</p>
<?php get_search_form(); ?>
<h3>Latest articles:</h3>
<?php $query = new WP_Query( array ( 'post_type' => 'post',
'post_count' => '5' ) );
while ( $query->have_posts() ) : $query->the_post(); ?>
<ul>
<li><a href="<?php the_permalink() ?>"><?php the_title();
?></a></li>
</ul>
<?php endwhile; ?>
<?php endif; ?>

This means you've already been working with conditional tags and you didn't even know it!Now let's work on another example of using conditional tags – hiding the page title on thehome page.

Using conditional tags to hide the home page's title

Let's imagine that we're working on a site which needs a static page as the home pageinstead of the blog listing we're using for Open Source Magazine. If we created a site like this we'd probably want to call our home page Home. But would users need to see that Home title on the home page? Not really, as they know it's the home page.

Let's try a really easy way to do this using CSS first, before moving on to using aconditional tag.

Time for action – using CSS to hide our home page's title

Before we can hide our home page title, we'll need to change the settings on our site so itdisplays a static page as the home page.

  1. In the WordPress admin, go to the Reading screen via the Settings menu:

  2. Change the Front page displays settings so that your site displays the About us page as the home page:

  3. Click on Save Changes to save your settings.

  4. Switch to your browser and visit the home page of your site. It's now changed:

  5. Now open your theme's style.css stylesheet.

  6. Above the media queries in your stylesheet add the following:

    /* hide home page title */
    .home h2.post-title {
    display: none;
    }

  7. Save style.css and switch to your browser. Refresh the home page screen.

What just happened?

We changed our Reading settings to display a static home page, and then we added some CSS to hide the home page title on that page:

  • .home targets the home page only, the .home class is generated by body_class()which we used earlier

  • h2.post-title targets the h2 element in the loop, which displays the post title of any posts found (in this case actually a page, but that's not important)

  • display: none tells the browser not to display the content we've targeted

So now what does our home page look like?

The title isn't there anymore! What's left would need some styling as the margin betweenour image and our content is a bit small, but the CSS has done what we set out to achieve.

Now let's look at the HTML that WordPress generates on the home page. This is just asnippet of the full page HTML showing the elements affected by what we've just done:

<div class="content left full">
<article class="post-16 page type-page status-publish hentry"
id="post-16">
<h2 class="post-title"><a href="http://rachelmccollin.co.uk/
opensourcemagazine/" rel="bookmark" title="Permanent Link to About
Us">About Us</a></h2>
<div class="entry-content"><!--//post-->
<p>Lorem ipsum...

The title is still output in the markup—it's the line beginning <h2 class="post-title">.This means that anyone viewing our site without CSS, either because they've turned it off orthey're using assistive technology such as a screen reader will still see or hear that title.

We want to remove the title altogether, so we use a conditional tag instead.

Time for action – using a conditional tag to hide our home page's title

  1. Open your style.css file and remove the styling you just added to hide the home page title. Check your home page in the browser, it should be displaying the title again.

  2. Open the page-no-sidebar.php file, which is the template file our About Us page uses.

  3. Find the following code:

    <h2 class="post-title"><a href="<?php the_permalink() ?>"
    rel="bookmark" title="Permanent Link to <?php the_title_
    attribute(); ?>"><?php the_title();?></a></h2>

  4. Add a conditional tag around it so it reads:

    <?php if ( !is_front_page () ) { ?>
    <h2 class="post-title"><a href="<?php the_permalink() ?>"
    rel="bookmark" title="Permanent Link to <?php the_title_
    attribute(); ?>"><?php the_title();?></a></h2>
    <?php } ?>

  5. Save your template file.

  6. Now repeat this process for the page.php template file and save that.

  7. Switch to your browser and refresh the home page.

What just happened?

We added a conditional tag to tell WordPress to not output the post title on the site'sfront page. Let's have a look at that code:

  • <?php if ( !is_front_page () ) { ?>aa checks if the user is not on thefront page (by inserting an exclamation mark). The } ?> at the end is importantas the braces will contain the code to output if the condition is met, and ?> closes PHP so that the next line of HTML can be read by the browser.

  • The next line is unchanged, it's the output of our h2 element and its contents.

  • Finally, <a?php } ?> tells the browser we're using PHP again. We use the closingbrace (}) to end the code that's output if the condition in our conditional tag is met, and then uses ?> to close PHP again.

When you refresh your home page again you'll see that the title isn't displayed. It looksexactly the same as the previous screenshot which was the result of using CSS to hidethe title.

But the difference is in the code. Let's see the HTML that WordPress outputs for our homepage now:

<article class="post-16 page type-page status-publish hentry"
id="post-16">
<div class="entry-content"><!--//post-->
<p>Lorem ipsum...

The h2 element and its contents have gone completely. Much better!

Before moving on to the next section, we'll just take a moment to restore our Reading settings to the way they were, so that the blog page is shown as thehome page instead of a static page. Don't undo the changes you've made to your template files though. If you should ever change the Reading settingsback in the future, or someone else who needs a static home page should use your theme, this conditional tag will be useful.

Have a go hero – other ways of showing conditional content

Can you think of any other ways of hiding the title in our home page?

Yes, you could use a template file. You could either set up a custom page template for use on the home page, or (even better) create a front-page.php file which WordPress willautomatically use to display home page content. In your new template file, you'd remove the h2 element and its contents altogether. We've used the conditional tag to create awhole new template file just to remove one line of code seems a bit disproportionate.

Can you think of any other uses for conditional tags? Try to identify how you might usethem in other places in your theme, and give it a go.

For a full list of the conditional tags available and how to use them, see http://codex.wordpress.org/Conditional_Tags.

The Theme Customizer

You could quite happily stop where you are and you'd have a great theme. It's structured well, it makes use of the bloginfo tag to display site information, it has a menu and somecool widgets, as well as using template files and conditional tags to display the right contentin the right place.

But if your theme is going to be used by other people, you can add more options to help make their lives easier. By activating the Theme Customizer, you can let users tweaksettings such as colors and fonts or add content to be displayed in the theme. These aregreat features if you're going to release your theme to the public, but can also be usefulfor client sites.

The Theme Customizer was introduced with WordPress 3.4. The Theme Customizer for the default Twenty Eleven theme looks like the following screenshot:

To give your theme users access to the Theme Customizer you need to add some code to yourfunctions.php file, and then you need to add the relevant code for each option you want toprovide them with. We'll start by adding Theme Customizer functionality to our theme.

Time for action - adding the Theme Customizer to our theme

  1. Open your theme's functions.php file.

  2. Before the closing ?> tag, add the following:

    function add_theme_customizer( $wp_customize )
    {
    }
    add_action( 'customize_register', ' add_theme_customizer');

  3. Save the functions.php file.

  4. To view the Theme Customizer, go to Appearance | Themes, and then in the links below your theme, click on Customize.

What just happened?

We added a new function to add Theme Customizer capability to our theme. Let's havea look at that function:

  • First we define our function, add_theme_customizer. You can give this any name you want, the name we've used makes it easy to see what the function does.

  • The space between the braces is where all the code will go to add specific options to our Theme Customizer.

  • After closing the braces, we add an action. This will run the code inside our add_ theme_customizer function when WordPress runs the customize_registerfunction, which is a default function.

Now we can view the Theme Customizer for our theme. As we haven't defined anyadditional functions, it currently includes the default options provided by WordPress:

We can see the default customizations added by WordPress:

  • Site Title & Tagline: Here we can change the site's name and description

  • Navigation: Change the menu used in the main navigation area

  • Static Front Page: Change the Reading settings if you want the front page to display a static page instead of the latest posts

We can add more options to the Theme Customizer, so let's do it.

Time for action – adding some more options to the Theme Customizer

WordPress provides some default options in the Theme Customizer, and we can also addour own. Let's add the option for users to tweak the color of links.

  1. In functions.php, add the following code between the curly braces in the function you just defined:

    // SETTINGS
    $wp_customize->add_setting( 'content_link_color', array(
    'default' => '#088fff',
    'transport' => 'refresh',
    ) );
    // CONTROLS
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_
    customize, 'content_link_color', array(
    'label' => 'Content Link Color',
    'section' => 'colors',
    ) ) );

  2. Save your functions.php file.

What just happened?

We added a function to enable users to change the link colors in their site using the ThemeCustomizer. This is the most complex piece of PHP code we've added yet so let's have a lookat how it works:

  • Firstly, it defines the settings which are available in our Theme Customizer, using the WordPress $wp_customize->add_setting function:

    • content_link_color is the ID of our setting

    • the default value is #088fff, which is the link color coded into our theme's stylesheet

    • 'transport' => 'refresh' tells WordPress to display any changes users may make in the Theme Customizer as they are making them

  • Next, it specifies the control which users will use to edit the setting, using the new WP_Customize_Color_Control function:

    • content_link_color is the ID for our setting that tells WordPress that this control will amend that setting

    • The label value is what WordPress will display in the Theme Customizer screen

    • section is the section within that screen in which WordPress will place our control, in this case, colors

Let's see what our Theme Customizer looks like now:

Any changes the user makes won't actually have any effect yet, because we haven't toldWordPress to alter the CSS based on their modifications.

Time for action – ensuring Theme Customizer changes are carried through to the CSS

To ensure any changes made by users actually take effect, we need to add another functiontelling WordPress to alter the CSS.

  1. In your functions.php file, below the functions you've just added, add the following lines:

    function theme_customize_css()
    {
    ?>
    <style type="text/css">
    a { color:<?php echo get_theme_mod( 'content_link_
    color' ); ?>; }
    </style>
    <?php
    }
    add_action( 'wp_head', 'theme_customize_css');

  2. Save your functions.php file.

What just happened?

We added a final function which tells WordPress to amend CSS based on any changesthe user makes in the Theme Customizer screen. In detail, the code is as follows:

  • We start with the theme_customize_css() function which defines our function's name.

  • Inside the function's settings, we set styling using >style type="text/css"> which is inline CSS to be inserted in our page's >head> section:

  • The styling uses echo get_theme_mod( 'content_link_color' ). What thisdoes is fetch the value of content_link_color (the setting we defined earlier) and echoes it, which means it outputs it.

  • Finally, after closing the HTML tags and PHP braces, we define an action: add_action( 'wp_head', 'theme_customize_css'). This defines an action to be run with the wp_head hook, which means WordPress will use it whenever it encounters wp_head in our page's <head> section. You may remember we addedthat to our theme in the Finishing off with the footer section in Chapter 3, Coding It Up. The action runs our function theme_customize_css, at this point. What this will then do is output the HTML into the <ahead> section of each page, generating inline CSS.

Now when our users amend the link color, it will show up on the Theme Customizer screen:

If they then save changes by clicking on the Save button, the changes will be reflected in thelive site, as shown in the following screenshot:

Before continuing, we'll use the Theme Customizer to change the color back to the default CSS as it fits with our design.

Theme Customizer – the possibilities

We've just added one option to the Theme Customizer—of course you could add more.Possibilities include:

  • changing any of the colors

  • tweaking the layout

  • adding content in specific areas of the site

  • uploading images

The great thing about using the Theme Customizer is that users can see the effect of theirchanges before saving, which means they'll be less likely to break the site than if they triedto hack your theme files.

For more on the Theme Customizer, see http://codex.wordpress.org/Theme_Customization_API.

WordPress Theme Development - Beginner's Guide Learn how to design and build great WordPress themes with this book and ebook.
Published: March 2013
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Have a go hero – adding a theme options screen

Along with activating the Theme Customizer, you could also create a theme optionsscreen which lets users configure a wider range of options in your theme. This involvesusing functions to create admin screens and menu items, as well as getting to grips withthe WordPress Settings API.

Try creating a theme options screen for your theme. You can find out how to do it at http://codex.wordpress.org/Creating_Options_Pages.

Search engine optimization

WordPress is great for SEO. It lets you add meta tags to your pages which will help searchengines to index them properly, it makes it easy for you to add information to your imagesto help search engines to find them, and with the use of plugins, you can do even more.

As SEO is so important to most site owners, we're going to spend some time looking at SEOand how you can develop themes that enhance SEO for the owners of any sites using them.

SEO checklist

There are a few basic checks you can make to ensure your theme is SEO-friendly. Manyof them have other benefits too, such as making the site more accessible or faster.

The main things you should be doing in your themes include:

  • Using clean, valid, standards-compliant code

  • Using semantic elements which will help search engines (and browsers) understand how the content is organized

  • Ensuring your theme isn't sluggish

  • Configuring pretty permalinks which make use of search keywords

  • Optimizing images with alt and title attributes

  • Using optimized meta tags: title and description

Of course, in addition to these it's important for a site's content to be SEO-friendlybut we won't deal with that here as it's not related to the theme itself.

Let's have a look at each of those in turn.

Clean, valid, standards-compliant code

A theme which is well coded will have immediate SEO benefits, as well and speed andusability benefits too. Search engines will find it easier to index well-coded sites and willbe less likely to blacklist them. In addition, by using semantic elements you can give searchengines some pointers as to how your theme's content is structured, for example by using elements such as header, article, aside, and footer correctly.

Semantic HTML5

This latest version of HTML (HTML5) gives us some new semantic elements to work with that make more sense of our files. The elements we used included:

  • header – the site header, which you may have coded in the past as <div ID="header">.

  • article – the element containing each of our posts.

  • aside – it contains sidebars. An aside is anything that is separate from the main content and sits outside the flow of the page.

  • footer – the site footer. You can also use this for a footer within any other element,for example an article's footer might contain some metadata about the article.

These elements tell search engines more about the structure of a page than the div tags wemay have used in the past, which have no semantic meaning at all.

For more information on HTML5 and how to implement it, see the excellent HTML5 Doctor website at http://html5doctor.com. For an overview of how HTML5 and WordPress fit together, see http://rachelmccollin.co.uk/blog/wordpress-and-html5/.

Making your theme run faster

This isn't really so much about themes as it is about the sites they're used on, but thereare some tips for faster sites that can also be applied to themes.

Some tips for making your theme lean and fast, so it doesn't slow down the sites it'sinstalled in include:

  • Keep your code tidy – only use what's necessary and delete anything that's not being used.

  • Avoid duplication in your code – for example, when using CSS for styling. A lot ofthemes will include the same styling for multiple elements or classes, repeatingthe same declarations over and over. Our object-oriented approach means we only have to add each bit of styling once and then use classes to apply it to our theme.

  • Avoid inline JavaScript and CSS – store them in external files such as style.cssand then call them from your template files.

    Occasionally inline CSS and scripts may be unavoidable, such as when weadded styling earlier using the Theme Customizer. This was because we needed to attach it to the get_option() function, which we can't run in a stylesheet.

  • Call stylesheets at the top of each page (in header.php) and scripts at the bottom (in footer.php) where possible.

  • Minimize HTTP requests by using only the images you need. For example, byusing CSS3 for gradients and rounded corners we avoided a large number of HTTP requests for images that older themes would have made to achieve these effects.

Once you have your theme installed on a site, there's more you can do to make the siteitself faster, for example:

  • Use a caching plugin such as WP Supercache (available at http://wordpress.org/extend/plugins/wp-super-cache/) to cache your site. The way thisworks is by generating static HTML from the PHP generated by WordPress. ThisHTML is then stored on the server with your site and displayed when a user accesses the site. This is much faster than running all the PHP every time.

  • Minify your code with a plugin such as WP Minify (http://wordpress.org/extend/plugins/wp-minify/), which compresses the code in your site to make it run faster.

Search-engine optimized permalinks

A slug is a unique identifier for a page or post which appears at the end of its URL, so the page http://rachelmccollin.co.uk/opensourcemagazine/contact/ has the slug contact. When editing your slugs, you will help search engine rankings if you ensure those slugs include some of your search keywords, in other words, the words or phrases people are likely to use when looking for sites like yours.

Identifying the best search engine keywords to target can be a mammoth task,especially for sites where being found by search engines is crucial and there'sa lot of competition. To learn how to do this, check out WordPress 3 SearchEngine Optimization, Michael David, Packt Publishing, and the article on thesubject at http://www.packtpub.com/article/customizingwordpress- settings-seo.

Optimizing images and links with alt and title attributes

This is a topic more for site owners than for theme builders, as they will be uploading more images and adding more links to their site. However, it does have its place in theme building.

Our theme includes images as background images which can't have alt or title attributes assigned to them. But let's imagine your theme included a logo as part of the HTML markup. How would you optimize that image for SEO?

Summary

In this article, we learned some extra tips and tricks to make your themes even better. We learned about:

  • Template files – creating them and using them to display different content in different parts of your site. We created a custom page template for pages needing full width content and no sidebar.

  • Conditional tags – we looked at how to use them to display different content or hide content when certain conditions are met. We used a conditional tag to hide the page title on the home page.

  • Theme Customizer – we added this functionality to our theme and gave users the option of tweaking some colors.

  • SEO – we worked through an SEO checklist for theme building and optimized our theme's images, links, and meta tags for SEO.

  • You're now at the end of this book and have worked through the process of creating your first WordPress theme from scratch, congratulations! You've learned how to:

  • Design a theme and prepare wireframes and mockups

  • Write the HTML and CSS for your theme

  • Convert your HTML to PHP and split that into template files

  • Add template tags, menus, widgets, and more

  • Debug and validate your theme

  • Package your theme up for users

  • Enhance your theme with advanced features

You now have an all-singing, all-dancing theme which goes beyond the basics and will enable you (and other users) to create great websites.

Being able to build WordPress themes is a core skill without which you can't really achieve very much with the platform. You now have the skills you need to design and develop great themes for your own or your client sites or for release to other WordPress users.

Now all that's left is for you to put what you've learned into practice on some more themes and enjoy being a theme developer. Good luck!

Resources for Article :


Further resources on this subject:


About the Author :


Rachel McCollin

Rachel McCollin is a web designer and developer specializing in WordPress development. She discovered WordPress when looking for a CMS that made the transition from static HTML relatively straightforward, and hasn't looked back since.

Rachel runs Compass Design, a web design agency based in Birmingham, England, but with clients across the UK and internationally. The agency was established in 2010 and quickly began specializing in building WordPress themes and sites, with a slant towards responsive themes. The agency now has a great team of designers and developers, including some WordPress specialists.

Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Books From Packt


Oracle Advanced PL/SQL Developer Professional Guide
Oracle Advanced PL/SQL Developer Professional Guide

Oracle WebCenter 11g PS3 Administration Cookbook
Oracle WebCenter 11g PS3 Administration Cookbook

Oracle Business Intelligence Enterprise Edition 11g: A Hands-On Tutorial
Oracle Business Intelligence Enterprise Edition 11g: A Hands-On Tutorial

Oracle Enterprise Manager Cloud Control 12c: Managing Data Center Chaos
Oracle Enterprise Manager Cloud Control 12c: Managing Data Center Chaos

Getting Started with Oracle BPM Suite 11gR1 – A Hands-On Tutorial
Getting Started with Oracle BPM Suite 11gR1 – A Hands-On Tutorial

Oracle Service Bus 11g Development Cookbook
Oracle Service Bus 11g Development Cookbook

Oracle SOA Infrastructure Implementation Certification Handbook (1Z0-451)
Oracle SOA Infrastructure Implementation Certification Handbook (1Z0-451)

Oracle ADF Enterprise Application Development—Made Simple
Oracle ADF Enterprise Application Development—Made Simple


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
M
6
D
C
9
B
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software