We’re Back!

OK folks, here’s part 2 of the 3-part series on creating your own Wordpress theme. To view the first part - Layout, click here.

This tutorial isn’t as long, I’m basically going to create a simple design in Photoshop that I can incorporate into the dimensions I’ve already specified for my theme. As I stated in part 1, I’d normally design my site first then build the HTML and CSS around the design, but for the purpose of these tutorials I created the code first.

Photoshop - The Design

Of course this design is purely for example purposes, it’s not copyrighted and as it’s designed to be very simple, I’m sure you’ll wish to build your own designs. Therefore this is NOT A PHOTOSHOP TUTORIAL - I’m assuming that you can already create your own designs and are capable with Photoshop/Fireworks or whatever image editing software you choose to use.

The dimensions that I’ll be working to are as follows in this diagram

So I’ve created a simple, tidy website design in Photoshop that fit’s these dimensions, but also provides the option to vary the height of the content and sidebar areas. CSS will be used to create a repeating background image here so I’ve ensured that the design behind the middle of the layout will be vertically stretchable.

Click on the image to view full-size:

The following picture shows how the design will be taken apart (sliced) to fit into the corresponding divs and areas of the layout created in the previous tutorial. I’ve highlighted the different divs - header, logo, content, sidebar and footer which all are of course contained within ‘wrapper’.

Click to view full-size:

My task now is to start breaking down the design and implementing it into the code already have. The majority of this can be done very easily through the wonder that is CSS.

If you wish to, you can DOWNLOAD THE SOURCE .PSD here so you can slice the images yourself.

How to Create Your Images

People break their images up in several different ways. One option, within Photoshop, is the ’slice’ tool. However I’ve never found this accurate enough. My method of choice is to create a new canvas for each image, then drag the applicable layers from my master design into the new canvas and morph them to fit, ensuring that they’re the perfect height, width and that everything will slot in perfectly when the images are implemented into the grand scheme of things.

It’s more a case of maths really.

CSS Time

IMPORTANT POINT - For those of you who’ve followed the first tutorial - please now remove the ‘border’ CSS properties and relatively adjust the heights/widths of divs back to their solid length. The borders were purely for the sake of the previous tutorial and will be replaced by design aesthetics below.

body:

I’m going to work from the back first, then from the top down. So my first priority is the actual body background. This will appear behind the wrapper and is a solid colour apart from the orange gradient at the top. This is simple to achieve. I first need to create a tile image of the gradient. As this will be repeating along the x-axis, it doesn’t matter how wide the image is, so obviously smaller is better to save bandwidth.

I’ve created a 10px wide image that contains the orange gradient to transparent from the top. The reason I’ve chosen for the image to gradient towards transparency as opposed to the actual background colour is because different browsers render colours differently to Photoshop, so there is a high chance of seeing a colour difference between the solid background and the background tile that will layer along the top.

I’ve saved this image as ‘bodybg.png’ and upload it to an ‘images’ folder within your theme directory, eg:

/wp-content/themes/mytheme/images/

This makes it nice and easy for your CSS file to pick up. The CSS to create this background is simple:

body {
background: #fffed4 url(images/bodybg.png) repeat-x;
}

This specifies that the solid background colour is #fffed4, but that there is also a background image that runs along the x-axis along the top. Just add it in to the code you already have!

#wrapper:

Wrapper is quite straightforward as well. As the wrapper is essentially just one big box, the background is just another tile that will naturally extend as the content increases. So for this I need a background image that will tile on the y-axis. The wrapper background image is 800px wide and just 10px high and consists of the white background and 2px grey border on the left and right side. There is no gradient or top and bottom borders, otherwise the image wouldn’t tile correctly. The ‘header’ and ‘footer’ background images will be used to tidy up the top and bottom.

The CSS for the wrapper background, which I have aptly named ‘wrapperbg.png’ is as follows:

#wrapper {
background: url(images/wrapperbg.png) repeat-y;
}

As you will notice from my design, the wrapper box is also spaced slightly from the top of the design. To achieve that, I will simply create a margin that will push the wrapper down from the top of the browser window. I also want to replicate the effect at the bottom, regardless of how high the website gets. To do this I just enter the following code into wrapper:

#wrapper {
margin: 20px 0;
}

This will create a 20px margin at the top and bottom but not on the left or right.

Moving swiftly on…

#header:

