1. Design a WordPress Theme: Designing the Layout
2. Design a WordPress Theme: Slice the PSD (currently reading)
3. Design a WordPress Theme: HTML/CSS
4. Design a WordPress Theme: Convert HTML/CSS to a WordPress Theme
5. Design a WordPress Theme: Advanced Code

Now that we have our layout ready lets get it sliced up so that we can create the HTML/CSS with the images (that’s Part 3).

Since the design of the theme does not rely heavily on imagery the slicing part of this project will be very easy. This is something which I would actually recommend to a lot of new web designers. Go easy on the imagery, once you have mastered your HTML and CSS you can then take your design, and markup, skills to the next level.

To Sprite or Not to Sprite?

A lot of professionals out there swear by sprites, I use them as well, just not every. single. time. Plus, when it comes time to update your theme, or do customizations, editing your sprite can at times be a royal pain.

So I tend to go half and half on this one.

Use sprites for images that are not intended to repeat and slice the others as you normally would. Of course, you can do it any which way you like. In the end, what should matter is that you have done everything to make your theme as user friendly (i.e. load faster) as possible and for it to be easily customizable by anyone else.

Slice and Dice

The main areas that need to be sliced for this theme are the navigation and tab gradients. The inner post pages will be using some social media icons that go into a sprite and that’s pretty much it. See how simple it can be if you plan a step ahead to try and rely mostly on CSS to make your design look pretty?!

The easiest way to get your gradients sliced is to merge the layer that it is on with a new/empty layer. Then select the whole new layer, create a new document and save it. That’s it. Confused a bit? Here’s a step by step:

• Select the layer that needs to be sliced

• Create a new layer, and select it too.

• Merge both the layers with CTRL + E (CMD + E on Mac I believe)

Now select the whole layer with CTRL + A and create a new PSD document.

You will notice that the width is very large, in my case it was 960px, since I don’t want the gradient image to be that wide (as we can use CSS to repeat the image) I’m going to change the new document width to 1px.

Now paste your image in the new document and you have your sliced navigation image. In my case it’s 1px by 40px.

<- That’s it right there.

You can just as well use the slice tool but I get by faster with this method. There are many who will disagree with my method and I’m fine with that, in the end it matters what works for you.

Simply repeat this step for other gradient type images, in my theme’s case it was a total of 3 gradient images.

Creating a sprite

Now let’s create a sprite for our social icons. For my theme I used these icons from KomodoMedia.com.

The icons are 16px X 16px. So I created a new PSD document 16px wide and 146px high, to accommodate more icons below each other for my sprite.

Now all you have to do is place the icons below each other, don’t forget the spacing in between which was 16 pixels in this case, and save your social icon sprite.

It should now look like this -

Cool! Now we’re done!

That’s about it for this theme, the rest of the magic happens with CSS. Which will be posted in Part 3, Writing the HTML/CSS. (subscribe up to my RSS feed for updates)

1. Design a WordPress Theme: Designing the Layout (currently reading)
2. Design a WordPress Theme: Slice the PSD
3. Design a WordPress Theme: HTML/CSS
4. Design a WordPress Theme: Convert HTML/CSS to a WordPress Theme
5. Design a WordPress Theme: Advanced Code

Designing for WordPress can be quite an experience as you take your thoughts from a concept, to a PSD to a fully functional theme. I have been using and designing/developing with WordPress for over 3 years now and I thought I would do my part and share my process with you.

Here is my contribution of taking a theme concept through its development stages to a fully functional WordPress theme.

The Concept

Many times you will be hard pressed to NOT find a theme already available in a particular niché for WordPress. The platform is so widely used that virtually everything has been done with it, well almost everything. But have no fear as there is always room for more.

The first thing you need to do while thinking up a concept is try and not search for similar themes. This will send you on a downward spiral as you realize there are literally dozens, even hundreds, of similar themes and you will end up losing hope for creating one altogether. If there is one thing the WordPress community has shown me it is that they always like fresh ideas.

