Archive for January, 2010

It’s time to dust down your old blog posts and give them the attention they deserve. Drop a link to your first ever blog post, if it is still live and tell me what it was a about, even if it’s totally cringe-worthy, why not have a look at what other people are posting too.

Here’s mine from August 2008

Wordpress next and previous post link on index.php

In two recent projects I have been faced with a problem. The problem is actually quite simple but I couldn’t figure out a solution for it, so I decided to call in the big guns.

I’m sure you are all aware of the <?php previous_post_link('%link','Previous Article') ?> and <?php next_post_link('%link','Next Article') ?> wordpress links that you can use on your single.php pages when you want to offer a form of navigation between posts.

The problem

In these projects I’ve set index.php to display the most recent post but I wanted the ability to use the next and previous post link, to help users cycle through other blog posts. However because index.php is a page and not a post I wasn’t able to use the regular method mentioned above. Therefore the only possible solution for the user to navigate through posts using the wordpress navigation was to click on the post title to enter the post page and then click through the posts using the navigational link but as I’m sure you will all agree isn’t very logical.

The solution

Chris got back to me very quickly with his solution.

<?php query_posts('posts_per_page=1&offset=1'); the_post(); ?>
<a href="<?php the_permalink() ?>">Previous Post</a>
<?php wp_reset_query(); ?>

Chris then went on to explain how the above code works

WP_Query is just another form of query_posts that is a little more advanced and by nature doesn’t interfere with other loops. We could have used that for this too, but I just like query_posts better. And if there was a regular loop, that’s why I put that reset_query() call, so it wouldn’t mess with it.

The Kudos

I just want to say thank you to Chris once again for taking time out of his day to help me with this problem that has troubled me for a good few weeks now. If you haven’t heard of Chris before then I’m assuming you must have been living under a rock. You can check out his great multipurpose site called CSS-Tricks or you can read his Wordpress dedicated site called Digging into Wordpress to receive a series of great hints, tips and tutorials.

A New Year and a new Design

Well, the title of the post is fairly self explanatory. As you can see I have decided to give this blog a complete refresh, infact I’m not so sure I can even call it a blog anymore now that I have introduced my portfolio once again but more on that later.

At the turn of the year I decided that it was time to refresh things on this site, the previous design had been present since it was pushed live in August 2009. But if the truth be told, I was never really that happy with it. In the end I felt that the last design iteration just didn’t fall in line with my own "personal brand" that I had created with the previous iterations. My specification for this site has always been simple; clean with plenty of white space, the design conforming to use of a strict grid, use of whites and greys and the typography being the main focus point, I didn’t want my design to be shifting the users focus away from what they were looking at; whether that was a blog post or part of my portfolio. Ultimately, I felt my last design fell down at a few of these hurdles.

One of the main reasons I decided to push through this redesign so quickly was because I have decided to take part in Project 52 and for that reason I have decided to move the style of this blog back to being more content focused. The content area is now much larger than the previous design, almost twice the size.

However, in my urgency to get things pushed through, I’ve still got many loose ends to tie up, so please bear with me whilst I get on with them. Some of the things at the top of my list are; styling of comments, getting my portfolio section up and running and refining my HTML5 code, as this was a bit slap dash and can definately be improved. Infact, I felt that my HTML5 code in the last design was spot on, one of it’s redeeming features. If you can think of anything that needs urgent attention then please feel free to get in touch with me.

On the logo front, as I know this will cause some controversy, let me explain. Those of you who have been regular visitors to this site will have no doubt become accustomed to my laurel logo but for this design I have decided to switch to a laurel wreath as made famous by the tennis clothing brand Fred Perry, as you can see the resemblance is quite close. I would like to design my own laurel to use for my personal brand but for now I think I’ll be sticking with this one.

Oh, I’ve also finally got round to incorporating Typekit, after buying it some six months ago and check it out in a webkit browser, you might find a couple of little surprises within.

Pseudo Menu Items

Back in September I wrote an article on styling drop caps using pseudo elements. Since then I’ve been thinking about what other elements of a website you could style in a similar fashion.

One such item that has always irritated me when creating a site is what to do with an inline menu system. I’m not sure about you but when I’m rapid prototyping and I’m tackling an inline menu I normally always style them the same way.
<ul> <li><a href="#">Item One</a></li> <li>|</li> <li><a href="#">Item Two</a></li> <li>|</li> <li><a href="#">Item Three</a></li> <li>|</li> <li><a href="#">Item Four</a></li> </ul>

with the end result looking like the following

Item One | Item Two | Item Three | Item Four

However I’m sure you will all agree that this is far from ideal. In that example alone we’re sticking in an extra three list items that contribute absolutely nothing other than presentation and as we’re all told, we should be separating content from presentation with the use of css.

So where do the psuedo elements come in? Well, if we strip out the three redundant list items our code will now look like the following
<ul> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> <li><a href="#">Item Four</a></li> </ul>

Now to add the presentation through our css
ul li { list-style:none; display:inline; float:left; margin:0 5px 0 0; } ul li:after { content:"|"; margin:0 0 0 5px; } ul li:last-child:after { content:""; }

We could also code the last section like
ul li:last-child:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
But I’m not really sure of the advantages of each method. If anyone can tell me the proper way to do the :last-child example then that would be great.

Anyway I digress, by applying the following css to our code our example menu item now looks exactly like what we were aiming for

Item One | Item Two | Item Three | Item Four

Lets now breakdown the CSS and see what each part plays in order to achieve our final result?

The first section of css will set out a list like normal, removing all list styles, making the menu display inline, floating every list item left to make them all fall in line with each other and finally adding a margin to the right to add more spacing to the list items.

In the next section we make use of the :after pseudo element on the list elements. We use the content property to add the vertical line after each menu option and adding a margin to the left to make sure that the vertical line is evenly positioned between it’s surrounding li elements.

Within the final section of our css code we make use of two final pseudo elements; :last-child and :after. The :last-child pseudo element will find the last element within any parent element. In the second section of our css we used the content property to add a vertical line after each li but because we are targeting the last element we can remove the vertical line by adding in another content property and leaving it blank and the :after element tells the browser which side of the element we are targeting.