Correct Mystique Site Title Header

Correct site title header and heading markup

Correct site title headers for WordPress themes. There should only ever be a single header level 1 <h1> instance on any webpage. When duplicate H1 markup was spotted in a theme I was using I decided to fix the theme site title. The theme discussed is the old WordPress Mystique theme.

Mystique is one of those quirky themes. The distinctive appearance made it strand out from the other free WordPress themes. When I started using Mystique it was just about the only WordPress.com theme that actually looked like a website not a blog. Later I used the self hosted version which had a lot more options. This article refers to using Mystique on self hosted WordPress sites.

How to Correct WordPress Mystique Theme Site Title Header Markup

Correct site title error for mystique themeA 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
if(!$tag)
$tag = (is_home() || is_front_page()) ? 'h1' : 'div';

Change this to

if(!$tag)
$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 you can 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 should only ever be one instance of <h1> on any page – including the website front page and/or blog.

More Articles about Mystique WordPress Theme

6 thoughts on “Correct Mystique Site Title Header

  1. 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.

    Like

    1. Thanks Conan
      Only thing – if the theme is ever updated, we all need to remember to put back our customisation or preferably use a child theme

      Like

  2. 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

    Like

  3. Hi. could U help to place a header image and background image in mistique. When I try to do it. I get problem. If The header image is installed and it’s seen. The background is transperenced. If it’s possible to see the background then the header is under the background and U can’t see the header image. Sorry for my english. thank you for the answer.

    Like

Comments are closed.