WordPress Themes FAQ

  1. How do I edit a theme?
  2. My changes don’t seem to have any effect – what do I do?
  3. My sidebar or footer looks funny, how can I fix it?

This FAQ is taken from the original theme guides part 1, part 2, part 3, and part 4.

How do I edit a theme?

To edit a theme you need a text editor. Microsoft Word or WordPad is not a text editor, and if you use these programs you will experience a lot of problems.

Some good text editors are:

If you have no alternative then you can use notepad or textedit.

My changes don’t seem to have any effect – what do I do?

Welcome to the world of website debugging!

First you should check that WordPress is using the correct theme. Go to the Presentation menu in the administration pages and verify that your are editing the currently selected theme.

Next check that your browser is not caching a previous style. Caching is a mechanism whereby your browser will keep an old copy of a page to reduce the time it takes to load the page.

Next you should check that your theme is valid. A spelling mistake or incorrect character can confuse the browser and it may not be loading your styles. Specifically you need to check the header.php file where it includes your CSS stylesheets. If your page has any HTML errors then these should be fixed before continuing further.

If your changes are still not having any effect then you will need to verify that the file you are editing is actually being loaded. This can easily be achieved by setting the background colour of an element to red.

#sidebar { background-color: red; }

On reloading the page your sidebar should immediately turn red. If it doesn’t then it is likely your are editing the wrong file, or your file is not being included in the web page.

Finally, try using a tool such as Firebug on FireFox, or even ‘view source’, to examine the contents of the page and see if any of your changes are appearing.

My sidebar or footer looks funny, how can I fix it?

If you floated your sidebar then it is likely that your footer is overlapping it. This is caused because a floated element is removed from the normal page flow and actually floats over elements that appear underneath it. As you want your footer to appear at the bottom of everything, including the sidebar, then you need to tell the browser to bring the floated element back into the normal flow. You do this by ‘clearing’:

#footer
{
clear: both
}

This tells the browser that the footer should clear any floating elements and stop them floating.

Leave a Reply

Your email address will not be published. Required fields are marked *