WordPress Tips and Tricks for Template Files

Tips Apply to WordPress 1.5+

We looked customizing the WordPress Administration Panels and many other WordPress Tips. This one looks at some tips and tricks for WordPress template files and style sheets.

The template files in WordPress are found within your WordPress Themes. They are the building blocks which come together to create the structure of your site’s generated web page. Combined with the fact that each WordPress Theme has it’s own style sheet, things can be very simple or complex, depending upon what you want to do.

Here are some things you can add or change in your WordPress Theme that might improve things.

Labeling Your Template Files

I love the modular system found within WordPress 1.5+, once I got my head around how it worked. Yet I still needed to track down which CSS div and HTML tag started and ended in which template file.

I went through each template file and labeled it with a comment that identified it.

<!--header begins-->

And at the end of the template file, I put a comment to mark the ending of the code within that template file.

<!--header ends-->

As I developed my site, I started to create custom template files for categories, and for different sidebars and headers, which appear based upon a query which asks which category the post is in or which type of page is being viewed, such as single or multiple post views. I now had two different headers, three different sidebars, and two different single post template files. That’s a lot to remember and track.

Again, I went through and labeled which one was which so I could check to see which one was generated in which view, making the tracking of my query statements much easier.

<!-- single 1 -->
<!-- header 2 -->
<!-- header 3 -->

I also went through and traced and labeled all of the CSS divisions to make sure I knew where one started and where it ended. Makes the whole testing process much easier.

Adding Categories Back to Excerpts

After working so hard on the design of my excerpts on the front page, I realized that I was missing a major navigation tool by not having the categories the post was in highlighted in some way. So I decided to add the categories back into my design using the the_category() template tag.

<div class="catslist"><?php the_category(' and '); ?></div>

This produces a list of the categories the post is in with an “and” between each category. Very simple. Added this to my index.php just under the <h2> heading where I wanted the categories to show and thought I was done. Nope.

Remember, if you change one thing in a multi-post page, you better change it in all of them. Because I have a custom search page and custom category pages, I had to go in and add the same tag to the WordPress Loop in each of my template files. They included:

search.php
category.php
category-1.php
category-2.php
category-3.php
archives.php

Finding Your Images

I tend to use relative links rather than absolutes. When it came time for my images to appear in my WordPress site, I found they where in the right place, but WordPress wasn’t finding them since there were outside of the wp-content folder and in a folder of their own in the root directory. I certainly didn’t want to go through and search and replace every image reference in my database after importing it. And I wasn’t going to move my image directories around.

I found an easier way to help the browser locate those relative image links.

By using a feature called base href in the head of your header.php template file, you can establish the artificial “root” from which to look for file references.

<base href="http://example.com/" />

This instructs the browser to work from the root directory to find the links. So a link to an image at images/photos/ball.gif, even though the file sits at example.com/test/wordpress/wp-content/themes/yourtheme/ would automatically look under the root for images/photos directory.

For more information, read Base Reference in the HTML and XHTML Reference Guide.

Sorting Out the Categories

We have a lot of pages on our site and a lot of categories and subcategories. I wanted to customize each of the main category pages to help people move around the site. WordPress allows you to create custom category templates, allowing control of the content on each category page.

In the most simplest of explanations, if your WordPress Theme has a category.php template file, use it. If not, then go find one from another Theme like the Default WordPress Theme. Copy it and change the copy’s name to category-3.php with the number representing the category ID you wish to have in a custom category. You don’t have to have this on every category, just the ones you want customized.

Then you can customize it. To simply add text, slap in a paragraph tag and write what you want just above the WordPress Loop. Save it and it’s done.

I wanted to create a table of contents of all the subcategories under the parent category in this category page. This example highlights category 8 – The Learning Zone on our site. There are a variety of subcategories underneath the Learning Category. The table of contents section looks like this in the category-8.php template file:

<div id="cattoc">
<ul>
<li><a href="index.php?cat=8" title="<?php echo single_cat_title(); ?>">
The <?php echo single_cat_title(); ?> Zone</a></li>
<?php wp_list_cats('sort_column=name&optioncount=0&list=1&use_desc_for_title=1&child_of=8'); ?>
</ul></div>

Using the wp_list_cats() template tag, I set the options to show the “children” of the parent category number 8.

I then added some descriptive text, of which here is an abbreviated version:

<p>The Learning Zone offers a wide variety of educational 
articles such as nature photography techniques, composition and 
close ups, the business of nature photography, equipment,....Hopefully 
you won't make the same mistakes as we have!</p>

Using the Coffee2Code WordPress Plugins for customizing post listings, I added a small table of contents list for Article Highlights:

<h4>Article Highlights</h4>
<ul>
<?php c2c_get_random_posts(20, "<li>%post_URL%</li>", "8"); ?>
</ul>
<hr />

Then the WordPress Loop begins and the posts within that category are showcased. A minor drawback to this system is that if there are enough posts within that category to justify more than one page, when the user clicks the “previous posts” link, the next page within that category will feature the same information at the top again. Hopefully I’ll be able to find a work around for that soon.

I ended up with over 30 different category template files. This was overwhelming. If I wanted to make a change in the look of the category templates, I had to go through and make the same change on all of them. There had to be a better way. Then I remembered I’m working with WordPress. Anything is almost possible.

With the help of a few WordPress experts, we were able to turn all of these multiple category template files into one, stuffed full of variables to get information out of the database based upon the user’s query. Thus, a very high powered custom category template based upon variables was created.

The things you can do with WordPress are amazing!

Check All the Template Files

I thought I’d made all the modifications to all of the template files, but doing a simple search on my site brought up a look I wasn’t too happy with. I had forgotten to modify the search.php page.

Make a list of all the template files within your Theme directory. As you go through them, making modifications if necessary, make sure you check them off the list. For example, if you change the index.php template file so your excerpts will have a specific look, make sure you make the same structural changes to your other multi-post pages like archives.php, search.php, category.php, and any custom category template files you’ve made.

Digg | Del.icio.us | BlinkList | Furl
Spurl | Reddit | Simpy | RawSugar

---

site search tags: wordpress, blog, wordpress tips, wordpress themes, wordpress templates, website design, website administration, web page design, wordpress help
© Reprinted with Permission