How To Resolve The Artisteer 3 Header Issue

As you know, Artisteer 3 is great software to create professional templates for WordPress driven websites. I already wrote a review of the newest version. If you read that review, you’ll know that there was 1 minor issue, and that’s the use of header tags in Artisteer 3.

UPDATE January 7th 2012: in the newest version 3.1 there is a built-in solution to solve this problem without having to change the code. You can read that article here.

In this article I’ll show you how you can easily resolve this problem yourself! All you need is a little knowledge of html / php and css.

What’s the importance of Header tags?

We use header tags to define the titles in a web page. The most important header tag is the H1-tag. Then you have H2-tags, H3-tags, H4-tags,… When Google indexes a page of your blog or web site, one of the first things Google checks is the H1-tag because the H1-tag should be the most important title of your page.

You can take advantage of this and give every page a unique title (= a short description where the page’s about) between the H1-tags. Using the header tags the right way will result in a higher place in the Google search results! 

On the other hand, if every page has the same title between the H1-tags, then it’s not clear for Google what the page is about. This will result in a lower place in the Google search results. And that’s the problem of Artisteer 3, it places the blog title between H1-tags.

The use of Header Tags in Artisteer 3:

Out of the box, Artisteer 3 uses a H1-tag for the blog title and a H2-tag for the article title. The focus is on the blog title (WordPressNinja Demo) which has the H1-tags. Also take a look at the subtitle of our blog title (Local WordPressNinja Demo) which has H2-tags.

The way it should be:

The right way to use the header tags is to use the H1-tag for the article title, so the article title gets the focus! Title and subtitle of the blog are between span-tags.

How to resolve this?

Before we start to change our Artisteer 3 headers…

To change these files, you need an html editor. You can use an external editor, but the build in editor also does the job just fine! You can find this editor under “Appearance” in the left menu (1).

On the right you can choose which file (template) you want to edit (2). The selected template appears in the editor screen (3). Save your changes by clicking on the “Update File”-button (4)

Step 1: create a copy of your theme!

First of all, before you start, be sure you have a copy of your current theme. If not, make one! If something goes wrong, you still have the original theme.

Step 2: Changing the blog title and subtitle

Nex,t we are going to change the code of the blog title and subtitle.

Open Header.php and look for this line:

<h1 class=”art-logo-name”><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

Replace the H1-tags by SPAN-tags, like this:

<span id=”a-title” class=”art-logo-name”><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></span>

Don’t forget to add an id to the span tag!

Do the same for the H2-tags; look for the following line:

<h2 class=”art-logo-text”><?php bloginfo(‘description’); ?></h2>

And replace the H2-tags by SPAN-tags like this:

<span id=”a-subtitle” class=”art-logo-text”><?php bloginfo(‘description’); ?></span>

Don’t forget to add an id to the span tag!

Now we still have the change the css, so open the Styelesheet (style.css).

• Search for h1.art-logo-name and replace it everywhere by span.art-logo-name
• Search for h2.art-logo-text and replace it everywhere by span.art-logo-text

Step 3: Chaning the article title

Open wrappers.php and find the following code:

<h2 class=”art-postheader”>’.$title.’</h2>

And replace the H2-tags by H1-tags:

<h1 class=”art-postheader”>’.$title.’</h1>

Conclusion

As you can see it’s easy to improve your blog’s and page’s SEO. It’s a pitty Artisteer 3 still does it wrong because it’s less good for SEO. But by following these steps you’re able to solve the Artisteer 3 header issue yourself!

Download a free trial of Artisteer 3

You can download a free trial of Artisteer 3 here

Related Posts