Wireframe to Mockup to XHTML

Up until now I have spent a lot of time getting to grips with the basic in and outs of WordPress themes. I understand how important it is that your theme is widget ready and that it is flexible and easy to customize.

Having finished my wireframe and being pretty satisfied with my initial mockups, I can start moving on to the actual theme creation. I have had some difficulties coming up with a colour scheme that I liked, it’s gone from brown to green and now it’s blue. I have come up with two complete mocks; one for the front page and one for the individual post/archive/search pages.

The single pages are different because I need to make room for the comments section. People are used to comments at the bottom of every article, so I will keep them there.

I will have to shrink the main content area to make room for a sidebar on the right. This will hold the sidebar information related to the post being viewed. I intend to ship the theme with sidebar items such as related posts, most recent post and comments etc. These can of course be changed or swapped by using widgets.

Preparing the Markup

Now it’s time to get into the actual coding of the theme. The main challenge at the moment is getting the bottom section of the front page and the single pages styled. The hard part is that the XHTMl needs to be uniform for all the items. I have to style every item the same no matter the content. In other words, the styling needs to be strong enough to hold most of the generic content you find in a WordPress sidebar.

Automattic, owner of WordPress, recommends using a simple <ul><li>link</li></ul>

markup to make it compatible with widgets. I won’t be able to comply with that due to the horizontal layout of the theme. I will make use of one of their alternative versions which will include the use of the <div> tag and some additional php coding in the optional functions.php template file.

/Kasper – on Twitter and Delicious


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: