Correct Mystique Site Title Header

How to Correct WordPress Mystique Theme Site Title Header Markup

fix mystique theme h1 title error iconA sharp eyed user of the WordPress Mystique theme noticed duplicate <h1> headers on the front page.

The theme places the site title and tagline inside <h1> markup for the front page and blog page.

And of course, WordPress puts the page title in <h1> markup as well – so you get 2 instances of <h1> on the site front page and the blog.

Not good for SEO. There must only be one H1 on any page.

Funny thing is, the developer has commented the theme file responsible for assigning the title markup, in the code just prior to the offending lines of script:

“only on the front/home page, for seo reasons”

Change the Code to Fix Error

There are 2 files to modify. First is mystique/atom-core.php

Around line 1571 to 1573 where you find

// <h1> only on the front/home page, for seo reasons – CHANGED to H3
$tag = (is_home() || is_front_page()) ? 'h1' : 'div';

Change this to

$tag = (is_home() || is_front_page()) ? 'h3' : 'div';

To maintain consistency, also change the following in mystique/atom-hooks.php (around line 1522)

<h1 id="logo"><img alt="WordPress" src="<?php echo admin_url(); ?>/images/wordpress-logo.png" /></h1>

Change to <h3 id="logo"><img alt="WordPress" src="<?php echo admin_url(); ?>/images/wordpress-logo.png" /></h3>

You can use other values as well to fix the Mystique <h1> error.

You don’t have to use <h3>. Use any h value you want, as long as it’s not H1. Lower-order h3 or even h4, 5 or 6 is better.

You could even just use paragraph markup <p>.

You could instead create a new custom page template for blog and front pages, changing Page Title markup in the template to <h2>. Then leave the site title in the h1 tag.

But I think it’s a lot easier and quicker to mod the theme core file mentioned.

It’s Not an Uncommon Theme fault.

We see this error with a lot of WordPress (and other) themes, including expensive commercial themes. Come on theme coders – the rules of HTML markup are simple – there must only ever be one instance of <h1> on any page – including the website front page and/or blog.

me on google plus+Mike Otgaar

About Mike

Web Developer and Techno-geek Saltwater fishing nut Blogger

Posted on August 15, 2013, in WordPress and tagged , , , , , , , . Bookmark the permalink. 4 Comments.

  1. Please tell me how you changed Site Logo (On the upper side of this page)…
    I did what u said but it didn’t work

  2. Excellent Notes. As you read in request on the theme forum, I had changed it successfully after advice from an expert coder. However, it changed back to the h1 tag after I adjusted the logo. I lost the advice from the coder and was looking for directions. Your article was a lifesaver. Thanks so much for your generousity in helping others out of this dilemma.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: