Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Tutorials and WordPress.

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


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

#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.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.