Wordpress uses style sheets to control the look and feel of just about every aspect of your Wordpress site.    If you want to make changes to fonts, layouts, colours, etc, you’ll have to roll up your sleeves and open up the style sheet for your theme. 

When you do open it, you are likely to be a little over-whelmed by what you see.  There is line after line of code, and each line is defining some aspect of the look at feel of your site.  I highly recommend using a dedicated CSS editor.  I use Topstyle Pro, which you can see in the screenshot below, but Topstyle do have a free, Lite version as well.

Cascading Style sheets are a great idea, and something all sites should use.  If you have ever built a standard HTML site, you might be thinking that your site worked perfectly well without a style sheet, and it probably did.  However, using a style sheet has a number of advantages.  The first advantage is that all of the “formatting” of the content is held in a separate file meaning your content pages are shorter, and load more quickly. 

The style sheet will need to be loaded in memory of your machine, but once there, pages all of the pages on your site that use that style sheet will be able to access the formatting commands, and respond appropriately. 

In today’s ever increasing internet speeds, this might be less of an issue than it was several years ago, but there are other very good reasons to use style sheets.  Suppose you want to change the font your site uses, or maybe the colour of the text?  With style sheets, you make the change in one file, and that change is immediately applied to your entire site.  There is no need to edit each page individually.

OK, so let’s look at an example.  One of the things you might like to do is modify the size of the header tags.  This is fairly straight forward.  When you open up your style.css file, look for the sections that refer to h1, h2, h3, h4, h5 & h6.

Here is the section in my style sheet:

h1, h2, h3, h4, h5, h6 {
    font-family: Arial,sans-serif;
    margin: 0px;
    padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: black;
}

h2{
 font-size: 114%;
 color: black;
}

h3{
 font-size: 100%;
 color: black;
}

h4{
 font-size: 100%;
 font-weight: normal;
 color: black;
}

h5{
 font-size: 100%;
 color: black;
}

You will notice that the first block of code refers to all 6 header tags, whereas the next 6 sections of the style sheet only refer to one of the six.

When a section of your style sheet refers to several items like this one:

h1, h2, h3, h4, h5, h6 {
    font-family: Arial,sans-serif;
    margin: 0px;
    padding: 0px;
}

The style will be applied to ALL of the items.  The above code will apply the formatting to h1, h2, h3, h4, h5 & h6 header tags.  The code that follows this piece shows that each of the 6 headers have their own custom formatting as well.  Here is the one for the H1 tag:

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: black;
}

So, when an H1 tag is rendered in a web browser, the H1 tag will have the following rules applied to it first:

    font-family: Arial,sans-serif;

    margin: 0px;

    padding: 0px;

(these are taken from the common formatting of all 6 headers).

The H1 will then be modified with these formatting rules:

font-family: Verdana,Arial,sans-serif;

font-size: 120%;

color: black;

The font will be changed from the one used by the “common” formatting rules, and a size and colour rule will further modify the H1.  The full formatting for the H1 tag on my site will therefore be:

    font-family: Verdana,Arial,sans-serif;

    margin: 0px;

    padding: 0px;

    font-size: 120%;

    color: black;

(ie, a combination of all rules applied to the H1).

OK, so to change the size of the H1 header, we need to modify the font-size variable.  At the moment it is set to 120%, which basically means it is 120% larger than normal text.  There are various options here, including using a percentage value like this example, or using absolute size in pixels and a whole range of other units that are beyond the scope of this tutorial.

I could make my H1 header bigger by changing the font-size line to:

    font-size: 125%;

    font-size: 130%;

    font-size: 135%;

    font-size: 140%;

    font-size: 150%;

E.t.c…

I could make the font size of the H1 header smaller by reducing the percentage:

    font-size: 115%;

    font-size: 110%;

    font-size: 105%;

    font-size: 100%;

The last line would make the font size the same size as the rest of the content on the page.

I’ll try to write some more CSS tutorials on this site, so if there is anything you would like me to cover, please add a comment at the end of this post.

If you would like to learn more about CSS in a simple, step-by-step manner, you can order my CSS Tutorial.  You can download the first two chapters of this CSS tutorial.

Wordpress theme templates explained

When you look at the files that come with Wordpress templates, it can be very confusing.  Different templates may or may not have a certain file.  Let’s take a look at an example.  Here are the template files from a theme called “librio” and one of the revolution templates.

I have highlighted the files that are present in the Revolution theme but not in the Librio theme.  If we work out way down the list, the following files are present in the Revolution theme, but not in the Librio theme:

• breadcrumb.php
• home.php
• page_archive.php
• page_blog.php
• sidebar_left.php
• sidebar_page.php
• sidebar_post.php
• sidebar_right.php
• tag.php

The first one – breadcrumb.php is a file created to insert the breadcrumb navigation into the pages of the theme and is called from other wordpress templates.  Similarly, the 4 sidebar templates in the Revolution theme are simply there to offer greater customisation of the sidebars.  Since the sidebars are again called from other templates, this is again not a template hierarchy issue.

The other files highlighted above (home.php, page_archive.php, page_blog.php and tag.php) are templates of one form or another.  So, why does the Revolution theme have these extra templates?

Well, there is a hierarchy involved in the selection of templates to display certain pages.  As an example, if the tag.php template is present, it will be used in the construction of the tag pages.  If it is not present, the in archive.php file will be used instead.

Here is the hierarchy:

If we take the first line of this diagram, the homepage will be created from the home.php file if it exists, otherwise it will create the homepage from the index.php file.

The second line – a post will be created using the single.php file if it exists, and if not, it too will use the index.php file.

If you look at the third line – pages – it explains why the Revolution theme was the following two files: 

These files are simply the templates to be used for page archives, and blog pages respectively.

The tag.php template is there to be used for the tag pages in the Revolution theme.  Its not present in the Librio theme, so in that case, tag pages will be built in the Librio theme using the archive.php file which does exist.

So, the reason some themes appear to be missing certain files is simply because there are other template files that can pick up the slack and be used instead.

This is great to know because it means you can easily modify your existing templates by adding new template files.  e.g. suppose you want to add some code to the end of your posts (like you would if you were adding “similar posts” code). If your template did not have the file single.php, it means that you could add this code to the index.php file.  However, this code will then be used in ALL pages that are built with the index.php file, and that can include quite a few.  So, a better option would be to make a copy of your index.php file, and call it single.php.  You could then edit the single.php file so that the “similar posts” code is only used in the posts.  Cool eh?