The header doesn’t have a tile, just a solid image. From my design, this consists of a subtle gradient, the top border and some faded stars on the right. According to my pre-set code, the dimensions of this header image are 800px x 120px. This fits into the header background as so:

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

Don’t forget, I don’t want this background to repeat in anyway so I’ve specified ‘no-repeat’ to keep it firmly in place.

#logo:

I’m not actually going to use CSS for the logo, because I want it to be a link as well as an image. Therefore I must actually insert the image manually into the HTML. The only CSS I must put in place first is to stop a big fat border appearing around the image when it becomes a link. Here it is:

a img {
border: none;
}

That will stop any horrible border. Now I need to go into ‘header.php‘ to insert my image. I’ve called my logo, which is 200px x 120px - logo.png, and have uploaded it to another images directory I’ve created from the root:

www.sitename.com/images/

This just makes it a lot easier to link to from the HTML. In my header.php file, within <div=”logo”> and it’s corresponding </div> goes the following code:

<a href=”/” title=”Return to the home page”><img src=”/images/logo.png” alt=”Logo” /></a>

That is the nice tidy code for an image link. Now when someone clicks on the logo, they will be returned to the homepage.

#content and #sidebar

In my design, these divs just have a solid colour background, so there’s no need for a background image. But I have created some spacing between them and the wrapper border so they’re not right up against one and other. For this - I’ve manipulated the CSS of each div to create a margin of 15px around, which is the white space, and another 15px of padding within the grey areas to space the internal text from the grey borders. To do this, I’ve changed the CSS from this:

#content {
width: 599px; (600px - 1px for the border-right)
float: left;
display: inline;
border-right: 1px solid #999;
}

#sidebar {
width: 200px;
float: left;
display: inline;
}

TO THIS:

#content {
width: 540px; (reduced to compensate for the 60px of combined margins and padding.)
margin: 15px;
padding: 15px;
float: left;
display: inline;
background: #f0f0f0;
}

#sidebar {
width: 140px;
margin: 15px;
padding: 15px;
float: left;
display: inline;
background: #f0f0f0;
}

Make sense? I sure hope so. Because these 2 divs have no height specified, it means as the content within increases, the backgrounds and height will increase proportionaly, as will the wrapper background.

Finally…

#footer

The footer is another solid image like the header. This consists of the bottom border, another slight gradient and a darker grey border at the top to visually separate it from the content above. The text styles will be achieved with CSS later. The background image CSS is the same as for header:

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

Phew…. nearly there!

Now all the background images should have slotted in nicely - creating a beautifully simple yet appropriate design. The logo should be a link, and the content and sidebar areas should be nicely padded. If something doesn’t look right - check to make sure there are no coding errors by using the W3C HTML and CSS validators. Otherwise - let me know, it could quite possibly something I’ve done wrong.

The final styling is the text. This is down to everyone’s individual tastes, but to tie in with my design, I apply the following style for the general site text under body:

body {
font-family: Verdana, Arial, Sans-Serif;
font-size: 12px;
color: #a06d00;
text-align: left;
}

Individual text areas can be style within their divs or by creating individual classes. In the instance of the footer text - I want it to be centered so I’ve just applied the styles to the footer div, as so:

footer {
height: 25px; (I’ve had to reduce this because I’ve included 15px of padding to space the text out.)
font-size: 10px;
text-align: center;
padding-top: 15px;
}

Your best option with the fonts is to experiment with colours, sizes, alignment etc. Don’t forget you can also add styles to the menu in the sidebar to create hover-over effects and change the design to however you want it to look - don’t forget it’s purely created for the sake of this tutorial.

To Summarise

There’s an awful lot to take in in this tutorial, that’s why I’ve skipped a lot of jargon and waffling so you can experiment for yourself and learn by doing as opposed to mindlessly following every step of a tutorial. I’ve not supplied images on how to slice up you .psd because I’ve explained how I do it, and it’s something you can get to grips with easily.

The focus of this series is not on how to build websites, not an introduction to CSS or HTML or using Photoshop - I have to assume that you already know this and therefore tend to skip over simple bits - otherwise this tutorial would be enourmous! However, if you are struggling on any aspect, please either leave a comment or get in touch via the Contact page and I’ll help you out.

See you next time for the final part in this series - implementing some Wordpress functionality! The final part of the series is now up here.

Filed under: Blogging, Tutorials by admin