Edit your WordPress theme – Headers

Some of you out there really want to start your own arcade game blog, but are clueless about web design and therefore don’t understand how to customize the look of your own WordPress website. There are plenty of tutorials out on the internet on how to make your own WordPress theme, sifting through the good ones might be a challenge. Regardless of that fact, I don’t feel the need to rewrite them because customizing your theme is a time investment no matter what you do. You need to learn HTML, CSS and understand the purpose of each html file in the theme.

However, just about any themes out there typically can look like a completely unique website by just adding your own header graphic. I am going to show you how to edit the header in your newly downloaded WordPress theme to add your own custom designed banner graphic.

What this WordPress Theme Tutorial Isn’t

I assume for you to be reading this tutorial that you have your own domain, hosting space, have downloaded and installed WordPress and know where to upload themes and then how to activate those themes. I assume you know what a WYSIWYG editor is for editing HTML pages. You have already chosen one of the available standards, either Dreamweaver, a free HTML editor, or you have chosen to use Notepad and type out everything by hand. I also assume you are not a designer, but wish you could have a nice looking site, but are too cheap to pay for your own custom design. Ok, those are the assumptions.

Now, what you need to know about WordPress themes before continuing. If you have searched the internet for the one, best tutorial on editing a theme, it probably doesn’t exist. Every theme can be a little different. So, you will still need to know HTML and CSS code to be able to look and understand generally what is going on. This information will be more for those people who don’t want to make the effort and just want to make a half baked website, change one or two things and hit the ground running.

Here’s the scenario for this theme tutorial

We need to evaluate a WordPress theme to see if it fits our needs. Now, when I first look at this theme I can kind of evaluate how the header section is built. I am going to explain this thought with the hopes that when you are evaluating the thousands of perfectly good free themes out there you can pick out how the header is made, set your criteria for you own look of you banner and then evaluate a theme based on those criteria.

What would be a sample set of Criteria?

Here are a couple of things;

• Do I want a header that is a solid color the whole width of the page, or do I want my banner to be a fixed width?
• How much space should my header take up vertically?
• Do I want my website title to be real text or a special font that I need to make into a graphic.
• Will I have a tagline under my main title?

There’s four. I know there’s more criteria you can choose, but this will have to do for now.

Choose your WordPress theme

Ok. You have your own criteria, or you are using mine above. You are visiting WordPress theme websites choosing the theme that fits the answer to your criteria. You settle on a theme, you download it, you upload it to your webspace and you are ready to edit.

I don’t know what theme you’ve chosen, but we’ll need a sample theme to use for this tutorial. I chose the theme that was reference in the original email question, a WordPress theme called ‘Thematic‘ – Real creative naming, wow. I haven’t sat down and evaluated whether this is a good theme for every purpose, cross browser compatible, if all of the front end features work, etc. etc. That is beyond the scope of this post.

When I evaluated this theme I could tell that it was probably using either a solid fill to span the width of the website in a div, or it was using a background image in the body tag to get the full width striping. What this means is I may need to use some sort of repeating background that will span smoothly the width of the screen without seams. Make a note of that for the graphics portion later. Thematic also uses real text (If I can highlight and copy the text, it is real text not an image) and a tagline. I am ok with this, I will just plan for space in my background image for that text.

Evaluation done. Let’s edit the banner already.

Not so fast, you want to rush and want an easy solution, but nothing good comes from a hack job.
First, you need to install a debugging tool in Firefox that will help you immensely understand the layout of the section of the WordPress page you are working on. Are you on Windows and hoping to be a serious developer but don’t have Firefox? Here’s your sign.

Get Firefox and then go out and download a plugin for it called Firebug. This should install itself, a drunken monkey could figure this out. Don’t restart your browser when it asks, you will want a second plugin to use for this tutorial called Measure It. Install that plugin as well. Oh, and quit this theme tutorial now if you can’t figure the automated install out.

Once Firefox is restarted with your two plugins installed, bring up your website. Now, open your HTML editor of choice, and then open your theme folder and look for a file called header.php.
Inside of this file you will see something similar to this

Again, every theme is different and classes can be called anything, but typically you will see a wrapper div and a header div. Usually you will be editing the code for the header div, and most of the time, you won’t even need to edit this file.

Second, go back into Firefox and you should see a new icon for the Firebug tool (screen).

