Modifying WordPress themes

This article describes how to make simple changes to WordPress themes using a child theme.

So you got WordPress installed, found a theme that gave you the right sort of look-and-feel; but now you think that, well, there could be a few improvements here and there, and you can’t see any way of making them by altering the theme’s settings in your site’s Dashboard.  Is there a bit too much white space around for your taste?  Would you like to use a different font in some places?  No problem, but you are going to have to make at least a bit of an effort.

Firstly, if you’re going to make changes to a theme over and above those catered for by WordPress and by the theme you chose, you really must know the basics of CSS.  If you’re going to make fairly radical changes, you’ll also have to know your way around HTML and PHP.

Dealing with these three technologies in reverse order:

  • PHP is the programming language in which WordPress is written.  You won’t need to know much about it, but you will perhaps need to know enough to allow you to use some standard WordPress function calls.  So doing something like this should not cause you go all weak at the knees:
<?php bloginfo('stylesheet_directory'); ?>
  • HTML is the markup language that browsers understand.  It describes the structure and content of the page.  It is usually found mixed in with the PHP code in your theme’s template files—which are the files used to display your posts and pages.
  • CSS is the language that describes the look-and-feel of the page: its ‘style’.  You can find CSS either in a file on its own, or in a style block in the HTML page or even within a particular HTML tag on a page.  Usually, you will be concerned with CSS that is contained in a file on its own.

For simple changes, a basic appreciation of CSS will be enough.  And that’s all we are going to deal with here.

CSS

Styles are defined in CSS using a series of style rules.  Each rule consists of the following:

  • Selector or selector list
  • Open curly brackets (braces)
  • Any number of property/value pairs each pair being followed by a semicolon
  • Close curly brackets

Before you start messing with your theme’s CSS, you should be comfortable with those concepts.  There are plenty of online CSS tutorials.  For example, you could take a look at W3Schools.

Firebug

If you’re going to make changes to your CSS, you need to be able to identify the rule or rules that need to be changed.  The Firefox browser uses a plugin called Firebug.  Install it by going to Tools –> Addons in Firefox and using the search facility to find Firebug.

Whilst you’re at it, you might also like to find and install the Web Developer Toolbar, which provides facilities for examining generated HTML and calling the W3C validator to validate your code.

Google Chrome comes with something similar to Firebug as standard.  I haven’t used it much, so I can’t say how good it is.  In this article, I’ll be talking about Firebug only.

Internet Explorer provides nothing even vaguely good enough, as far as I know.

Child themes

The only recommended way to make changes to WordPress themes is via Child Themes.  It’s trivially easy to do, but is best to start off from a vanilla version of your theme—before you’ve started making any changes.  When I start a new site, the first thing I do is to create a child theme and activate it.  All you need to do is this:

  • Create a blank file called style.css on your local computer
  • Add the mandatory comments to style.css, in the mandatory comment block at the top of the file.  All you need is the theme name and the template directory
  • Add an @import statement to the style.css file, immediately after the comment block, referencing your parent theme’s style sheet
  • Save your file
  • Open your site in your favourite FTP client, using the credentials your Web Host or server administrator have given you
  • Navigate to the wp-content directory
  • Inside the wp-content directory create a sub-directory called anything you want.  Choose a sensible name, related to your theme’s name.  Don’t include any spaces in the directory name, and keep everything lower case, so that you don’t risk creating any ambiguities
  • Upload the style.css file you created earlier from your local computer to your server, into the directory you just created for your child theme
  • Open your WordPress Dashboard and go to Appearance –> Themes.  You should see your child theme listed as an installed theme.  If  not, check that you’ve followed all the instructions above, to the letter.
  • Activate your child theme
  • Check out your site settings in your Dashboard.  You may have made some changes to your themes settings from the Dashboard, such as header images and so on.  You’ll have to do those again, which is one of the reasons why I advise creating a child theme as the very first thing you do when you start a new site and activate its theme
  • Check out your site.  It should look exactly like it did before.  So that’s it, you have a child theme.

Here is how a minimal twentyeleven child theme’s style.css file should look:

/*
Theme Name:     Twenty Eleven Child
Template:       twentyeleven
*/
@import url('../twentyeleven/style.css');

Remember the theme name is arbitrary, but should be something sensible.  I usually use something related to my client’s name.  And remember that the template is not the parent theme’s name, necessarily: it’s the name of the directory in which the parent theme is to be found.

Now you have a child theme we can get to the nitty-gritty of how to make changes.

The nitty-gritty

As an example, let’s say you want to make two modifications to the twentyeleven theme, in a child theme called ‘Peredur’:

  • Change the colour of the main navigation menu’s background
  • Add your organisation’s logo above the header image, to the left of the site title

Change the menu background colour

To change the navigation menu’s background colour, you would first of all open your site up in Firefox.  When you’ve done that, right click on the menu bar away from the menu items and select, “Inspect Element with Firebug” from the context menu.  A window like the following will appear at the bottom of the browser window:

In the HTML, we can see that we are interested in a div with the id of ‘access’.  On the right, Firebug shows us the CSS rules currently in force and the file in which they are contained.

To try out a change, you can right click on the appropriate rule in the right hand panel and select ‘New Property’ from the context menu.  In this case we could add a property to the #access selector saying, for instance:

background-color: blue;

If that does the trick, you can make the change permanent, and valid for all pages, by adding a new rule to the end of your child theme’s style sheet (the style.css file in your child theme’s directory):

#access {
  background-color: blue;
}

 To add the new rule, open your Dashboard and go to Appearance –> Editor.  On this page, all your theme’s template, function and style sheet files are listed down the right hand side.  Simply select the link to style.css and you will see the content in the editor (in fact it will probably be there by default).  Simply add your new rule to the end of the file and save your changes.

Now you can go back to your site and check that the changes appear: but remember to refresh the page or you may be fooled into thinking that the changes aren’t appearing.

Add a logo

To do this, you need to make changes to the header template that is to be found in the PHP file called header.php.  Since you don’t currently have such a template file, you need to create one in your child theme’s directory.  However, you only want to add something to the existing header, so the sensible thing to do is to use your FTP client to copy your parent theme’s header.php file into your child theme’s directorty.  You can then edit that file without any need to recreate it.  Reinventing the wheel is not a good idea.

Before you edit your header.php file, create a sub-directory in your child theme’s directory for your image.  Calling it ‘images’ is the usual thing.  Use your FTP client to upload your logo into this directory.

Edit the file in the same way as you edited the style.css file.  Go to Dashboard –> Appearance –> Editor and you will now see the header.php file listed on the right hand side.  Just click on its link for the code from that file to appear.

Once you have the editor open, you will see—if you are using twentyeleven—that you have a choice of places for your image.  You could put it directly into the header element, the masthead div or the branding div.  You could even put it into the site-title div itself.  Any of these will do.  The only difference will be in the style rules you need to define in order to position the logo correctly in relation to other elements like the site title and the site description.

Whatever you decide, the code you will need for the image tag will be something like this:

<img src="<?php echo bloginfo('stylesheet_directory'); ?>
/images/mylogo.png" alt="my logo" />

All image source paths in WordPress’ HTML are absolute.  Using the call to bloginfo() makes sure you get the correct path.  And obviously you need to substitute your own values for the file name and the alternative text.

Once you’ve added the logo to your header.php file’s HTML, you’ll need to use CSS to get it in the right place.  I’ve told you how in theory.  Now it’s time to put the theory into practice.  Good luck!

There’s always a sting in the tail, isn’t there…

 

This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Modifying WordPress themes

  1. Ally says:

    This was so helpful – thanks!

Comments are closed.