CSS: modify a Wordpress theme

It's rare to find a Wordpress theme that doesn't need to be modified. Sometimes the required changes are so radical that it's almost impossible to keep the original theme intact. In this post I'll describe some approaches you can follow to accomplish this task.

The online approach

With this approach you modify your theme directly on your remote server. Before doing any changes, however, you should put your web site into maintenance mode so that your visitors know that you're performing some tweaking actions and they won't be bothered by your changes.

Most Wordpress themes don't show all the CSS files in your theme editor. Usually only the main CSS file is showed. Generally, this file contains several @import rules that fetch the other relevant style sheets. If so, you should locate such files (under /wp-content/themes/theme-name/) and edit them.

When you edit a Wordpress CSS file, never delete a CSS rule or statement! Instead, comment it and then add your custom rule or statement:

#header {
  /* height: 100px; */
  height: 150px;
}

By doing so, you can restore the original rules if something goes wrong.

If you use background images, bear in mind that the path to such images is relative to the CSS file you're editing. So if you're editing the screen.css file in the /wp-content/themes/theme-name/ directory, your background images are usually located under the /images directory which, in turn, is located directly under your theme directory:

/wp-content
  /themes
    /theme-name
      screen.css
      /images
        bg.png

So you have:

#header {
  background: url(images/bg.png) no-repeat;
}

This implies that your custom background images should be put under the same /images directory. If you want to choose another directory, I recommend you to use absolute URLs, such as http://yoursite.com/images/css/bg.png.

The offline approach

This is the safest approach to theme modification and requires the use of a local web server. Using this approach, you don't have to put your site into maintenance mode. All the recommendations explained earlier apply also to this case. Further, with this approach you can also plan some major changes to the underlying markup used by your theme. If you want to do so, I recommend you to surf your site and download as raw HTML all the main sections of your site (post pages, simple pages, post with comments and so on). Once done that, you can test your changes before using the theme editor. When you're sure that all styles work fine and that your markup is valid, go back to your theme editor and edit the relevant parts of your theme by changing also the markup.

Since most of the markup used by Wordpress is generated by Wordpress functions, you should document yourself on the function you want to use. I recommend you the official Wordpress documentation.

Leave a Reply

Note: Only a member of this blog may post a comment.