PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Create Your Own Template II

Posted by on 17th Aug 2008 | 6 comments

Last week I explained how to set up your index.php file for your new template. This week I’ll cover the included files, ie. the header, footer and sidebar (if its needed as a separate file).

The Header

Your header needs to be in a file header.php. This is the file that the function get_header() will include, as explained last week. In the header file goes all the markup from the top of the design that needs to be on every page.

First we change the page title to be dynamic. I’ve written about how you can do this before – improve your front page title. This will give you a dynamic title and make the most of the title for each page.

Then you can change the URL used to link to the style.css file and use the code

<?php bloginfo('stylesheet_url'); ?>

This will output a path of http://www.yourdomain.tld/blog-directory/wp-content/themes/themename/style.css. You don’t have to use this if you don’t intend to change your theme name, or with the latest version of WordPress, change your wp-content folder name. However, there’s no harm in using this tag instead, just to be on the safe side.

Then we want to add the RSS links for people subscribing to the site feed. The code for this, which needs to go somewhere in the head section of your code, is

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />

You don’t have to use all 3 lines. Personally I just use the first line for the RSS 2.0 feed.

Then, just above the closing </head> tag add in the template tag

<?php wp_head() ?>

This tag is used for various different plugins to target the header, so whilst it may seem like it doesn’t do much, it’s safer to leave it in just in case.

You then have other tags which may be of use/interest. All go within PHP tags.

language_attributes();
This echoes out attributes for the opening html tag, so place this inside the <html> tag.
bloginfo(‘pingback_url’);
This is the pingback URL for the page you’re viewing. This goes into a link tag within the header ie. <link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />
bloginfo('url');
This echos out the full URL of your blog, ie. to the front page.
bloginfo('name');
This echos out the name/title of your blog, set in the General options page.
bloginfo('description');
This echos out the description of your blog, set in the General options page.
bloginfo('template_directory');
This echos out the URL to the template directory, useful for linking to favicons, other stylesheets etc.

The Footer

Your footer file, footer.php, is fairly simple in terms of altering to work with WordPress. As with the header and wp_head(), the footer has wp_footer() which is recommended to be added just before your closing body tag. If you want to link a copyright statement to your site then the tags above to get the URL and blog name will be of use.

The Sidebar

You may not need a sidebar as already explained. If the sidebar/menu can be brought into the header or footer then I’d advise to do so. Alternatively you can keep the sidebar in its own sidebar.php file and link to it from the correct point in the header or footer using get_sidebar();

Your sidebar will typically have the categories listed, maybe the recent posts and static pages. I’ve written about adding each of these in the past so recommend the following pages for reading:

Your Search Box

If you want to allow people to easily find information within your site then a search will be handy. Most blogs will have a small search box somewhere on their site, and to add this in you need the code

[php htmlscript="true"]<form method="get" id="searchform" action="<?php bloginfo(‘url’); ?>">
<div>
<label for="s">Search:</label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" name="searchsubmit" value="Search" />
</div>
</form>[/php]

If you don’t want this on every page but instead just want a search page then you can always slot this code into a static Page template. Same goes for listing your bookmarks as explained previously in Page Templates – Create a Links Page.

Conclusion

So that’s the basics of creating your own theme. Once you’ve got your front page sorted out, then you can look to duplicate your index.php page and rename it to the various theme files needed where you want something different to the display or markup used in the index.php file (the filenames are explained under the WordPress Template Hierarchy.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

6 comments - Leave a reply
  • Posted by Techy on 17th Aug 2008

    Its actually harder than it seems. I've tried about 3 times and still havent gotten it to work :shock:

  • Posted by Sarah on 17th Aug 2008

    What hasn't worked? It's honestly not that hard to do once you know the right tags. What I've written out this week and last week is the basics of what you need to get your first template up and running.

    Post up an questions here or post up in the Blogging Tips Forums and we'll help you out if you're stuck.

  • Posted by New To Programming on 17th Aug 2008

    Thanks for the guide. Very useful indeed. :smile:

  • Posted by Kyle Sagaas on 17th Aug 2008

    Thanks for sharing this wonderful post. I will certainly come back for more reads later. Thanks sarah! :smile:

  • Posted by Si Philp on 17th Aug 2008

    Hi Sarah,

    I am keeping a close eye on your wordpress posts as I am going to be doing my own theme for my podcast site. Not saying I am going to the darkside of php :wink: but with the basics your pointing out am sure I'll have a good result.

    Keep up the good work :smile:

  • Posted by Armand on 21st Aug 2008

    Well, now I think I should go pimping my wp, just because I didn't have enough time to do it in the past. Thanks.