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.

Backgrounds

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

HTML:
  1. <?php if (single_cat_title('',FALSE)=="Flash"){ ?>
  2. <div id="header_flash">
  3. <?php } elseif (is_single() and in_category(5)){?>
  4. <div id="header_flash">
  5. <?php } else { ?>
  6. <div id="header">
  7. <?php } ?>
  8.    <h1>
  9.     <a href="<?php echo get_settings('home'); ?>">
  10.        <?php bloginfo('name'); ?></a>
  11.    </h1>
  12.      <div class="description">
  13.        <?php bloginfo('description'); ?>
  14.      </div>
  15.     <div id = "pagelist">
  16.     <ul>
  17.     <?php wp_list_pages('title_li='); ?>
  18.     </ul>
  19.     </div> 
  20. </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

CSS:
  1. #header_flash{ 
  2.     margin: 0px auto;
  3.     width: 1000px;
  4.     color: #fff;
  5.     height: 200px;
  6.     background: url(images/flash_header.png);
  7. }
  8.  
  9. #header_flash a{
  10.     color:#fff;
  11.     text-decoration:none;
  12. }
  13.  
  14. #header_flash h1 {
  15.     color: #fff;
  16.     border: none;
  17.     font: normal 24pt verdana;
  18.     padding-left:230px;
  19.     padding-top:50px
  20. }

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.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

» WordPress themes are designs for WordPress - one of the most popular blogging software nowadays.
You will be pleasantly surprised by WordPress Themes provided by Template Monster. All of them are of professional design and high quality.

7 Responses to “Customizing WordPress header - part 2”

  1. AAR on October 6th, 2007 6:51 am

    Thanks! :D

  2. dave on October 10th, 2007 10:55 pm

    Exactly what I was looking for. Thanks!

  3. Timmy on June 28th, 2008 6:59 pm

    Thanks man :)

  4. pictures on July 10th, 2008 11:46 pm

    Thanks for the information.. Fixed my site with not problems.. Thanks again..

  5. Milad on August 7th, 2008 6:42 am

    Beautiful!
    Haven’t tested, but great idea! ;)

  6. Talker on October 19th, 2008 2:15 am

    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/

Leave a Reply




Trackbacks

  1. Customizing WordPress header : Emanuele Feronato - blog of an italian geek on October 4th, 2007 12:07 am

    [...] 10th, 2007 update: part 2 is [...]