Removing the Headline Area from Thesis Theme

by Jeremy on January 21, 2010

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

Related posts:

  1. Thesis 1.7: New Features
  2. Customizing Your 404 Page with Thesis & HostGator
  3. Basic Tweaks for the Thesis Theme Round 1
  4. Tweaks for the Thesis WordPress Theme Round 2

{ 8 comments… read them below or add one }

hakan February 3, 2010 at 8:07 am

Why not just say display: none ?

Jeremy February 3, 2010 at 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 at 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 at 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 at 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 at 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 at 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 at 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/

Leave a Comment

Previous post:

Next post: