Converting your design to code

Socrates Premium Wordpress Theme

Socrates Premium Wordpress Theme

Get Instant Access

The next step towards turning your ideal design into a WordPress theme is to slice images out of your design and write HTML and CSS files that put it all together. For the purpose of this chapter, I assume that you already know how to do this in general. We'll cover the ways you can do your slicing and dicing, but in a different way so that your HTML will be best suited for WordPress.

If you are interested in the details of both designing a theme and slicing it for WordPress, I highly recommend the book "WordPress Theme Design", Packt Publishing, 9781847193094 by Tessa Blakeley Silver. This book minutely covers topics such as choosing a color scheme, considering typography, writing the best CSS, and laying out your HTML using Rapid Design Comping.

My html build folder, which has my HTML, CSS, and image files, looks like this:

Q html build

We will now take a look at some of the choices I made when writing these HTML and CSS files so that you can take advantage of these tips and tricks.

Examining the HTML structure

Here is the very basic (not final) layout of my HTML file for my food blog design:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=" 9/xhtml"> <head>

<title>Blog title</title>

<style type="text/css" >@import url("style.css");</style> </head> <body>

<div id="container"> <div id="header">

<div id="mainnav">

<li>Navigation list item</li> </ul>

</div><!-- /mainnav --> <h1><a href="#">My Blog Title</a></h1> <div id="description">this is My subtitle</div> </div><!-- /header -->

<div id="content"> <div id="copy">

<div class="post">

<h2><a href="#">Post Title</a></h2> <div class="post-date">Post Date</div> <p>Post Content</p>

<div class="categories">Categories</div> <div class="tags">Tags</div> <div class="comments">Comments</div> </div> </div>

<div id="sidebar">

<li>category list item</li> </ul>

</div><!-- /sidebar --> </div><!-- /content -->

Footer text </div><!-- /footer --> </div><!-- /container -->

You can see that I've separated out these four major parts:

• The header is in the div with id="header"

• The side column is in the div with id="sidebar"

• The main column is in the div with id="copy"

• The footer is in the div with id="footer"

I'd like to call your attention to a few other things I've done here:

• The mainnav is in an unordered list (ul)

I did this because WordPress has a function that spits out the pages of your site in the order you choose. When WordPress spits out the list, every linked page title is in a list item tag (li).

• Archives and Categories are similar

There are going to be a number of items that you may want to add to your sidebar, including widgets. Many of these items will be lists with titles, so I've prepared for that in my HTML.

• Within the div id="copy" is a div with the class="post"

Even though this basic layout has just one post in it, I know that I'll want to show more than one post at a time. I've created this div expecting that it'll be repeated for each post. Also, WordPress expects this div to be called "post". (We'll get into that later.)

Now that I've got my basic layout, I'm going to add a few more HTML elements to flesh it out a bit, including more information in the <head> as well as the search box, and some additional CSS. Then I'll fill up the sidebar, header, content, and footer with bunch of dummy text so that it looks almost exactly like my theme's design in Photoshop. I'm not including the complete HTML here, but you can find it in the code bundle for this chapter (in the folder called HTML_build) if you'd like to do the same. However, note that I've left most of the text a little different. This is my trick to remind myself, later, to replace the static text with dynamic WordPress-generated text.


MafttlZOO? February 20CH January 2009


MafttlZOO? February 20CH January 2009


Examining the CSS

Let's now take a look at the CSS. First, we'll review the CSS that displays everything you see in the design. Note that I've got styles for my five key parts: header, sidebar, copy, post, and footer. They are as follows:

margin: 0px;

background: #ddd url('images/bg-body.gif') repeat-x; font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: 14px;

color: #397cc6; text-decoration: none;

text-decoration: underline;

/*** STRUCTURAL PLACEMENT - - - - - - - - - - - - - - - - - - - - */

#container {

margin: 0 auto; width: 837px

background: url('images/header.jpg') no-repeat;

#mainnav {

padding: 40px 0 0 30px;

#content {

