Customizing WordPress header – part 2
This is not a proper tutorial, but an additional hint about WP customization.
In the previous part I told you how to create a custom WP header. Following that tutorial you should be able to create your own custom header.
But obviously every blog has a custom header. How to differentiate from the masses?
How about having a different header for every category in our WP blog? Without installing any plugin? (I made the last question because I don’t know if there is already a plugin doing this job, but anyway it may be useful learning how to do it on your own)
Let’s start preparing the background images.
For this example, I am using those two backgrounds, one for the “default” pages, one for the pages about Flash.

Now it’s time to edit the file header.php located into your wp-content/themes/theme_name directory.
This is how to change what I coded in the first part
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php if (single_cat_title('',FALSE)=="Flash"){ ?> <div id="header_flash"> <?php } elseif (is_single() and in_category(5)){?> <div id="header_flash"> <?php } else { ?> <div id="header"> <?php } ?> <h1> <a href="<?php echo get_settings('home'); ?>"> <?php bloginfo('name'); ?></a> </h1> <div class="description"> <?php bloginfo('description'); ?> </div> <div id = "pagelist"> <ul> <?php wp_list_pages('title_li='); ?> </ul> </div> </div> |
Line 1: Check if I am in the Flash archive. The function single_cat_title displays or returns the category title for the current page and has two arguments: the first is the text to output before the category title, the second is a boolean value that displays the category title if true, or return it if false. In my case, I have no text (because I don’t want to output anything) and I set to false the second argument because I need to retrieve the result of the function. This result is checked to see if it’s “Flash” (the name of the category I want to change the header).
Line 2: Header to show if I am in the Flash archive page
Line 3: If I am not in the Flash archive, I need to determine if I am in a single page categorized as a Flash page. That’s why I am using the in_category function. It returns true if the current post is in the specified category. Unfortunately this function only accepts the category id as it is stored in our WP database, so I cannot write in_category("Flash"). I need to write in_category(5). Why did I write “5″? Because 5 is the internal id of my Flash category. You can see your internal category id in your WP admin under Manage->Categories.
And here I had a complication. I experimented that in_category returns true if in the page there is at least one post filed into the selected category. This means that in my homepage, or wherever I should have a “Flash” post (or even an excerpt), I have a “true” value.
Since I want the header to appear only in single pages, I invoke the is_single() function. This function returns true if any single post page is being displayed. So if it’s a single page and it’s a Flash page…
Line 4: Show flash header, like in line 2
Line 5: If I am not in a case mentioned above….
Line 6: Show default header
Now, I just have to write the css for my new flash header, so I have to open the style.css located in the same directory of header.php and add this code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#header_flash{ margin: 0px auto; width: 1000px; color: #fff; height: 200px; background: url(images/flash_header.png); } #header_flash a{ color:#fff; text-decoration:none; } #header_flash h1 { color: #fff; border: none; font: normal 24pt verdana; padding-left:230px; padding-top:50px } |
That is the same of the one I wrote in part 1 except line 6 that displays my alternative background.
That’s all. You can navigate my blog and you’ll see the new header when you browse Flash content.
A bit of patience, and you can have a custom header for every category.
I like WP… see you soon with another tip.
You will be pleasantly surprised by WordPress Themes provided by Template Monster. All of them are of professional design and high quality.





(3 votes, average: 4.67 out of 5)








This post has 10 comments
Customizing WordPress header : Emanuele Feronato - blog of an italian geek
[...] 10th, 2007 update: part 2 is [...]
AAR
Thanks! :D
dave
Exactly what I was looking for. Thanks!
Timmy
Thanks man :)
pictures
Thanks for the information.. Fixed my site with not problems.. Thanks again..
Milad
Beautiful!
Haven’t tested, but great idea! ;)
Talker
Hello,
Going to give this info a try. Want to modify/change my sites header. Much of what one finds is way beyond what I can or want to try.
Site of mine needs some color in the header.
Will be back with followup.
http://thetalker.org/
Julia
hello! I find your post very useful and insteresting. I have a little problem with a header of a website I’m designing. I see the flash header in firefox but not in explorer… the flash header has some buttons. Could you please help me with this? I dont understand what happened…
thank you very much!!!!
Greg Boutin
At last what I was looking for! Grazi!
A question: some of my posts (in a new blog I am creating that will concentrate all of my posts from several blogs) belong to more than one category, each with its own skin. I have to customize your code to avoid a category conflict. How would you suggest I do that to avoid any issue?
Monkeyweb-design
Thanks for this – great info, I am off to try it out !