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).
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 https://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.
- This echoes out attributes for the opening html tag, so place this inside the <html> tag.
- 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’); ?>" />
- This echos out the full URL of your blog, ie. to the front page.
- This echos out the name/title of your blog, set in the General options page.
- This echos out the description of your blog, set in the General options page.
- This echos out the URL to the template directory, useful for linking to favicons, other stylesheets etc.
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.
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’); ?>">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" name="searchsubmit" value="Search" />
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.
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.