background: #fff url('images/bg-content.gif'); padding: 0 10px 0 10px;

width: 590px; float: right;

#sidebar {

width: 200px;

float: left;

background-color: #F7F7F7;

background: url('images/footer.gif') no-repeat; height: 79px;

/*** STYLING PIECES - - - - - - - - - - - - - - - - - - - - - - - */

/* header title */ #header hi { color: #fff; font-size: 24px; font-weight: normal; margin: 140px 0 5px 500px; text-transform: lowercase;

#header hi a { color: #fff; text-decoration: none;

#header hi a:hover {

background-color: #9A8A71;

#header #description { color: #fff; margin: 0 0 5px 500px; text-transform: lowercase;

/* main (top) navigation */ #mainnav ul { margin: 0; padding: 0;

padding: 0 30px 0 0; display: inline; color: #82aedf;

#mainnav ul li:before {

#mainnav a, #mainnav a:visi ted { color: #bad2ee; text-transform: uppercase; text-decoration: none;

#mainnav a:hover {

text-decoration: underline;

#sidebar {

padding: 0 0 20px 0;

color: #b7b6b6; font-weight: normal; font-size: 18px; margin: 30px 0 5px 10px;

#sidebar h3.first { margin-top: 0;

list-style-type: none;

#sidebar input {

background-color: #ededed; border: 1px solid #ccc; padding: 4px; margin-left: 10px;

border-bottom: 3px solid #f7f7f7; padding: 0 0 15px 0;

color: #c1ae90; font-weight: normal; margin: 0;

color: #c1ae90;

.post .categories, .post .tags, .post .post-date { color: #bababa; font-size: 12px;

.post .post-date { float: right; margin-top: -18px;

.post .comments { font-size: 12px; float: right; margin-top: -2 0px;

.post .comments a, .post .comments a:visi ted {

background: url('images/icon-comments.gif') no-repeat 0 3px; padding: 1px 0 1px 18px;

padding: 5px;

border: 4px solid #e2e2e2;

color: #dedede; font-size: 2 0px; text-align: center; padding-top: 20px; text-transform: lowercase;

But beyond this, there are some other styles we should add. When WordPress spits out items that include page lists, category lists, archive lists, images, galleries, and so on, it gives many of these items a particular class name. If you know these class names, you can prepare your stylesheet to take advantage of them.

When you add an image to a post or page, WordPress gives you the option to have it to the right, left, or at the centre of the text. Depending on what you choose, WordPress will have the image styled as alignleft, alignright, or aligncenter. Let's add alignleft and alignright to the stylesheet:

.alignright { float: right;

.alignleft {

float: left;

A class is another necessity for the images that WordPress uses when you add an image with a caption. There are three essential entries you'll want to make in your stylesheet to style the caption box, which are:

padding-top: 5px; border: 4px solid #e2e2e2; text-align: center; background-color: #fff; margin: 10px;

.wp-caption img { margin: 0; padding: 0; border: 0 none;

.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;

I've designed my caption box to match my captionless images that I styled in .post img.

Another frequently used class is current_page_item. On the page you are currently working, WordPress adds this to the list item in the pages menu. This gives you the ability to visually mark a page that the user is currently viewing. I'll mark it with an underline using the following code:

#mainnav .current_page_item a, #mainnav .current_page_item a:visi ted { text-decoration: underline;

WordPress uses many other classes that you can take advantage of when building your stylesheet. I've listed a few of them in Chapter 11.

Now that you've got your HTML and CSS lined up, you're ready for the next step: turning the HTML build into a WordPress theme.

Was this article helpful?

0 0
The Accidental Blogging Millionaires

The Accidental Blogging Millionaires

Get Inspired By The Most Popular Bloggers Online! If You Want To Skyrocket Your Success With Business And Improve Your Overall Life You Need To Have A Look At The Accidental Blogging Millionaires! Business can be a fight, particularly when you’re trying to establish one online and like all fights, to succeed you must find the winning techniques and apply them.

Get My Free Ebook

Post a comment