How to slice and style a wordpress theme

I said that I was going to make a tutorial on how to code a theme design to work in Wordpress. I choose to code the Artists Page theme because it’s simple and you can  understand better. So, if you haven’t got the theme please check the Archives or go directly to the Artists Page photoshop tutorial. You can grab the PSD file or follow the steps to make your own design.

Step 1

Open the PSD file in photoshop. Take the Slice Tool(K), right click on the canvas and select Divide Slice…

Check the Divide Horizontally Into and type 3, slices down, evenly spaced.

This is how it should look like after:

Step 2

Drag the slice lines a few pixels above and beyond the paper. Always remember to have the Slice Tool active when dragging, modifying, adding, deleting the slices.

Step 3

Left click between the second slice and the third slice and right click with the Slice Tool and Divide it Horizontally Into 2 slices.

This slice will be where the title, date and comments number appears. We only have one image to deal with instead of four, meaning the paper background first, the date
background second, the title background third and the comments background fourth.

Step 4

In the fourth slice, Divide it Horizontally Into 2 slices. Just leave it where photoshop puts it.

Step 5

In the Post Content Group hide the date, title, comments, writing, thumbnail, continue reading and navigation.

In the Footer Group hide the Left and Right groups.

Step 6

Let’s export the slices. Click on File, from the photoshop menu, and select Save for Web & Devices… ( Alt + Shift + Ctrl + S ). Hold down Shift and select all the slices. Use Space key to move up and down.

Make them all JPEG with Very High Quality (80) and Optimized.

Save them on your hard drive. You should have 5 images.

Step 7

Slice the thumbnail to export it as an image. Divide into 2 slices Horizontally and 3 slices Vertically.

Now, there are 2 ways to export it with a transparent background. The first one is to hide all the other layers until the background of the thumbnail is transparent or the
second one is to use the Rectangular Marquee Tool (M), make a selection of the thumbnail, it will snap automatically to the slices, from photoshop menu, click on Edit – Copy ( Ctrl + C ).

Then click on File – New. From Background Contents select Transparent.

Paste it ( Ctrl + V ) on the canvas and rename the layer thumbnail. Create a new layer and name it thumbnail background. With it active, Ctrl click the thumbnail layer to
make a selection.

From photoshop menu, click on Select – Inverse ( Shift + Ctrl + I ). Fill it with the Paint Bucket Tool (G) color ccbda4.

Do not deselect the selection. Zoom your document to about 300%. Take the Rectangular Marquee Tool and by holding down Alt key, deselect the middle first selection.

Hit the delete key on your keyboard. Now you have the thumbnails background. Save the PSD file and name it thumbnail. The reason we just did this is that every time you
want to put a post image all you have to do is open the PSD thumbnail file in photoshop, load the image reference to the post, place it on a new layer above the thumbnail background layer, right click on the image layer and select Create Clipping Mask.

Once you’ve done this notice that the post image took the shape of the thumbnails background layer. Free Transform it till it’s small and fits.

Save it for Web & Devices as a PNG 24 file.

Step 8

Next, slice the Continue Reading including the arrow, the links from the paper on footer, the social network link from the About Me Content and the shapes from the Contact Me Content. Export them as PNG 24 also.

Step 9

Remember a few tips when you start coding the theme with your favorite coder: with this design it only has a color for the background witch is white; the font color is  98672e and links hover color is ccbda4. Write them down in notepad or on a piece of paper and also if you have different font sizes you should also write them down, like
for example: Post title and the Page title have a font size of 24px and the default font size is 13px.

Step 10

In your wordpress theme directory create a new folder and name it Artist Page. A wordpress theme consists in a images folder where the images are stored, a js folder  where the javascripts are stored, a stylesheet, header.php file, index.php, single.php, page.php, comments.php, sidebar.php and footer.php .

I made a Basic Theme pack witch holds the above mentioned files, folders and the PSD files: thumbnail, gravatar and comments. It’s been simplified so that it can make the coding process a lot easier.

Extract the content of the pack without the PSD files in the Artist Page folder made in your wordpress theme directory. Copy all the images that you sliced in the images folder. Log into your wordpress administration and from Setting – Reading and put in Blog pages show at most 1.

Step 11

Open your favorite coding program. I use Dreamweaver. From the Artist Page theme open style.css file. As you can see in the General CSS styling there is already something written. That’s called CSS Reset. More documentation about that here 30 CSS Best Practices for Beginners – Basix.

In the General CSS styling write the following code:

body {
	background-color: #FFFFFF;
	font-family: "Tahoma";
	font-size: 13px;
	color: #98672e;
}
a {
	text-decoration: none;
}
.clear {
	clear: both;
}

What it does is all of the themes background will be white, the font will be Tahoma with a 13px size and a color to it. For the links I put no decoration, meaning when you hover your mouse over one it doesn’t display that line under it.

Step 12

In the Wrapper CSS styling write the following code:

#wrapper {
	margin: 0 auto;
	width: 1000px;
}

This centers the theme. As you’ve seen when we sliced the theme the biggest image isn’t larger than 1000px width.

Step 13

In the Header CSS styling write the following code:

#header {
	background: url('images/header.jpg') top center no-repeat;
	height: 145px;
}

The header image appears.

Step 14

In the Content CSS styling write the following code:

#content {
	height: 619px;
}
#content-post {
	background: url('images/post-bkg.jpg') center no-repeat;
	height: 130px;
}
#content-post ul {
	text-align: center;
	padding-top: 40px;
}
#content-post ul li {
	display: inline;
	float: left;
	width: 333px;
}
#content-post ul li.date {
	padding-top: 26px;
}
#content-post ul li.date .time {
	padding-left: 320px;
}
#content-post ul li.title h1 a {
	font-size: 24px;
	color: #98672e;
}
#content-post ul li.title a {
	color: #98672e;
	font-weight: bold;
}
#content-post ul li.comments {
	padding-top: 22px;
}
#content-post ul li.comments .comm {
	padding-right: 270px;
}
#content-post ul li.title ul.post-categories { padding: 0; }
#post {
	background: url('images/post-content.jpg') center no-repeat;
	height: 489px;
}
.post-text {
	width: 500px;
	margin: 0 auto;
	padding-top: 10px;
}
.post-text p {
	margin: 0 15px 0 42px;
}
.thumbnail {
	width: 150px;
	height: 150px;
	float: left;
	margin: 0 5px 5px 42px;
}
a.more-link {
	background: url('images/more.png') center no-repeat;
	width: 133px;
	height: 15px;
	display: block;
	margin-top: 10px;
}
a.more-link:hover {
	background: url('images/more-over.png') center no-repeat;
}

As you can see we put the post title image, the content image, the date, post title, comments number, post thumbnail, post content and the continue reading tag.

Step 15

Open index.php in your coding program. At line 21 is the navigation div and it’s empty. You can write here your favorite navigation code for wordpress. It could be the
default wordpress code, a wordpress plugin, jquery/ajax powerd navigation or any other javascript code. I’ll go ahead and put the wordpress default witch is the simplest. You can find more documentation on that here Codex.

Now, place the following code at line 22:

<?php posts_nav_link('','« Next','Previous »'); ?>

In the Navigation CSS styling write the following code:

.navigation { text-align: center; padding-top: 10px; }
.navigation a { color: #98672e; }
.navigation a:hover { color: #ccbda4; }

Style the navigation links.

Step 16

In the Sidebar CSS styling write the following code:

#sidebar { background: url('images/sidebar.jpg') center no-repeat; height: 183px; }

Sidebar image appears.

Step 17

In the Footer CSS styling write the following code:

#footer { background: url('images/footer.jpg') center no-repeat; height: 183px; }
.copyright { width: 500px; float: left; padding: 80px 0 0 200px; color: #000000; }
.copyright a { color: #000000; }
.menu { float: right; padding: 48px 209px 0 0; }
.menu ul { list-style: none; }
.menu ul li { display: block; }
.menu ul li.home a { background: url('images/home.png') center no-repeat; width: 74px; height: 24px; display: block; }
.menu ul li.home a:hover { background: url('images/home-over.png') center no-repeat; }
.menu ul li.about a { background: url('images/about.png') center no-repeat; width: 74px; height: 27px; display: block; }
.menu ul li.about a:hover { background: url('images/about-over.png') center no-repeat; }
.menu ul li.contact a { background: url('images/contact.png') center no-repeat; width: 74px; height: 27px; display: block; }
.menu ul li.contact a:hover { background: url('images/contact-over.png') center no-repeat; }

Positioning of copyright and menu in footer.

Step 18

In the Comments Content CSS styling write the following code:

#no-comments-header { text-align: center; padding-top: 30px; }
#comments-form-header { text-align: center; }
#comments-form { margin: 20px auto; width: 430px; }
#input-textarea { background:url('images/text.png') center no-repeat; width:202px; height:150px; height:120px; float:left; margin:0 10px; }
#commentform textarea { background:transparent; font-family:"Tahoma", Arial, Sans-serif; font-size:13px; color:#98672e; border:none; width:150px; padding:10px 0 0 30px; }
.input-name { background:url('images/name.png') center no-repeat; width:202px; height:38px; float: right; margin-bottom: 13px; }
.input-email { background:url('images/email.png') center no-repeat; width:202px; height:38px; float: right; margin-bottom: 13px; }
.input-url { background:url('images/url.png') center no-repeat; width:202px; height:38px; float: right; margin-bottom: 13px; }
#commentform input { background:transparent; width:140px; margin:0; color:#98672e; border:none; padding: 6px 0 0 40px; }
#commentform input#sub { background:url('images/post.png') center no-repeat; width:150px; height:33px; clear:both; margin:15px 0 0 140px; }
#commentform input#sub:hover { background:url('images/post-over.png') center no-repeat; }

Styling the comments form and titles.

Step 19

In the Comments CSS styling write the following code:

#comments-header { text-align: center; padding-top: 30px; }
#comments-content { margin: 20px auto; width: 430px; }
#comments-background { background: url('images/comments.png') center no-repeat; height: 180px; margin-bottom: 30px; }
#comments-title { float: left; padding-left: 14px; }
.gravatar { margin-top: -12px; }
.comments-meta { padding: 10px 0 0 0; text-align: center; }
#comments-text { padding-left: 60px; width: 370px; }
.comments-author { font-size: 18px; font-weight: bold; padding: 28px 50px; }
.comments-author a { color: #ccbda4;}
.comments-author a:hover { color: #98672e; }

Background for comments, gravatar, styling and positioning of the comments.

Step 20

Create 2 pages in wordpress, name them About and Contact. Write a short bio of yourself and some contact info. That’s it.

You can go ahead uploading and activating it in wordpress.