3 Ways to Customise Your Website Header with Thesis

by Martin Malden

Thesis Logo. The header area of your website is incredibly important.

It’s the first thing that new visitors see and it sets the tone for the entire site.

Whenever I’m designing a new website for a client I always start with the header area and get their approval on that. Once that’s done, the rest of the site design simply falls into place.

So here are some ways you can use Thesis to create a cracking header – one that grabs your site visitors and draws them into your site.

Installing a header image

Version 1.8 of Thesis introduced a simplified way of adding a header image to your site:

Find and click the Header Image link in the Thesis section of your WordPress admin menu, and you’ll see this screen:

Thesis upload image screen.

Click Browse, select your image and click upload

Click the ‘Browse’ button, select the image you want as a header from your machine and click ‘Upload’.

Thesis will re-size your image (downwards only) if necessary and insert it in your header div, plus it will add your site name behind the image for a bit of SEO juice.

Simple and effective.

But you can do so much more

There are 2 other ways you can spice up your header, and both make use of the header div, which you can edit easily with either the Thesis Openhook plugin or the custom functions file.

Add a header image via custom functions or Thesis Openhook

An alternative to the Thesis Header Image screen is to manually add the header image to the header div using the custom functions file or the Openhook plugin.

This has the advantage of enabling you to add an image that does not take up the entire width of the screen.

That, in turn, will enable you to add other content to your header area – an opt-in form, a sub menu or an RSS feed button, for example.

If you’re taking this approach you will also need to define some styling for your header div in your custom stylesheet. This will define the background colour, font types, padding and so on.

So here’s the process:

Step 1:

In your custom CSS file define the style attributes for your header div. Details on how to use your custom CSS file can be found here.

Step 2:

Create the content and layout you want in your header div by specifying your image source, writing any content, adding any links (like a sub menu, for example) and positioning them all within the div.

You may need to create more divs to contain different elements of your content and position it effectively within your header div.

More details on how to do that here.

Remember to add alt and title tags to your image tag for better SEO.

Step 3:

If you’re using Thesis Openhook, click the Thesis Openhook item in your WordPress Admin>Appearance menu, select the ‘Thesis_Hook_Header’ hook from the drop-down menu and paste your code and content into the box.

Check the ‘Execute PHP’ box and click the Little Save Button.

When you check your site you may need to adjust the layout of your content.

You can either do this from within the header hook in Thesis Openhook or by adjusting the selectors and attributes you specified for the header div (and any other divs) in the custom CSS file.

Full details on using Thesis Openhook can be found here.

Step 3a:

If you’re using the custom functions file the process is the same, except that you’ll need to create and name a new function and wrap the content you’ve developed for your header div within PHP tags.

You’ll also need to add that function to your Thesis_Hook_Header hook.

Remember the health warning that goes with using the custom functions file – see it here.

Add a header image as a background to your header div

A third way you can make more effective use of your header area is to add an image as a background image.

In this case you would specify the image source in your custom CSS file, instead of your custom functions file or Thesis Openhook. For example:

.custom #header { background-image: url(http://yoursite.com/yourimage.jpg); }

The downside of taking this approach is that you cannot add alt and title tags to your image – at least not in a way that would be useful to the search engines.

The upside is that you can add any content you want to your header div, via Thesis Openhook or the custom functions file, and it will appear over the background image.

This would enable you to, for example, add a small logo image, which would float over your background image and to which you would be able to add alt and title tags.

And, using the same process we discussed earlier, you could add any other content or links you wanted to via Thesis Openhook or the custom functions file.

You could also use a small, repeating image as your background image.

By using the background-repeat: declaration along with your small image, you could give your header a patterned background that would load much more quickly than if you used a single image to cover the entire header area.

This is because the file being downloaded would be a fraction of the size of the larger image and the browser would simply repeat it across the header area.

Summary

By means of the Thesis Openhook plugin, the custom functions file and the custom CSS file, Thesis gives you full and easy access to your header div.

This enables you to edit it with ease and make the best possible use of this incredibly important area of your site.

Any questions give me a shout,

Cheers,

Martin Malden

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.

Comments on this entry are closed.

Previous post:

Next post: