Software, Strategy, Success
Enter your contact text

Add a Graphic Header to the Thesis 2 WordPress Theme

The new Thesis 2 theme for WordPress does not come with a ‘box’ to add a graphic header. In this tutorial I’ll show you how to add one.

The Thesis 2 Theme

Thesis 2.0 is  has one most innovative template editors ever created on the WordPress platform. It packs a lot of editing power behind a very simple drag-and-drop interface, which makes creating different templates for your theme’s “skin” very straight forward.

Thesis 2 Skin Editor

Thesis 2 Skin Editor

Thesis 2 uses the concept of “boxes”, which you drag and drop onto a template canvas to build up the structure of that template. Thesis 2 come with a number of pre-built boxes, but if you are missing some functionality it’s very straightforward to create a custom box to serve your needs.

Text Boxes can contain anything from simple text, to HTML code, to PHP programming code, so they are a great starting point for adding new HTML elements to your website, such as a graphic header.

Thesis 2 Text Box

Thesis 2 Text Box

What’s VERY cool about Thesis boxes is that developers can create a vast library of boxes, each containing a specific functionality, and make them available to the Thesis 2 user community. All you do is download the box you want from the developer’s website and upload it into the Thesis 2 skin editor.

As of writing this post, I have not found any boxes available that can create a graphic header. So, you’ll need to do it yourself.

The Missing Thesis 2 Graphic Header box

To be honest, I was a bit dismayed that a box to add a graphic header to a Thesis skin was missing from the list of standard boxes. I’d have thought that this would be a common feature most Thesis 2 theme owners would want to have.

Any how, it turns out that, if you know a bit of basic HTML coding, it’s very easy to do.

I show you exactly how, step-by-step, in the following video:

[youtube button=”1″ position=”1″ display_tube=”1″ num_display=”4″ collect=”1″]http://www.youtube.com/watch?v=gs-I-oMoIh8[/youtube]

In the video, I show you how to type the HTML code you need to create an “image tag”. Here’s that code below for you to copy and paste, and modify for your own purposes:

<img src="http://www.lucrativeim.com/wp-content/uploads/2012/11/lucrative-internet-marketing-banner-900x166.jpg" width="900" height="166" alt="Lucrative Internet Marketing" />

BONUS!

If you want to make this new graphic header clickable, to take visitors back to the Home page of your website (a very common shortcut), then you’l need to surround the <img> tag code with an HTML <a> tag, as shown in bold below:

<a href="/"><img src="http://www.lucrativeim.com/wp-content/uploads/2012/11/lucrative-internet-marketing-banner-900x166.jpg" width="900" height="166" alt="Lucrative Internet Marketing" /></a>

Modifying all your Thesis 2 skin templates

As I explain in the video, you’ll need to add the new “Graphical Header” box you create to each template of your website. The Thesis 2 skin editor will remember all the boxes you’ve created, so adding them to the other templates in the skin is now just a matter of drag-and-drop.

It wasn’t immediately obvious to me how to access these different skin templates at first. As I discovered, you’ll need to click the Large button in the top left-hand corner of the skin editor screen:

 

Thesis 2 Template Chooser

Thesis 2 Template Chooser

Make sure you save your work evert time you edit your template by clicking the big green ‘Save’ button at the top right of the skin editor window!

A Happy WordPress User

As you can see at the top of this website, I have a clickable graphic banner at the top of my theme and I’m very happy. I’m looking forward to see what new boxes, skins and ‘packages’ (skin styles) will emerge over the coming months.

Thesis 2 in a very new theme for WordPress, but it’s off to an awesome start – even if you have to roll your own graphic header for now!