I have noticed quite a few hits over the last few days from people looking for how to make a header graphic for a WordPress blog. I wrote a couple of posts a few days ago about making your header graphic a link, and that has been showing up in Google for this search query. Anyway, I thought I would take a couple of minutes and show you how to set up your own header graphic in WordPress.

The first thing that you have to do is figure out where your header graphic is stored in your theme directory. There are a couple of ways to do this. The easiest way is to load the theme, and then load your site. Right click on the header graphic and choose “View Background Image” (in Firefox). This will open the graphic up in your browser, and show you the web address of your header graphic. You can save this to your hard drive and open it up in a graphic editor if you just want to edit the graphic that is already there (as the first example I give you below). You need to figure out the size of your graphic, as you want to keep your replacement graphic the same size (it is much easier this way). You can also get the location and size of your graphic from your CSS file…just be careful when messing around with this file, as you can mess up your whole blog very quickly by changing the wrong settings (yes, I speak from experience!)

The next thing you have to decide is what kind of graphic you are going to need. Whatever you choose, it has to fit in with the theme of your blog. For example, on this blog, I only made a small change in the header graphic. Originally, it appeared like this (click on the graphics to see a larger version):

I reworked the original in my graphics program to look like this:

On another blog, I wanted a completely different look, so I created a whole new header graphic to put in the place of the original header graphic. The original header on that blog looked like this:

In its place, I created this header graphic:

When you have your new graphic ready, you have to upload it into the same file that your original header graphic was in. To be on the safe side, first rename the original graphic. I usually just add a number into the name to preserve the graphic. You don’t want to overwrite the original graphic, just in case something goes wrong and you want to revert to the original graphic.

Next, save your new graphic with the same name as the original graphic, and upload into the same folder on your server as the original graphic. You must use the same name as the original header, or you will have to edit your CSS file to call in the right file. You can use the control panel of your web space provider, or an FTP program to upload the new graphic to your server. Once uploaded, if you have done everything correctly, the graphic should show up in the header of your blog!

If you don’t have a good graphics program for editing, or creating great web graphics and headers, check out Xara. This program has a lot of functionality (comparable to Photoshop) and at a reasonable price. You can get Xara Xtreme for only $89. This is what I currently use, and I like it a lot!

Good luck getting your header graphic set up just the way you want. This can change your whole blog’s look, giving it a unique appearance, which is exactly what you are looking for!

Yesterday, I was trying to work on the design of a couple of my blogs, and ran into the problem of trying to make my header graphic a clickable link back to my homepage. I don’t have much experience with either HTML, or editing the CSS Stylesheet, so it was not surprising that everything I tried on my own failed. Instead of having a clickable graphic, I ended up with no graphic at all.

So, I did what any rational person would do…I Googled it! I came across a great site that gave me just the information I needed, and I was happy to find out that it wasn’t going to be too difficult to do. It turns out that there are only a couple of lines of code that have to be inserted into the code to make the header a link.

This is important to do because the graphics that come in most WordPress templates leave a lot to be desired. Most of the time, you will want to create, or have created for you, a graphic that you can use to customize the template to your theme. Most of the time, this means that you will not want the default text to show on your graphic, as you will probably design that yourself as well.

First, go into your Stylesheet and look for a block of code that looks like this:

