How to properly hide the title of your blog?

This is one of the most common customizations that people want to do in their wordpress blog.

They want to hide their site’s title from displaying at their header. It is most probably because their header image already has it as part of the image itself.

Lets take a look at the most common approaches people take, for doing this.

Approach (1) : Delete the blog’s Title through Options Page

People go ahead and login to their wordpress, click on the Options and they look at the text box with the label “Weblog Title”. They just clear the text in that box and click on “Update Options”.
Start from
optionspage1.jpg
Click to Zoom!

and make it look like
optionspage2.jpg
Click to Zoom!

Wow ! That seems to work., isn’t it ?

Wait a minute, lets take a closer look !
As a result of your change, the following undesirable effects were created.

Issue #1 : Search Engines do not see the site’s title

You only intended your site’s title to hide from your vistor’s eyes, but now even search engine’s can not see your site’s title.
A site’s title enclosed in <h1> and </h1> tags, is one of the main things, search engines look at when they crawl around your site.
If the search engines do not know your site’s title, how will they display your site as part of any search results.?

Issue #2 : Site Title does not appear in the browser’s top bar

no-title-in-the-browser.jpg
If the user has opened many browser windows or browser tabs, he/she may not be able to find the window/tab that your website is on.

Issue #3 : Site’s Feeds do not display a title, either

If the user subscribes to your RSS Feeds, they also do not display your site’s title.
no-title-for-feeds.jpg
Some feed reader softwares also reject feeds that do not have a title.

Oh my God! This approach has some serious issues, isn’t it ?

Approach (2) : Delete the line from header.php

Somewhat knowledgeable users open up the header.php in the theme directory. They know what is the line that causes the title to display in the header.
They just look for

<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>"><?php bloginfo('name');?></a></h1>

and delete the whole line or make it

<h1></h1>

Yes. Now the site’s title do not appear in their header and they are happy !

Wait, They will still have the Issue #1 as we discussed for Approach #1.

Approach (3) : Hiding it through CSS Style definition

If we really think about the problem at hand, it is very simple. We want to hide the site’s title from the header of the site, as we already have the site’s title as part of the header image.
We only have to hide it from people browsing the site in the browser, and not from the search engines or feed readers.
Lets take a look at the CSS based solution for this.

Add

#header h1 { display:none }

at the end of style.css and save it.

Now let’s refresh the site and see if the title is hidden. It is still showing up? You have to clear your browser’s cache and refresh the page again.

Ok…Now it seems to work !

Is there any of the Issues 1, 2 and 3 as we discussed earlier ?

Nope !

Well, may be this is the proper way to hide the site’s title from the header ?

I believe so !

Disclaimer :

This would work in most of the wordpress themes [at least the ones that I created]. If it does not work in one of my themes, please go to Support Forums for my themes and if it is someone else’s theme, please contact the author of that theme.
Commenting on this post for help with your site, is not recommended.

Thanks.

92 Responses to “How to properly hide the title of your blog?”

  1. Nasarik says:

    display:none is a good work round, however, this can cause problems for screen readers. I use an absolute position to move the text from the page, something like this -

    position:absolute;
    left:-3000px;
    top:-3000px;

    You can apply this directly to the H1 or create a new id and doesn’t seem to cause any issue with screen readers. As you can see it simply moves the text 3000px out of the display area, hope this helps :)

  2. Rafael Aun says:

    Working good. Tks.

  3. thanks to sadish….its helpful to me…

  4. Zach says:

    Thanks so much! Your CSS solution worked like a dream for me. :)

  5. Zach says:

    Actually, I just realized that the title was removed from the home page, but not the other pages on the site. Does anyone out there know a fix to this?

  6. Dan says:

    try using this instead of the H1 script. Worked on my new Twenty Ten themed blog.

    #site-title {
    display:none;
    }

  7. David says:

    Thanks Nasarik. Worked like a charm!

  8. Momarchy says:

    It worked great! Thank You so much for the tip :)

  9. 509 Graphics says:

    Hi Dan,

    Could you describe where to use the #site-title code you mentioned? I’m running into the same problem as Zach where it removed the title from the homepage, but not the subsequent pages. I’m also currently running the Twenty Ten theme on a site.

    Thanks,
    509 Graphics

  10. Sadish says:

    509 Graphics,
    That code has to be added to end of style.css file.
    but remember, if you upgrade your theme at a later point, you may lose your changes.

Leave a Reply