I am not going to get into a real in depth tutorial of how to use it, but this is what you will see initially. Firebug gives you a break down of the layered html in the page as well as the classes that go with each container. When you click or hover over a div block on the left, it will highlight on the page above and bring up the associated styles on the right.

We need to find the section that I have highlighted, so in this case if you roll over the ‘branding’ div, you will see where that is on the page and the defining class. We see that this container is 940px wide, but it doesn’t give us a height. (Which is good, height is a depreciated value in xhtml and shouldn’t be used when possible. Use margin and padding instead for the same purpose)

We need to find the height to know for our graphic. Oh, and note – Firebug tells us where the class is located in what file. In this case it is a file called ‘2c-r-fixed.css‘ and you can find this class on line 9. We’ll need that information later.

You should now also see a little icon that looks like this loaded into the lower left corner.

This is the ‘Measure It’ tool that allows you to measure pixels dimensions on screen. Click the icon once, everything should grey out, and then draw in your browser window. When done, click the icon again to turn the tool off.

What we want to do is measure the height of the area for the graphic. The blue at the top in the screenshot is the Measure It tool at work. As always, click the image for a larger view.

This is the approximate area we may want to make our static banner, or the part that doesn’t repeat. I measured about 244px, you measurements may vary a little but not much.

Editing the WordPress Theme CSS files?

Now, look inside a folder called library for a folder called layouts. In there you will find the ‘2c-r-fixed.css’ file. Look for your ‘branding’ class. This is where we will code in by hand your new background image that is going to be 940px x 244px. You will need to make one of your own, or you can download mine. I just used a generic graphic from the Juice Drops library (available for purchase online) to make my background. Here is that image, right click the image and save the actual 940px x 244px size.

I added some dark fading gradients so we wouldn’t see the edges of the graphic and therefore, not to have to worry about it repeating. (I had to change the background color in the header class to #0D181E to get the color to fade smooth)

Note: Before I tell you to edit the CSS file, one word of caution here. When evaluating themes you will probably figure out that some themes will never be updated, and some will. Some theme authors feel passionately about their themes to constantly add to them with new features, new variations on colors, etc. etc.

I am writing this tutorial with the assumption that you will customize the theme long term to your use and never update the original core files. If you feel like you don’t know much at all about WordPress theme editing and you might update this theme at a later point then you will want to research how to make an additional stylesheet file and update the linking to that file when you update the theme so you don’t lose your styling changes. These concepts are also out of the scope of this article.

End of public service announcement.

Ok, you’ve got your sized graphic, now let’s add a rule to the class. Anywhere between your {} brackets, type in this (Change the image path to your liking and where you put your image. I put mine in the theme images folder so my path goes up two directories);

background:url(../../images/header.jpg) no-repeat;

And this is how the result looks;

There, you’ve changed a background graphic in a WordPress theme

The original question that I had to my website did not ask how to change the header graphic. However, I have given some great advice on developing your own WordPress theme in this tutorial whether you realized it or not.

To review, those tips were;

• How to evaluate a theme from a background construction to fit your needs and skills
• Plugins to use in Firefox that make development for WordPress themes that much easier
• Using the existing classes to modify look without modifying dimensions of an HTML layout

Again, there isn’t an easy way to make your theme work for you. I can’t count how many hours I have spent on my arcade game theme for my WordPress blog, but I also am very proud of my work.

Roll up your sleeves, make good decisions, and learn well formatted and structured HTML. Trust me, it’s a worthwhile skill in any business to have on your resume, so spend the time. You might try out the CSS books from Sitepoint, those are some excellent tools that are written like the ‘For Dummies’ series explaning very simply in average person – non technical terms how some of this stuff works. Spend $30, save hours and hours of time, and maybe you can give back to the community in a month when you become and expert yourself.

Related Useful WordPress Tutorial Links

In the beginning were you lost because you weren’t familiar with the concepts suggested to know? Well, here are some other good explanation tutorials. They aren’t completely beginner level tutorials, but they are still good.

Explaining the hierarchy of a WordPress theme and the necessary pages
http://www.killersites.com/blog/2008/creating-wordpress-themes-from-scratch/

Here are some similar arcade posts

• Custom Super Bug WordPress Theme
• Donkey Kong WordPress Theme – Ver. 1
• Wrap text around your arcade images
• Arcade Game Inspired WordPress Theme – BCPArcade.com
• Atari Command Free WordPress Theme

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.