Installing the correct theme

Once you have installed WordPress you’ll be given the default theme along with one blog post and one comment. You can leave these as they are for now as some content makes styling your theme easier. Rather than create our own WordPress template from scratch – which requires knowledge of PHP – we will be using the Sandbox theme to create our blog theme. The Sandbox theme is designed as a tool for WordPress developers and theme creators. It allows you and me to style WordPress just using CSS, so we can create a really nice theme without having to worry about learning PHP – although as we’ll see we can still dabble with a little PHP to get things just as we like them.

To install Sandbox select ‘Add New Themes’ underneath the ‘Appearance’ tab in your WordPress Dashboard. You will then need to search for ‘sandbox’ and the correct Sandbox theme should then be the first option:

Click to Enlarge

Click ‘install’, then ‘install now’ and once this is complete, click ‘Activate’. If you open your blog in a new window you should see that the template has changed like so:

Click to Enlarge

As you can see, the current theme uses a fluid width – meaning it stretches to fit the entire width of your screen – and has a menu below the blog title, and one ‘widget’ sidebar to the left – this ‘widget’ sidebar is where you can drag and drop various standard WordPress widgets and any of the thousands of add-on widgets you can install.

Resetting the basic styling and layout

In order to start completely from scratch we will need to venture into the theme’s Cascading Style Sheet [CSS] for the first time and delete the example styling that is making the theme behave as it is now.

To find the CSS file you need to look under the ‘Appearance’ tab and select ‘Editor’. You should then see the following screen:

Click to Enlarge

This is the stylesheet that controls the way that your blog looks – the fonts, the colours, the layout, everything. The PHP puts in the relevant blog posts, widgets, comments and pages etc, but the CSS determines where these things go and how they look. The first thing you need to delete is the import link which is pointing to another stylesheet elsewhere – this is what is making the one-column, fluid template:

/* Two-column with sidebar on left from the /examples/ folder */
@import url('examples/2c-l.css');

Deleting this will remove all layout from your blog. Once you have deleted this, delete everything below it. You should now only be left with the following code:

/*
THEME NAME: Sandbox
THEME URI: http://www.plaintxt.org/themes/sandbox/
DESCRIPTION: Rich with powerful and dynamic semantic class selectors, Sandbox is a canvas for CSS artists
VERSION: 1.6.1
AUTHOR: Andy Skelton & Scott Allan Wallick
AUTHOR URI:
TAGS: white, microformats, fixed-width, flexible-width, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar
*/

Anything contained within /* here */ is generally referred to as a ‘comment’, it is not read by web browsers it is just there for the benefit of whoever wants to work on the stylesheet. For example, the comment left in this stylesheet is telling you and anyone else reading it who made it, what version it is and where you can find out more. You’ll also see that these details are introduced by block capital descriptions, it is these descriptions that tell WordPress about the theme. So when you want to activate the theme, the information it gives you about the theme comes from this comment. When we finish our theme we’ll want to ammend these details because the theme will have a different name and author. However, we will still want to give details that our theme is based on the hard-work of Scott Allan Wallick and that it is has been created using Sandbox. This is something we’ll return to towards the end of the project.

Once you have deleted the relevant code as above, click ‘Update File’ to save your changes. If you refresh your blog homepage you’ll now see all the same information as before, but instead of being in columns etc, it is now in one list. Your blog has been stripped back to its bare bones:

Click to Enlarge

Removing default widgets

What you will notice is that if you click on ‘Widgets’ underneath the ‘Appearance’ tab you’ll see that currently you have no widgets installed, but you have some displayed on your homepage. This is because standard widgets have been placed into the PHP code of this template. In order to remove them, go back into the editor and select ‘sidebar.php’ from the right-hand side list of php files. Delete the following code:

Click to Enlarge

If you refresh your blog homepage you should see that some of the widgets have disappeared. This is because you have removed the widgets from your ‘Primary’ (i.e. main) sidebar. In order to get rid of the rest, you will need to remove the widgets from the ‘secondary’ sidebar as well:

Click to Enlarge

If you refresh your blog homepage again you should now be left with just your blog title and tagline (the header), your one blogpost (the content) and the link back to WordPress and Sandbox (the footer):

Click to Enlarge

Congratulations, you now have a completely blank canvas that you can start to turn into the design you have on paper. This is the end of Part 2.

Part 2 Checklist

Before moving onto Part 3 you should make sure you have done the following:

• Installed Sandbox
• Removed layout instructions from style.css
• Removed all example styling from style.css
• Removed default widgets from primary sidebar
• Removed default widgets from secondary sidebar
• Have your blog design (roughly) on paper