How to Customize Your WordPress Header- A Blog Header Guy Tutorial.

Since starting BlogHeaderGuy.com, I answer this question several times a week, How Do I Customize My WordPress Header? So, I figure it's about time I just post a quick tutorial here.

I have a fictitious website called IMMaverick.com, a website that shares internet marketing tips for the make money at home niche.

I bought the domain name and installed wordpress to the domain. The default wordpress theme is very boring and since I want my blog to stand out from the crowd, changing the default header is place to begin. So, let's get started…

Step 1.

The first thing we need to do is get to the dashboard which is found at http://YOURDOMAIN.COM/wp-admin/ you'll need to log in with the username and password you setup when you installed wordpress.

Step 2.

In the left sidebar, you'll find the control panel and everything you will ever have to do with your theme takes place here. Scroll down until you reach the APPEARANCE tab.

Step 3.

There is a tab called CUSTOM HEADER, but this only works with the default header, giving you the ability to change the header color and the text color. I guess that technically does make it custom, but I have something else in mind.

Step 4.

Okay, so under the APPEARANCE tab there is an EDITOR tab. Clicking on that will open the Stylesheet, (also known as style.css). You are going to have to put aside your fear of coding for a few minutes.

The stylesheet is where design aspects of your theme header are specified. This holds true for most of the other themes available.

Scroll down the stylesheet until you get to the #header tag where you will see the header image spec'd, in this case in the images folder there is a file called kubrickheader.jpg. Looking in the root folder, the kubrickheader image is 760x200px. But if you look at the #headerimg tag, it clearly says the header is only 192x740px. That's because the header actually has the border and some of the background around it.

Step 5.

I went ahead a designed a custom blog header that used the larger dimension, but think it will look fine, we'll see.

In order to use this new header design, I need to put my design in the images folder, so I need to use an FTP client. I use Filezilla and go to the wp-content/themes/default/images folder and upload my header.

Step 6.

This is the place where most folks freak out if they haven't set aside their fear of design code. But its really simple. Just change out the name of the kubrickheader.jpg with the new header file name.

Okay, so that can't be right? Notice that the blog title is covering up the new header image. You can also see where the header is 10px wider on each side of the page content area.

First things first. If we just delete the blog title info from the General Settings tab. Our blog won't have a title and that's a big SEO, no-no. Using the All-in-One SEO or the Platinum SEO plugin is one way to handle this, but I've been using this technique with most of my blogs lately.

Scrolling down to the h1 spec's I add this line of code,

     text-indent: -9999px

This puts the title tag way off the page, but it's still there.

Step 7.

I didn't like the grey background so I changed it to match the header leaving the grey border around the page content area.

Well, there you have it. It gets less scary after you've done it a few times. In the meantime, I'm happy to help you if you get stuck, just shoot me an email from my contact page and I'll se what I can do to help.

Roy