h1 {
margin: 0px;
padding-top: 5px;
padding-left: 5px;
text-align: left;
font: 220% “Book Antiqua”, “Times New Roman”, georgia, times, serif;

Now, you want to enter one line of text immediately following the “{”. Type: “display: none;”. Make sure you don’t forget the semicolon! So now, it should look something like this:

h1 {display:none;
margin: 0px;
padding-top: 5px;
padding-left: 5px;
text-align: left;
font: 220% “Book Antiqua”, “Times New Roman”, georgia, times, serif;

Remember, your code may be a little different, as this defines the text that will appear on the graphic you have created. What this line of text does is tell the text to not appear at all. So, it will still show up as the title of the page, but will not actually appear on your graphic. Make sure and save your template before moving on to the next step.

Next, you will want to go into the “header” element of your template, and make another small change. You want to look for the line of code that says:

<div id=”header”>

You want to delete that line, and insert in its place:

<div id=”header” onclick=”location.href=’http://YourDomainName.com/’;” style=”cursor: pointer;”>

Make sure to insert your own domain name in the line of text so that it will link to the right place. On one of my templates, the “header” was named the “masthead”, so if you find something like that, just change “header” to “masthead” in the line of code above. Make sure and save your template, and now your header graphic should be a clickable link.

This will improve the look and functionality of your site tremendously. You can use a template that is used all over the internet, but if you make some changes to personalize it, your blog will stand out from all the others!

Though this is pretty easy to do, you may want to go over to 1Cat.biz, and see the video that was created to walk you through the process. He also has a cool WordPress plugin that you will want to get and use…I will be adding that to my “to do list” for my blogs soon!

WARNING:  If you are new to editing templates, make sure to copy all the code from your template and paste it into a text document.  Save that document so that you can always go back, copy it into your template, and have it to revert to if anything goes wrong.  It is always better to be safe than sorry!

There are a few things that every blogger should know when it comes to publishing posts that will make their pages look better. As I have been surfing around today, there have been two things that have stood out to me. These two things will either affect the aesthetics of your page, or cut down on the readership of your page.

The first one is failing to word wrap a picture. I have seen pictures inserted in the middle of text, making it very difficult to follow. It is evident that the blogger did not know how to word wrap the text around the graphic. I am no expert on html, but I have learned a couple of things, so perhaps this will be of benefit to you.

The code for word wrapping a graphic is pretty simple…it has to be if I can do it. It is:

<img src=”http://www.imagelocation.com” align=”right” border=1 hspace=10 vspace=10>

You can adjust how closely the text comes to the graphic by increasing or decreasing the hspace and vspace variables. The higher the number, the more distance there will be between the graphic and the text. If you want to link that same graphic to another web address, then you can use this code:

<a href=”http://www.linklocationhere.com” target=_new><img src=”http://www.imagelocationhere.com” align=”right” border=1 hspace=10 vspace=10></a>

You can align the picture to the left or right by changing the “align” variable. Simply change the “right” to “left” and the graphic will be aligned to the left hand side of the page.
The second big problem that I see on a lot of pages is also addressed in the second string of code above. Notice, in the link code, after the link location close quotes, there is a “target” tag. In this case, it is “target=_new” This tells the browser to open the link in a new tab (for Mozilla, or IE 7) or a new page for a version lower than IE7. This is important because you don’t really want people navigating away from your page to visit another, and then forgetting about you. If you use this tag in all of your links, your page will stay open behind the new page, thus giving your visitor the opportunity to come back and look around a bit more. Outgoing links can be good, but you want that reader to come back and finish what you have to say, after they look at whatever you wanted to link.

Both of these design elements are important. I think a page that has pictures and graphics scattered around haphazardly looks very unprofessional. It is possible to place them exactly where you want them–exactly where they improve the look of your page. As for the links, just think how often you surfed away from a page through an outgoing link, and then never returned to the original page because it was no longer available without clicking your “back” button 20 times!

Now, let me give you a couple of examples for what I am talking about. First, notice that the graphic in this paragraph is seated neatly to the left of the paragraph, with the words wrapped around it. This makes it fit in, and become a part of the “story”. It is easy on the eyes, and looks as if it belongs (even though it has nothing really to do with the post!) As you can see, there is plenty of space at the right side of the graphic, as well as below it. It fits in nicely, and does not distract the reader from the article. If the graphic is a link, you should make it to open in a new window, as we have said before. You want to make sure that all of your graphics are assigned a place in the layout of your story, so that they can add to what you are writing. Under most circumstances, if the graphic does not add to your purpose in some way, you should just leave it out!

Now, what happens if I don’t align my graphic correctly? It stands out like a sore thumb. It detracts from the purpose of my article itself, and it causes the paragraphs to be aligned poorly. This ends up looking terrible, and makes it clear that you don’t know how to make the graphic look good. If you did, you’d never leave it like this!

Now, look at the links themselves. Here are 2 links, the first will open in a new window, and the second will open in the same window. I know, if I use the first, the reader will have to come back to my site. Even if it is only to close the window eventually, he will still have to put his eyes back on my page–which may make him read something else that I have written. Who knows what that will eventually lead to. If your site is selling different products, you may make multiple sales, where you would only have made one if your link opened in the same window!

First Link
Second Link

Now, if that second link actually led away from my site, I know you’d never be back. If I were trying to sell you something, I’d have lost the possibility of a second sale. So, remember how important these things are as you are writing your posts, and creating your websites!

The best news is that if you are using the latest version of WordPress, all of this is built into the composition tool. Simply click on the insert graphic button, and then enter your source code for the graphic location. Put in the alignment that you want, along with the border, vspace, and hspace. If you want to link the graphic, simply click on the picture to select it, then click on the “link” button. Enter the location of the link, and choose to open in a new window. Make sure and add alternate text, and then you are done. WordPress will put the graphic into your post, and add the link. You don’t even have to know any html. So, if you aren’t running WordPress for your blog, check it out!