For the menu I wanted a mix of both dynamic and static elements. I some of the categories I wanted to show the latest posts underneath, in another I wanted to show links to the sub-categories rather than the posts. And finally I wanted some to link to static pages such as “contact”.

Another thing I was quite specific about was having the correct font for the category titles. The reason I wanted this was because I wanted full control over how the page was displayed cross-browser and cross-platform. This way I could be sure that what I designed was what people would see (whilst this might seem an obvious choice it happens far too often that websites are coded poorly and don’t display similarly in different browsers). As I used Helvetica when designing the website in photoshop, I knew I would have to convert the titles to images that would then be loaded on the website – this is because Helvetica is not a standard font, which would result in the website rendering differently on computers that don’t have Helvetica installed.

The first step was slicing up the photoshop file and exporting the category titles as smaller separate images that could be loaded into the specific areas where they were to be displayed.

This was done by simply linking the images to their respective categories by finding their category IDs in the wordpress admin panel.

<a href="?cat=3"><img src="wp-content/themes/ubbedall1/images/ideas.gif" border="0" alt="" /></a>

For the categories where I wanted to display the newest posts under I looked through the wordpress wiki for the tags regarding post lists, and integrated them into my website.

$postslist = get_posts(’numberposts=10&order=DSC&orderby=date&category=3′);

In the code above I defined the maximum number of posts from the category to be displayed. The order in which they were to be displayed (descending by date). And finally from which category they should retrieve the posts. For each category I merely checked their ID in the wordpress admin panel and then entered the corresponding id into the code.

Below you’ll see the second essential element of the code. Here is how I handled the actual output of the php loop (partially) defined above. First thing I do is put the output into a list element (<li>), this is so I can easily format the items, in this case posts. I then define the link to the corresponding post by defining the link as “permalink” – this is a wordpress tag which outputs the url for the specific post. I then define the text which is to be “physically” shown on the page and host the link, by adding the “the_title” wordpress tag within the link tags (<a&gt).

(Both code-snippets were obvioulsy integrated in a php “loop” which I will show you in the complete code snippet).

<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

Finally the entire code for one the menu elements:

<a href="?cat=3"><img src="wp-content/themes/ubbedall1/images/ideas.gif" border="0" alt="" /></a>
<ul>
<?php
$postslist = get_posts(’numberposts=10&order=DSC&orderby=date&category=3′);
foreach ($postslist as $post) :
setup_postdata($post);
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

This is repeated for each of the categories that are to display posts as well, except for the category ID being changed of course. The other menu points are created manually as html links.