New blog header: how did I make it

During the weekend I played with the blog header.

In my opinion bloggers understimate the power of a rich header, and in most cases you will see only the blog title and description.

I am going to show you what I did on my header, why I did it and how can you do it on your own.

Pages first

The first thing included in the header is the navbar with blog pages. Having the pages in the very top of your blog will give it a more “corporate” look.

To list your pages, use wp_list_pages WP function.

You can find a brief explaination about it in Customizing WordPress header or in the official docs.

Logo

Now that I have a logo, it’s time to use it…

Categories

Then I wanted to display categories in the header, and I used Multi Column Category List Plugin for WordPress to split them into three columns.

I also modified a bit the plugin to show how many posts have been written for each category.

Gallery

The last thing I added was a slideshow showing my latest projects. I used SlideShowPro that isn’t free but has a lot of features and is made with Flash, that means no frameworks/complex javascripts required.

It’s also fully XML driven, that means it’s easy to configure.

If you are looking for a good free alternative, check JonDesign’s SmoothGallery, that uses MooTools.

And this is the result…

… an header that’s not the “image-title-description” you are used to see in WP themes.

During the next days I will redesign the rest of the blog, to make its contents as much accessible as I can.

Rate this post: (2 votes, average: 5.00 out of 5)

 Loading ...

If you found this post useful, please consider a small donation.

10 Responses

1. Daniel Rodriguez says:

   January 18, 2009 at 10:25 pm

   Like it, The logo looks better than the first time I saw it :D I still thing looks like a woman maybe modify it a little bit…
   The categories and the projects looks nice.

   Reply
2. dVyper says:

   January 18, 2009 at 10:56 pm

   On a laptop screen, that header takes up a noticable amount of real estate. Plus, all of those space-filling links which users might not need or want would be better suited to the side in my opinion…

   I can’t wait to see the full redesign :)

   Reply
3. Killua69 says:

   January 19, 2009 at 1:09 am

   I like the new header!

   Reply
4. Ink says:

   January 19, 2009 at 1:10 am

   This logo of yours makes you looks like a girl

   Reply
5. Awoke says:

   January 19, 2009 at 2:22 am

   The New header is really Awesome.

   Reply
6. Christian says:

   January 19, 2009 at 3:28 am

   First when I saw your new logo I thought : He’s Ferrari fan!!! ;)

   Reply
7. Shival says:

   January 19, 2009 at 9:25 am

   This is really cool. But add more stuff to the slide show and remove the useless links from the list.

   Reply
8. Ivan says:

   January 23, 2009 at 1:04 am

   Your logo is gay… Sorry, but I’m just being honest.

   Reply
9. New says:

   January 23, 2009 at 10:21 am

   Header is great, logo not so. Cut the head off and it’ll be fine.
   Also, everything in this page is like half a screen to the right… And on the left, blank.

   Reply
10. Marc says:

    February 7, 2009 at 8:02 pm

    Indeed a very nice header…

    Reply