I’ve put together a collection of WordPress tips and tricks, a three part series that looks at the various tips and tricks I discovered while turning over my entire site to the management of WordPress software. In Part One of my WordPress Tips and Tricks Collection, tips and tricks were offered for dealing with the Administration Panels. In the next one, I’ll deal with some of my favorite WordPress Plugins. This one is for tips and tricks for WordPress Template Files and Style Sheets and the amazing WordPress Themes.
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.
Having the style sheets associated with each Theme is great, but if you make a change to a style you want seen on every Theme you switch to, you have to add it to each of the Themes you use on your site. While this is only necessary for those using Theme Switchers, if you do change your Theme, it’s something to remember.
Here are some things you can add or change in your WordPress Theme that might improve things.
Labeling Your Template Files
The switch from WordPress 1.2 to the newest version and WordPress Themes left me going crazy trying to track down which parts belonged to which template files. I love the modular system, once I got my head around how it worked, but 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.
<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, etc.
I don’t use archive template files, so if you do, make sure you change this information in them, too.
Finding Your Images
While working on WordPress to get it going before I decided to move it into my root directory and allow it to totally control my site, I had terrible problems trying to FIND my images. I tend to use relative links rather than absolutes and having my images in a directory in the root and WordPress in another directory in the root, finding those images became really painful. I certainly didn’t want to go through and search and replace every image reference in my database after importing it. The move into the root directory would mean another search and replace.
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. Nice trick.
For more information, read Base Reference in the HTML and XHTML Reference Guide.
Image Tags
In FireFox, if an image doesn’t appear, the alt description appears. To change the size of the font for this text description, which distinguishes it from the rest of your content, use the following in your style sheet, changed to your own preferences:
img {border:0; font-size:60%;}
You can expand upon this and make it bold, green, small caps, or whatever, but this is how you make the change.
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.
Testing Test for Testing Posts
When you are starting out, it helps to be able to create some test posts. You can slam away at the keyboard, hitting the spacebar once in a while, or you can take advantage of the long held tradition of the Lorem Ipsum.
Lipsum’s Lorem Ipsum website automatically helps you generate and copy the text you need to fill up the empty space.
Hiding CSS From Browsers
While it is slowly being “bad mannered” to have your style sheet feature hacks to accomodate the various problems different browsers have with the features you want to use, there are times when it is necessary. While there are plenty of web pages with information on how to add CSS hacks to accommodate browser’s needs, there isn’t much information on HIDING CSS from browsers. Here are a few:
Dealing with XHTML and CSS bugs
Now that I’ve just said it’s bad manners to hack up your CSS to deal with browser issues, switching from HTML to XHTML meant new bugs to deal with. Also adding the fast-growing web browser FireFox to the mix meant taking even more things-that-can-go-wrong into account.
One of the biggest problems I had is with floats within floats. A division with a float inside scrambles your layout in FireFox, though it looks great in MSIE. The inside floats don’t line up and when they reach the virtual “end” of the parent container, they overlap past the end and into the next container. The problem is that the float doesn’t “clear” or stop at the end of the container where it should. It needs to be told when to stop with the “clear” function, but unfortunately different browsers need different instructions to accommodate those instructions.
After playing around with this for days, here is my final fix from
Positioniseverything’s Easy Clearing.
For example, on the front page of our site, each post excerpt features a bar along the left side in green and often an image in the right side of the container with the text wrapping around the image. The image’s position is controlled with a float selector. In Firefox, since a height was not established in the parent container, it ended when the text ended. If the text went below the image, then it wasn’t a problem. But if it ended before the end of the image, the next container would then begin, stair-stepping into the container above it.
I needed to apply a “clearing” to the container so that the container below it would wait until the container above was finished, and then begin it’s positioning.
The clearfix style is as follows:
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End clearfix */
In the index.php template where the excerpt or post content is displayed, I used this:
<div class="excerpt-post clearfix">
<h2 id="post-">......
The main styles of the excerpt area are controlled by excerpt-post but the addition of the clearfix style adds style instructions to the first style. You can learn more about using combination styles in our article on Understanding CSS Selectors and Attributes.
I also used this same technique in our Book Recommendations and Reviews. The ads and review section containers would begin to stair step their way as each container bumped up against the other, unable to determine the previous container’s height. I simply added the clearfix style to their styles.
<div class="clearfix books">
<img scr="blah.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah2.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah3.jpg" title="Amazon books" class="bookads" height="260" width="120">
</div>
The same technique would apply if the layout was like this:
<div class="clearfix books">Text here.
<div class="bookads">Book Ad here</div>
Text here.</div>
A lot of people blame Microsoft Internet Explorer for having the most bugs, but I did find some major bugs in other browsers.
Changing Default or Kubrick Theme
The Default WordPress Theme, aka Kubrick, is an amazing piece of web page design. It pushed the envelope on what a web page could do using WordPress. It’s also a bad bit of coding. I’m not here to debate whether or not the way Kubrick was handled was right or wrong, but I do have some tips for dealing with some of its eccentricities.
Working on the WordPress Forum as a volunteer, I look at a LOT of websites. I can spot a WordPress Theme based on Kubrick in a hot second. The dead give-away? The sidebar.
The sidebar features the use of » in the sidebar bullets. I personally don’t like them. The technique to put them there is also a hack, since you can’t use character entity codes to represent images in lists.
To replace them with graphic bullets or to use the default CSS bullets like circle, disc, or square, comment out the following in your style sheet using /* to start and */ to end the comment around the entire area:
/* Comment out starts -
Special stylized non-IE bullets
Do not work in Internet Explorer,
which merely default to normal bullets.
html>body .entry ul { margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px; }
html>body .entry li { margin: 7px 0 8px 10px; }
.entry ul li:before, #sidebar ul ul li:before { content: "\00BB \0020"; }
.entry ol { padding: 0 0 0 35px; margin: 0; }
.entry ol li { margin: 0; padding: 0; }
Comment out ends */
Now, set up your .entry ul and .entry li and so on with your own styles and bullets.
Relatives Suck
That’s right. In FireFox, position: relative sucks. I had to remove every reference of position:relative from my CSS because Firefox breaks on any container with that reference that has a link. The link turns off and is inactive. It also is influenced by any nearby float that has a position:relative in it that aligns with a non-relative container. The area where the two align, the links in the non-relative container will turn off. Argh.
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.
. I like bragging. He read the first three books entirely in Hebrew. I think we even have the first or second one in Spanish. We also have the first five in digital form as a book. I read almost all my books on my hand held computer now.
We’re cleaning up the trailer today and trying to find where everything got slammed to from the horrible roads throughout Lousiana. Highway 55 down through Jackson towards New Orleans, we were bounced and jarred. You know, you would think that after ten years they would fix those suckers, but they continue to remain patched and pieceworked and a horrible bouncing, jarring ride. Several times we stopped for gas and came into inspect and found stuff spread all over the place that we thought was fairly tied down.
We headed back to the highway, our eyes throbbing, and right there found a huge truck stop. We pulled in, a mosquito among 50 or more giant trucks, their engines running all night, and fell into bed, asleep within seconds.
Early the next morning, we crawled out of bed, smelling like sweat, sleep, and more sweat, and prepared to head out. Brent found that the trailer tires I’d warned him about checking the air pressure, were indeed low, so 30 minutes were spent putting air into the four trailer tires with our horrible little Sears cheapo air compressor. I’d get something better, but we use it so rarely, we just suffer with it’s little engine-that-almost-could effort.
The campground is more pavement than….well, anything. I can probably count the trees in the 300 plus spot campground on both hands and stop before getting to the last finger. The sites are wide apart, which is nice and will hopefully keep any smoking camper next to us far enough away not to make me sick. For a lot of travelers, this is a perfect campground. Wide open space, no trees to rip any roof paraphernalia off, and wide spots to pull through or back into. For us, it’s an embarrassment in its lack of “natural” and nature, but it will be our home for the next few days as the hurricane smashes into our precious little Shady Acres Campground in Mobile, Alabama.
We are now sitting in one of the RV campgrounds that we totally loath, but it serves a purpose for us, several fold, and so we shall stay until the hurricane passes Mobile, Alabama, and then we’ll take two days to return back to our little country-home style campground, surrounded by trees, green grass, birds, raccoons, and mobile homes.
If you have been following our life over the past…well, at least the past 10 years that we’ve lived on the road, you will know that where trouble is, we tend to already be planted in the middle of it. We arrive in Israel in time for the millenium and the start of the Intifada. We leave Israel as Arafat dies in France. And no matter where we go, extreme weather follows us.