So start visualizing your concept and don’t even bother to find out if someone has done something similar. Chances are they haven’t. Your idea will be original as long as you don’t influence yourself beforehand.

The Layout

I usually start by designing my layout on paper so that I can get a general idea of where I’m headed with it, this particular one was actually done by my wife. Yeah, she rocks!

Style Theme wire frame

Your sketch does not have to be an exact replica of how you imagine your theme, as you obviously cannot get those pixel perfect measurements and other finer details like icons etc… So grab some paper, jot down the most important elements of your theme and start creating a rough wire frame structure.

Don’t even bother with rounded corners, shadows, text etc… right now, the important part is to get your ideas on paper as best as you can.

How do I decide what are the most important elements?

Well, first of all you need to decide who is your customer. For my example, I wanted it to be for a fashion/style/celebrity blogger. So I decided that these would be my most basic content points -

• Logo in the center, ads on the side
• Big images on the top left and right, with links down the center
• A central ad area below the top content, wrapped with more content and images
• A footer with links

You can revise your sketch as much as you like, or use it as a base and start getting the theme done in Photoshop (I actually prefer to just start hacking it together with raw HTML/CSS). Either way, it’s always a good step to have something to refer too during the design phase and the easiest way to accomplish that is with your sketch.

The Layout Process

I could write a whole lot of details about the process you can take for positioning elements, adding gradients and various keyboard shortcuts to make you a super key master of Photoshop, but I won’t. As there are multiple tutorials out there that show you how you do that already.

Instead, I’ll just take you on a journey and show you a step by step pictorial guide. So here are the screenshots of the process I took my theme concept through -

Get the title in first.

Added the navigation, Advertisment, Subscribe and Search areas.

Image area placements, and the links in the center, go in.

Lower content areas with an Advertisement module in the middle

Finally the footer and the bottom navigation go in.

Starting from the top, let's style the navigation, Ads, subscribe and the search area.

Add more imagery, hmm... looks like the right area could be more interactive, so let's make it a tabbed area!

More imagery...

The footer looks much better now, don't you think?

Some final font and image adjustments and we're done with the layout phase of theme development!

So there you have it. A slightly polished wire frame from which we can now use a guide* for building the HTML/CSS bit of the theme for final conversion over into a WordPress theme.

But first…

We actually need to get it ready for the HTML/CSS part.

That’s in Part 2 which you can read here – Slicing a PSD.

*If you are going to be designing for a client you might want to spend a few more hours to really get it looking spic and span, since this was for me to use a reference I left a few styling parts out (namely the footer).

Here are 7 CSS changes you can make to your blog for a fresh new look.

Make your blog fresh

1. Background colors

Changing background colors on your blog is probably the easiest thing you can do. Simply look in your stylesheet for any instances of:

{ background: #ffffff; } Note: the #ffffff is simply an example here.

Depending on the stylesheet of your blog there may be various background colors defined. If your blog uses images then you will see those written like this:

{ background: url(folder/image) }

In this case, it’s best you either contact the designer of your theme, or if you are comfortable changing it on your own go ahead and play a little. Make sure and save a backup first though!

If you need to find colors you can find the “hex values”, i.e the #ffffff, at colourlovers for the color you desire.

Now that you have the hex value of your color simply edit the CSS style and click “Update File“. Reload your blog page to see the change in color!

2. Headings

You see the “Headings” above, it is enclosed in an H3 tag. You can style all of your individual H1, H2, H3, H4, H5 and H6 tags. Chances are that you will be using the H1, H2 and H3 tags the most.

It may seem a bit confusing at first because designers like to give different styles for an H3 tag that displays in the sidebar and another style for the H3 tag that gets used in the posts. An example is this very blog here.

For the post I’ve used:

.post h3 { border-bottom: 1px dotted #474444; color: #474444; font-size: 1.7em; padding: 5px 0 10px; margin-bottom: 10px; }

and for the sidebar I’ve used:

.sidebar h3 { background: #fff; font-size: 1.6em; letter-spacing: 1px; padding: 20px 0; margin: 0; }

You need to decide which headings you want to change and find the appropriate style in your stylesheet too edit them as you require. There are a myriad variety of choices of you can use here. I’ve provided some examples of what you can do with headings below.

.your h1, h2, h3 { border-bottom: 1px solid/dotted/dashed #hexvalue; color: #hexvalue; font-style: italic; }

If you want to edit the headings even further try adding a background color, I always choose to keep them simple though. Again, the #hexvalue for a color you want can be found at ColourLovers {linked to in point no.1 above}

3. Blockquotes

This is a blockquote, it has it’s own styling applied to it. It’s meant to grab attention.

Styling the blockquote is one of my favorite aspect of blog design. A well styled blockquote is a great way to grab your readers attention in your post or page.

In your stylesheet look for:

blockquote { styles here } and

blockquote p { styles here }

The “blockquote” tag helps in styling the general look of the quote area itself. The border and background you see above are styled by declaring styles for that tag. Here’s my style code to give you an idea of what you can do with it.

.post blockquote { background: #fbfbfb url(images/quote.gif) no-repeat 10px 10px; color: #474747; font-size: 1.3em; line-height: 2em; margin: 10px; padding: 10px 10px 10px 85px; border: 1px solid #e9e7e7; }

I’ve added an image to the background, declared a background color, gave a color for the text, changed the font size, added some extra line-height, gave it a border and some margin and padding. That may seem like quite a bit, but there’s a LOT more you can still do.

For the paragraphs within the blockquote all I did was add this:

.post blockquote p { padding: 10px 0; }

So, if you want to change just one thing first I would suggest you get yourself a nicely styled blockquote.

4. Lists

This is a list in the general sense of the term, except it does not use the list styling, which would look like this.

1. List point 1
2. List point 2
3. List point 3

My list styling looks like this:

.post ul { margin: 10px 50px; list-style: disc; } - This is for the unordered list

.post ol { margin: 10px 20px; } - This is for the ordered list, shown above

.post li { color: #474747; font-size: 1.4em; padding: 10px 0; } - This is for the lists for both of the above

You can add background colors, borders, change the font size or even use a background image. People love lists and a well styled list draws crowds.

5. Links

This is the most simple change that you can make in your stylesheet, the color of a link. There’s a good chance that your stylesheet has declared the link style in one area, here’s mine.

a { color: #800808; text-decoration: none; }

a:hover { text-decoration: underline; }

You can just change the color if you like, or you could even add a background color. Here are some examples.

1. Link 1
2. Link 2
3. Link 3

Here are the styles for the above links:

{ background: #444444; color: #fff; padding: 3px 5px; } - link 1

{ border-top: 1px dotted #333333; border-bottom: 2px dotted #000000; font-style: italic; } - Link 2

{ background: #c9c1c1; border: 1px dashed #800808; color: #000; padding: 3px 5px; } - Link 3

6. Spacing

Spacing can be handled in a few different ways.

First of all, you can give the whole post or page some spacing. For instance if I added this to my stylesheet:

.post { padding: 10px; }

which would make the whole document condense 10 pixels inwards.

Secondly, you can add spacing for your paragraphs with these styles:

.post p { padding: 10px; line-height: 22px;  }

This will give the paragraphs a 10 pixel padding all around, as well as provide spacing between lines.

7. Images

If you noticed the image at the top of this post, it was enclosed in a border with a background color. For WordPress themes, most designers tend to add the default styling. However you can play around with the styles and use different hex values for colors and maybe some more padding and margin, if you desire.

My image styling looks like this:

.wp-caption { background-color: #fbfbfb; border: 1px solid #e9e7e7; padding: 8px 0; text-align: center; }

.wp-caption img { border: 1px solid #e9e7e7; margin: 0; padding: 0; }

Best practice here would be to play around with background and border colors.

So there you have it, 7 CSS tips that can change the way your blog looks and feels. If you have any questions feel free to leave a comment.

Please take a moment to share this post with your friends and do sign up for our RSS feed! Thanks!