Blogging Tips

Create Your Own Template II

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

<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>

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.

Written by Sarah from Stuff By Sarah
Posted on August 17th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

8 Responses to “Create Your Own Template II”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Techy says:

August 17, 2008 at 11:45 am

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

August 17, 2008 at 11:54 am

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.
New To Programming says:

August 17, 2008 at 7:45 pm

Thanks for the guide. Very useful indeed.
Kyle Sagaas says:

August 17, 2008 at 10:13 pm

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

August 18, 2008 at 2:28 am

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 but with the basics your pointing out am sure I’ll have a good result.

Keep up the good work
Armand says:

August 22, 2008 at 3:09 am

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.