In this post I am going to talk about some of the coding decisions I made to achieve the look and feel of the theme. The theme in itself was designed to be ‘simple’ as its working title suggested, so the code was fairly straight forward with nothing too expansive. Nevertheless, I did discover some new snippets of code so I thought I would share.
First things first, It would be terribly wrong of me not to mention Elliot Jay Stocks and his Starkers WordPress Theme. Anyone looking for a solid foundation to begin WordPress theme designing need look no further. It gives some sensible CSS resets and puts in place a basic outline of WordPress mark-up for you to tweak and make your own.
And we’re back.
I will not go into great length about the process of building a blog theme (there are many excellent sites that already provide this including WordPress themselves) but I would like to brush over a few techniques I found useful and hopefully others will too.
Image Rollovers
One thing I really don’t like seeing on any website is the momentary flicker when a div changes from one image to another. Call me pedantic, but even with fast internet, it just looks bad. I used a really basic and simple solution when designing the Michael Howlett logo, and I will probably never use the two images method again.
It’s pretty simple; this is how the logo looks.
See, it's just one image
Take some care in this as you need to make sure the dimensions are exact. Here the image has a width of 430px, so make sure both images are exactly half of whatever width you are using otherwise you will get slight shifts.
Then simply use this code inside a Div, and give it a class.
{code type=html}{/code}
Then in your Style sheet use something like this
{code type=css}a.rollover{
width: 215px;
height: 30px;
display: block;
background: url(images/Image-name.png) top left no-repeat;
margin: 10px 20px;
}
a.rollover:hover
{
background-position: -215px;
}{/code}
Pretty simple eh? Just declare the width of the rollover as half the total image width, then add a negative of that value to the rollover. Now, no more stupid micro-second flicker every time I hover over a link.
WordPress Post ID
Prior to version 2.8 The Loop, as a standard, offered one class and one id for each post – the class of “post” and the id being the post number so something like “post-341″. With a new syntax it is now possible, without the use of plugins or extended code, to give each post a class depending upon its category or tag. So rather than having to declare styles for each post using its id which would be insane you can now style posts depending on what category its under.
Most people will have this, know of this etc etc but for those who don’t and want it, just replace the old code of
{codetype=html}
{/code}
Post Thumbnails
Again, as of WordPress 2.8, an inbuilt ability to add thumbnails to your post list was introduced. Something that should have been put in place a long time ago me thinks. Prior to this you’d need to get plugins, fiddle and faff about with custom fields and all that, which is a long winded and needlessly complicated way of doing something simple.
Firstly, check out the WordPress codex on Post Thumbnails. But I will quickly go over the basics of what needs to be done to enable post thumbnails.
Firstly, insert this code into Functions.php before the closing arrow bracket (this will allow for the “post thumbnail” box to appear on the bottom right of the post/page creation window on WordPress.)
{codetype=html}add_theme_support( ‘post-thumbnails’ );{/code}
Then you need to add the code to your Index.php file within the loop. Here is how my posts are set up to be displayed:
{codetype=html}
adambrown.info.
Lastly for this post, I will show you how I used alternating classes to achieve the layout of my archive and search results pages. This is very useful if you wish to have alternating styles on posts – some people like to have the background colour change, or have the post title switch from left to right aligned. Anything you want.
in my case, I wanted the archive to be displayed in a two column style and this was just about the only means I could figure out to do this as the Loop usually just spews out the posts as it likes.
First, add this to the Funtions.php
{codetype=html}$odd_or_even = ‘odd’;{/code}
Then you need these two separate lines to be placed in or around the loop
{codetype=html}
“>
id=”post-“>{/code}
This code will give each post either odd or even class, as well as the more expansive Post ID I mention earlier. Its then up to you how you wish to style .post-odd and .post-even in your CSS. I merely floated one left, the other right and declared a width and min-height to conform to my layout.
I think that’ll do. Any questions at all, feel free to ask.
Leave a Reply