We uncover the secrets of a WordPress theme and show you how to add elements to create a personal design
WordPress has become the web’s favourite publishing platform thanks to its simplicity, usability, aesthetics and undoubtedly, its gratis status. Its rise in popularity has seen the proliferation of hundreds of sites offering thousands of themes to give users the look and feel they want in an instant. There are undoubtedly some very good themes on the market, but while a predefined theme offers simplicity and instant impact, it doesn’t offer complete personalisation. There are plenty of free themes that are perfect as a base for a blog, but modification and personalisation will take it to the next level.
WordPress themes are essentially a collection of PHP tags and a style sheet that can be modified to create a personal theme. We have taken the Coffee Desk theme found at http://wordpress.org/extend/themes/ and used this as the base of the new personalised theme. This is a two-column theme with a right sidebar, matching the layout we have designed for.
01 Download and set up
Head to http://wordpress.org/download/ and click the Download WordPress link and save to the desktop. Now unzip all the files in the WordPress folder. The next step is to create a database for WordPress on your web server. This may differ from account to account, but the principle is the same. We are using cPanel and phpMyAdmin, as supplied with the web account, to create the necessary database. In cPanel, go to MySQL Databases and create a new database. Give it a relevant name, ie ‘blog’, and at the same time create a new username and password. Now add the user to the database and assign it All Privileges.
Now head back to the unzipped WordPress folder and rename the ‘wp-config-sample.php’ file to ‘wp-config.php’. Open wp-config.php to view the following:
define(‘DB_NAME’, ‘putyourdbnamehere’); // The name of the database
define(‘DB_USER’, ‘usernamehere’); // Your MySQL username
define(‘DB_PASSWORD’, ‘yourpasswordhere’); // …and password
Enter the relevant details and save. Now upload the entire contents of the downloaded WordPress folder into a directory on the server, eg, www.mywebsite.co.uk/blog.
02 Install WordPress
With all the building blocks in place for WordPress, the next step is to start the “famous five-minute installation”. Open the browser of choice and run the WordPress installation script by accessing it via the URL, eg, www.mywebsite.co.uk/blog/ wp-admin/install.php. Remember to replace the web address and subdirectory with the ones you created. This will present the Welcome screen. Enter a Blog Title and Your E-mail and press Install WordPress to begin the process. This is all there is to it. Note down the username and password and press Log In to start. When using WordPress from now on, log in via www.mywebsite.co.uk/blog/wp-login.php.
03 Install a theme
After installing WordPress, the next step is to find a theme that best matches the style you wish to use. We have included a number of free templates on the disc, but for the purpose of this tutorial we have chosen to use the Coffee Desk theme found via www.wordpress.org. Download the theme before uploading the folder to the wp-content/themes folder found in the location used when installing WordPress, ie www.mywebsite.co.uk/blog/wp-content/themes. If you wish to keep the original theme in its original state within WordPress, simply copy and paste the same theme with a new name into the folder location mentioned above. Now to get started, head to Design>Themes, select the desired theme and click the Activate link to apply the chosen theme. Now when you view via the installation location, WordPress will have the new theme. Before continuing, any images that are to be applied to the new theme will need to be uploaded to the appropriate folder. Using an FTP client, upload the desired images to the images folder located at www.mywebsite.co.uk/blog/wp-content/themes/nameoftheme/images. Replace ‘nameoftheme’ with the name of the chosen theme.
04 Time to modify
Click Theme Editor under Design and observe the various components of the Theme Editor. The left column contains all the Theme files, ie index.php, header.php, sidebar.php, a few of which will be called into action. Note that different themes will have different components, layouts and different tags and classes. The Coffee Desk is just one example of thousands of themes, but the principle of modifying follows very much the same steps. To get started, the style sheet (style.css) is to be tackled first, so click to view it. The first tag on show is the body, and the first modification we are going to make is to change the background image and default font.
The original tag contained the following:
background-image: url(images/back.PNG);
font-family: Geneva, Arial, Helvetica, sans-serif;
The new version looks like this:
background-image: url(images/siteback.jpg);
font-family: Georgia, Arial, Helvetica, sans-serif;
Now click Update File and switch to the Live tab (see Technique boxout).
05 New header
The header image within a WordPress template is often a major element of the page and will undoubtedly make a big difference to how a page looks. Identify the tag or class that contains the header using the tips suggested in the Technique boxout, and change the background image to the desired image. In our example, the width of the image is the same but the height is not. This has been adjusted accordingly.
This is the original code:
.content_header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
float: left;
width: 990px;
height: 307px;
}
and the new version:
.content_header {
background-image: url(images/siteheader.jpg);
background-repeat: no-repeat;
float: left;
width: 990px;
height: 366px;
}
06 Header text
The header of the theme currently contains the blog title, as defined in the installation and setup, the tag line “Just another WordPress Blog” and links to Home and About. To define the text, first switch to the header.php file. Under
to the end of the code and press Update File. Now the blog title, tag line and original navigation bar will have disappeared, with Home and About positioned at the top of the header. To reposition the text, simply locate the .navigator class in style.css and adjust padding-left: and add padding-top: to position, for example:
padding-left: 80px;
padding-top: 220px;
07 Remove backgrounds
The main content of the theme boasts a background image, which needs to be replaced with a single-colour white background. Locate the #c_content tag and remove the following code:
background-image: url(images/desk.jpg);
background-repeat: repeat-y;
and replace with:
background-color: #FFFFFF;
Now locate .post_top and replace the three lines of background with the following code:
background-color: #FFFFFF;
Inserting this code will remove the background image at the top of individual posts with a white background. Next, locate .post_index and remove:
background-image: url(images/postbg.jpg);
background-repeat: repeat-y;
Now locate .post_bottom and remove any background references to remove the bottom background image.
Each post will now be image-free, and blend perfectly with the white background. Finally, locate .clear_content and adjust Height: 30px to Height: 1px to bring together all of the posts.
08 Post header action
The next step is to add a background image to encompass the post title and details. Head to .post_info and add the following code to the tag:
background-image: url(images/postheader.jpg);
background-repeat: no-repeat;
Also modify the left-padding to 30px and reduce the width by 25 pixels to make sure it all still fits across the page and the text is in a better position. We are going to remove the third line in the post title, which collapses the post header to the default two-line size. To compensate, add the following line: height: 70px; to the class. To remove the Published in text, go to index.php and remove the following line:
Published in .
In order to position the text, go back to .post_info and add padding-top: 7px;. Then remove the same number of pixels from the height. The text in the post title is now invisible (black on black). To change the font and size of the post title, head to #post_entry h2 and change to the following:
font-family: “Georgia”, Tahoma, “Arial Narrow”;
font-size: 20px;
To change the colour of the text, go to .post_info h2 a:link, .post_info h2 a:visited and change the colour. To change the hover colour, go to .post_info h2 a:hover, .post_info h2 a:active and change the colour.
09 Date background
With the post header in place, next up is to replace the date background image and position the day and month. Head to .calendar and change the background-image to the new option. For ease of use, we have made our image the same size as the original size. To swap the date and month around so that the month, ie AUG is at the top, go to index.php and locate
To modify position, font size and colour, first go back to style.css. Locate .date to change the font-size and colour and adjust line-height to position horizontally. Add padding-left: 2px; to position month text. It will be a case of modifying and testing until the exact combination puts the text in the right place.
10 Sidebars
The following classes and tags (.bottom_sidebar, .top_sidebar, .div_wrap_sidebar and .widget_sidebar h2) all contain the background images that make up the sidebars. First locate .top_sidebar and .bottom_sidebar and delete any background-image references, ie background-image: url(images/side_btm.jpg); background-repeat: no-repeat; background-position: top;. Now locate .div_wrap_sidebar and again remove any background image references. Head to .widget_sidebar h2 and add the new background in background-image: url(images/image.jpg); and change font-family: “Trebuchet MS”, Tahoma, “Arial Narrow”; to font-family: “Georgia”, Tahoma, “Arial Narrow”;.
Now adjust the following (as shown) to match the current theme and style:
height: 44px;
line-height: 22px;
font-size: 1.4em;
color: #FFFFCC;
This effectively styles all the sidebar widgets except the calendar. Locate #wp-calendar caption and change the font-family to Georgia, color to FFFFCC, background-image to your choice and adjust the height and line-height as before (see below). This will match up the calendar with all the other widgets in the sidebar.
#wp-calendar caption {
font-family: “Georgia”, Tahoma, “Arial Narrow”;
font-weight: normal;
text-align: center;
width: 230px;
color: #FFFFCC;
font-size: 1.4em;
background-image: url(images/rightcolumnback.gif);
background-repeat: no-repeat;
background-position: center;
height: 44px;
line-height: 35px;
}
11 Footer fun
The final major step in modifying a theme lies in the footer. The Coffee Desk theme contains a number of background images that are going to be removed and the text styled to match.
The following class and tags (recent_bottom, recent_top, footer_panel, footer_bg and #c_footer) all contain background images relating to the footer. Replace all instances of background images with background-color: #FFFFFF;. This will replace all the background images with a white background. To change the title text, go to #c_footer h2 and modify the font as follows:
font-family: “Georgia”, Tahoma, “Arial Narrow”;
Finally, to put the footer image into the theme, modify the #footer_bg tag as follows:
#footer_bg {
float: left;
width: 990px;
padding-right: 25px;
padding-left: 25px;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
background-position: bottom;
background-color: #FFFFFF;
padding-top: 10px;
padding-bottom: 30px;
}
Note that the image is positioned at the bottom of the tag and the tag is also given a background colour. Without the background colour, the tag is effectively transparent.
12 Finishing touches
Now, the new personalised theme has been finalised and is ready to use. However, it is always worth adding the finishing touches now that the basis of the theme is complete. An example with the theme we have used is that removing the original background images has left a lot of white space, especially between the posts. To help resolve this issue, we are going to remove the class post_top from the index.php file. This is effectively a space that is not needed any more. Open index.php and locate
. This resides about six lines down. Delete the code, press Update File and reload the site to note the better spacing. Other noticeable elements from the original theme include the old-style Search button and the Blog Feed image. New versions of the images have been created to match the theme. The simple way to replace the old images is to give the new images the same name and upload to the Themes Images folder. This will instantly replace the old with the new.13 Advanced options
Most of the work throughout this tutorial has taken place with the style sheet, style.css. This gives the theme new images, positioning and padding, margins, text styles, colour and size. To go beyond the aesthetics, users will need to start delving into the code base. Effectively, this is already in place and been tried and tested to make sure all is operating as intended. However, it does no harm to find out what some of the PHP tags mean within each of theme elements, ie header.php, footer.php, index.php etc. Take a look inside the header.php and the PHP tag ?php bloginfo(), makes a few appearances. This displays information about your blog, mainly using the information users add in their profile. It can be used anywhere within a page template.
