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
21 Comments
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.
🙂
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.
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?
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.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.
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?
@ 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.
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.
For help on posting code in comments and blog posts, see Writing and Publishing Code in Your WordPress Blog Posts and since the question isn’t specific to WordPress but to PHP, I recommend you ask a PHP expert or forum. Not sure what you are trying to do.
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…
Again, see Writing and Publishing Code In Your WordPress Blog Posts.
To include a file in your WordPress template file, use the PHP
include
. From there, I still don’t understand what you are trying to do and I recommend you ask for help on the WordPress Support Forum.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.
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.
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
Very simply, NEVER create a relative link any more. Make it an absolute (or fixed) link. That should resolve your issue. See What Do I Do With My New WordPress.com Blog? for more information on making a link and such.
Hello,
Is there anything similar to this for wordpress 2.8??
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.
Actually, it calls the category template, not the archive. 😀 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.
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!
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
I do not permit translations of my articles. Thank you for respecting my copyright.
23 Trackbacks/Pingbacks
[…] 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. […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] 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 […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]
[…] WordPress Tips and Tricks for Template Files […]