≡ Menu
Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

One thing I don’t love about the Thesis Theme for WordPress is the page headlines. Usually when creating static pages, I’d rather not have the page headings appear ( i.e. – Home, Contact, etc. ). They’re not always bad, but the “Home” one always annoys me, and is kind of a giveaway that you’re using WordPress as a CMS.

You don’t actually want to REMOVE the page headings, as they are actually pretty important from an SEO perspective, but there’s a great bit of CSS that will hide them from visual display. The h1 or h2 headlines still appear in your code, the headline is just not visible to people who visit your website.

Add the following code to your Thesis custom.css file.

.custom .headline_area { position:absolute; top:-1500px; left:-1500px; }

But there’s a catch. Removing the “headline_area” will remove the headline from every page on your site, including your blog posts. Since the blog headlines are important for site navigation, I ended up adding back in a bit of code that brings them back. I’m sure there are several ways to isolate the Blog headlines, but I used the “hfeed” class, since it is used for blog posts, but not regular pages. The following bit of code works to

.custom .hfeed .headline_area { left:0; position:relative; top:0; }

What if you only wanted to remove the headline area from one or two pages? This is easy enough to do, too. In this case, you just specify the class for the page you’re working with. In this case, my home page had an ID of “post-6”. Just replace “post-6” with the ID of your specific page.

.custom #post-6 .headline_area { position:absolute; top:-1500px; left:-1500px; }

I don’t claim to be a master of CSS, by any means, but this code worked for me. This was all trial and error as I was working on a Cake website. Feel free to check it out to see these tweaks in action.

Thesis Theme for WordPress:  Options Galore and a Helpful Support Community
{ 21 comments }
  • hakan February 3, 2010, 8:07 am

    Why not just say display: none ?

  • Jeremy February 3, 2010, 10:52 pm

    From an SEO standpoint, you would generally want to retain the headline text in your actual code. Google adds extra weight to h2 and h3 tags, and your page titles are generally keywords that you’d want pretty heavily weighted. You could use display: none, but you’d lose that extra SEO benefit.

  • Michael K. Jensen February 28, 2010, 8:52 am

    Hi Jeremy.

    The following code are not working for me:
    .custom #post-6 .headline_area { position:absolute; top:-1500px; left:-1500px; }

    I have a page (Welcome) as a substitut for the Home page. I have tried post number (that seems to be 41), Welcome and Home, but that will not remove my header on my front page (Welcome).
    Do you have any suggestions?

  • Jeremy March 9, 2010, 6:01 pm

    Thanks for the comment Michael. Do you have Firebug for Firefox? That’s a great way to pick apart the code and see what lines you’ll need for your specific pages.

    For reference, I used this code to remove the headline from the home page at http://www.shellyscakes.net/ If you run Firebug, you can see that “post-6” is the ID being given to that headline area.

    It looks like your welcome page is post 41, so I would try using
    .custom #post-41 .headline_area { position:absolute; top:-1500px; left:-1500px; }

  • Chris March 22, 2010, 11:56 pm

    Jeremy –

    Excellent solution. I was previously hiding the H2 element and that messed up every other H2 on the page. This was a much better solution. Thank You for taking the time to share it.

  • Ashwin May 25, 2010, 11:16 am

    Instead of using:

    .custom #post-6 .headline_area

    assign a CSS Class to the page and use as:

    .custom .classname .headline_area

    It’s much cleaner!

  • O.C. Search Consulting August 18, 2010, 5:24 pm

    I was looking for how to remove the h2 from thesis and I found this page. I want to point out another reason why this approach is bad for SEO…it’s very possible that you will raise a Google flag for pushing the h2 way off the page. I believe that’s consider an old “hidden text” flag. Be really careful anytime you doing like -9999px etc..

    All I want to do is remove the h2 tag from the home page of the site I’m working on. The only solution I can think of at this time is to actually strip the h1 and h2’s out of the php code and add h1 and h2 headlines in my post and pages html….

  • O.C. Search Consulting August 18, 2010, 5:40 pm

    Hilarious. I just found your post on the Thesis 1.7 headline filter. Mmmmyeah….this works way better: http://thesislab.net/archives/headline-news-a-quick-intro-to-1-7s-new-headline-filter/

  • Jeremy September 9, 2010, 3:39 pm

    This post was written before Thesis 1.7, so I’m not sure if that was possible before then. Thanks for the link, O.C.

  • Edward Beckett September 15, 2010, 10:47 pm

    @Jeremy “From an SEO standpoint, you would generally want to retain the headline text in your actual code. Google adds extra weight to h2 and h3 tags, and your page titles are generally keywords that you’d want pretty heavily weighted.”

    I agree completely … However …

    ” You could use display: none, but you’d lose that extra SEO benefit.”

    I don’t think you’d actually ‘lose’ the benefit … you ‘may’ end up sending a red flag to Google though … it’s a well known trick to use display:none; to get on page keywords stuffed into the text and yet not show up on the actual display …

    Excellent post BTW :-)

  • Rob Holmes November 4, 2010, 6:33 pm

    Thanks for the post. It worked perfectly.

  • Paul January 22, 2011, 9:17 pm

    I’ve heard Google frowns on huge negative margins and display:none’s because of spammers attempts to spam the heck out of pages/websites.

    Thoughts?

  • Mark Vaudreuil February 18, 2011, 4:37 am

    I have been spinning my wheels for the last four hours trying to find a way to remove the page headline from a static page I am building with Thesis. Thanks for this information. My mind is now at ease! IT WORKS!!!!

    Peace!

    Mark Vaudreuil

  • Cary February 20, 2011, 9:38 pm

    Thanks, Jeremy! Just used this on a client’s site. I was nice to find a solution right away that didn’t remove headlines for Blog posts.

    http://tawannablack.com

  • Peter April 8, 2011, 12:12 pm

    Hey Jeremy,

    absolutely fantastic! Ive been using a variety of hacks including display:none where your solution is vastly more elegant. Thank you.

  • Penny May 18, 2011, 5:00 pm

    Thank you so much! I have been trying to figure out how to do this FOREVER!

  • Fareed Khan May 22, 2011, 6:05 pm

    Thank you very much friend…

  • Martin May 30, 2011, 9:37 pm

    Awsome, thanks!
    Finally, and it is so easy. CSS rocks!

  • Lindsay August 10, 2011, 12:49 am

    Hi Jeremy!

    This is a great code – the only issue is when I remove the headlines, my search results are blank.

    Do you have any suggestions? The headlines drive me crazy but I cannot afford to have a non-functioning search box.

    Thanks in advance.

    Lindsay

  • Dan January 25, 2012, 6:36 pm

    Jeremy,

    Great solution, but on posts headline I get a { margin: 0; padding: 0; } in the before_headline and after_headline areas. Is there a solution to this?

  • Corina March 18, 2012, 12:35 am

    I know this is two years late, but you are amazing! I’ve been trying to figure this out all day and your post was the first one to work. I love it! Thank you!

Leave a Comment