Skip navigation

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 Digg | Del.icio.us Del.icio.us | Blinklist BlinkList | Furl Furl
Spurl Spurl | Reddit | Add to Simpy Simpy | Add to RawSugar RawSugar


site search tags: , , , , , , , ,
© Reprinted with Permission

21 Comments

  1. Posted September 18, 2005 at 4:39 pm | Permalink

    Wow Lorelle, you have a lot of helpful stuff here. I’m going to spend some time going through your articles and try to stop being a WordPress newbie. :)

  2. Posted September 18, 2005 at 8:21 pm | Permalink

    Glad you are getting the clue. ;-)

    Take your time and let WordPress slowly reveal itself to you instead of trying to cram it all in. There is a LOT to learn about WordPress. Thank goodness, the simplist part, posting, is the easiest to learn. The rest you learn by trial and fire, as well as need.

  3. Posted October 1, 2005 at 7:45 am | Permalink

    Hello Lorelle

    This information seems to be what I need. I am new to WordPress and currently enjoying its capabilities.

    One question to start me off, I have a list of sponsors towards my site that I would like to be featured in the side bar, one logo per sponsor, positioned underneath eachother.

    I understand that I would need to resize each image and put them in their own directory in the wp-content folder, but which template file would I edit (presume the side bar one, but not sure) and what tag would I need to do this?

  4. Posted October 1, 2005 at 9:08 am | Permalink

    There are two ways of doing this. You can use Links Manager which sets up the links in your sidebar in the “BlogRoll” or “Links” section. This is probably the best way, which would avoid editing the template files and give you a little more control. Depends upon your Theme.

    If you want to edit the template file, the sidebar.php is the template file to put them in, or add the template tag(s) for Links Manager to your sidebar.

    To put them in the footer, then edit the footer.php.

    The method of including them manually is no different from making a link to their site with any reference codes from your site (the link “kickback”) around a graphic or text pointing to the link. Normal stuff. If you are using text, put them in a list, if you are using graphics, then put them on top of each other without any alignment attributes.

    You don’t have to put them in their own directory in the wp-content folder. It’s a nice thought and good practice, but you can put the graphics anywhere you want. I have a folder called images and I have massive subdirectories for all the different kinds of images and photographs I use on my sites. Keeping them together is a good idea, though.

  5. Posted August 9, 2007 at 11:23 pm | Permalink

    Lorelle,

    I got to tell you, I learn so much from your blog that I have to recommend your site to my students who are struggling with wordpress.

    Thanks for all the great information.

  6. Posted February 13, 2008 at 10:28 pm | Permalink

    Thanks for the tips. I love your site. I’m trying to to dig deeper into making templates.

    My homepage displays a static portion, then an excerpt and image from the most recent three posts. Right now I use a plugin that inserts the content of a wordpress page as the static portion of the site. This is great because I can easily edit the content without editing the template file. The problem is that in order to call the insert_page function I have to put the page ID in. What I’d like is a template that will display the current page, then list recent posts. That way the template would be universal, and could be applied to multiple pages without editing the page ID for each use.

    For example, if I go to the “Welcome” page, it should show me the content of the welcome page (say ID=1), then list posts. If I then go to the “about” page, it should show the content of that page, then list the same posts.

    Any ideas?

  7. Posted February 13, 2008 at 11:19 pm | Permalink

    @ Ben:

    You are asking to modify a WordPress Plugin, thus you need to contact the Plugin author.

    If you are willing to dig into WordPress template tags and files, there are some wonderful Conditional Tags information on the WordPress Codex that will give you the ability to customize your Theme for such requests.

  8. Posted February 9, 2009 at 5:14 pm | Permalink

    Let us try this a third time.

    You can use e.g.,
    |!– Begin |? php echo basename(__FILE__); ?| –|
    instead of typing the file’s name by hand.

    Replace all | with the correct angle brackets.

  9. Posted February 11, 2009 at 1:57 pm | Permalink

    OK, I’m saying that instead of needing to put a different
    (!– single 1 –>
    (!– header 2 –>
    (!– header 3 –>
    at the beginning of each of those three files, just use
    (!– (?php echo basename(__FILE__); ?> –>
    in all cases, to have the filename generated automatically.
    No more need to manually type the name of each file in yourself.
    PHP sees the magic word__FILE__ and changes it into the current
    filename.

    P.S., I tried
    perl -nwe ‘use HTML::Entities; print encode_entities($_)’
    to format the above, but my comment was eaten alive.
    OK, now replacing all left angles with left (‘s…

  10. Posted March 4, 2009 at 11:12 am | Permalink

    Hi Lorelle

    SOOOoo much to learn, and quite disheartening sometimes to see what others have done that is so in advance of what I can do at the moment.

    However, onwards and upwards.

    What I am trying to do at this red-hot moment is have a title on the front page of a multi-user blog (containing all the recent postings), but a title which DOESN’T appear on a separate page, which contains a chat box. I had thought by putting in some html on the index.php page that the title would only appear on that page, but unfortunately the index.php page is also used as part of the format of the separate Chat page, so I get the same title there, too, as you would see if you went to the site.

    Any advice, please? I’m quite happy tinkering with the templates if I have some idea of what I’m doing.

    Thanks.

    • Posted March 4, 2009 at 4:54 pm | Permalink

      I don’t understand what you are trying to do, but recommend you ask for help in the WordPress Support Forums. If you want information or code to appear on a specific template file, then you edit that file. Is there a “chat” page in your WordPress Theme? Either way, let them know when you ask in the forums.

  11. Posted May 11, 2009 at 2:59 am | Permalink

    I still don’t understand about Finding Your Images.
    I have the problem when I upload my website from localhost to my web hosting. I try to make relative link but the image still not appear, could you give more clear example?
    Especially how to make link in the post
    Thanks

  12. Posted August 6, 2009 at 2:35 am | Permalink

    Hello,
    Is there anything similar to this for wordpress 2.8??

  13. Posted August 11, 2009 at 5:28 pm | Permalink

    Hi Lorelle, this is very good information. I have a problem and wonder if you could give me a hand here. I would like to know how to change the target file for a certain wp action.

    For example, usually when the url ends with /?cat=100 wp would call the archive.php and automatically filter only the category that was passed in the url. I have a theme that is having a strange behavior as it goes to index.php instead of archive.php.

    I thought the archive.php was missing, but it isn’t, so that’s why I have no clue of what is going on.

    Could you tell me please where can I change such behavior, I mean, that when http://myblog.com/?cat=100 is called wp goes to archive.php?

    Thank you.

    • Posted August 11, 2009 at 5:33 pm | Permalink

      Actually, it calls the category template, not the archive. :D The issue of index.php is a permalink problem. Please check out WordPress Permalink issues to correct this issue. As for why it goes to archive.php, it is probably because your Theme does not have a category.php. Also check Template Hierarchy to understand how that works.

  14. Posted August 12, 2009 at 11:30 am | Permalink

    Thank you Lorelle, sounds like I’m a lazy guy but I give up. I’m really not a good PHP programmer and the wp codex documentation is very confusing for my taste.

    I solved this issue switching to another theme, not so nice but thousand times easier to customize. However, thanks again for your kind help.

    Cheers!

  15. Posted May 19, 2010 at 9:27 pm | Permalink

    Hello from Germany! May i quote a post a translated part of your blog with a link to you? I’ve tried to contact you for the topic WordPress Tips and Tricks for Template Files « Lorelle on WordPress, but i got no answer, please reply when you have a moment, thanks, Spruch

    • Posted July 6, 2010 at 10:14 pm | Permalink

      I do not permit translations of my articles. Thank you for respecting my copyright.


23 Trackbacks/Pingbacks

  1. [...] If you are into tweaking your WordPress Theme or designing one from scratch, here are some HTML/XHTML and CSS Cheat Sheets you might want to add to your resources. [...]

  2. [...] WordPress Tips and Tricks for Template Files [...]

  3. [...] WordPress Tips and Tricks for Template Files [...]

  4. [...] WordPress Tips and Tricks for Template Files [...]

  5. [...] WordPress Tips and Tricks for Template Files [...]

  6. [...] WordPress Tips and Tricks for Template Files [...]

  7. [...] WordPress Tips and Tricks for Template Files [...]

  8. [...] instructs a browser to treat the sites root directory as the default directory. Lorelle has other WordPress tips on offer including working with the template [...]

  9. [...] WordPress Tips and Tricks for Template Files [...]

  10. [...] WordPress Tips and Tricks for Template Files [...]

  11. […] WordPress Tips and Tricks for Template Files […]

  12. […] WordPress Tips and Tricks for Template Files […]

  13. […] WordPress Tips and Tricks for Template Files […]

  14. […] WordPress Tips and Tricks for Template Files […]

  15. […] WordPress Tips and Tricks for Template Files […]

  16. […] WordPress Tips and Tricks for Template Files […]

  17. […] WordPress Tips and Tricks for Template Files […]

  18. […] WordPress Tips and Tricks for Template Files […]

  19. […] WordPress Tips and Tricks for Template Files […]

  20. […] WordPress Tips and Tricks for Template Files […]

  21. […] WordPress Tips and Tricks for Template Files […]

  22. […] WordPress Tips and Tricks for Template Files […]

  23. […] WordPress Tips and Tricks for Template Files […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,001 other followers

%d bloggers like this: