Titles

We often see requests on various forums asking about removing the blog and or page titles, but the advice we have seen for removing the page title often suggests just hacking or deleting code.

If we follow the steps in this tutorial we will be able to hide the title and description in our templates with css additions, and preserving all the original code in our header.php.  

The blog title is very important as it is indexed by search engines, removing the title could damage our search traffic, so we will deal with the blog title and page titles without doing any damage to our theme, search traffic or ranking.

Site Title and Description

The search engine bots do not look at the visual page but the html code, so we can keep both the bots and our visitors happy by just hiding the titles from the visual page.

In our child theme we open up our style.css file and add at the bottom some styling blocks to hide the Site Title and Site Description, that is all we need to do, and remove the bottom border style for our top menu.

/* hide site title */
#site-title {
    display:none;
}
/* hide site description */
#site-description {
  display:none;
}

The change to the style.css above only hides the blog title and description, we want to hide the page title but not the title on the single blog posts or achives.

To do this we will edit only the page.php file, this will affect all pages and templates made from this file, if you want some pages with titles and only the top level pages without, create a new template page with the title hidden and apply this to top level pages.  

Page Title

For the page titles we just copy not cut the page.php from the twentyten folder to our twentyten-templates folder, we are going to add a new inline style to the page title, this will hide it from view.

Open the new page.php and find the lines with the text class=”entry-title” (lines 24 and 27) , we are going to add the inline style=”display:none;” and this will hide the title from displaying on the pages to our visitors.

<?php if ( is_front_page() ) { ?>
      <h2 class="entry-title" style="display:none;"><?php the_title(); ?></h2>
<?php } else { ?>
      <h1 class="entry-title" style="display:none;"><?php the_title(); ?></h1>
<?php } ?>

the first line of code is a WordPress call to see if we are on the front (home) page, if this condition is true the a the blog title is styled with the ‘header 2′ styling else (not home) header 1 styling.

The code we have added tells the browser to hide the header title section, no space is reserved on the page for the hidden section.

titles

Using Firefox and Firebug we can discover the names of the Title and Description classes in other templates not just twenty ten.

Spending time with FireFox and Firebug and exploring other websites, will give us a better understanding of how other templates are structured, we can sometimes discover what plugins a website is using for that nifty slideshow or new feature.  

Notice

Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.

15 thoughts on “Titles

  1. Great stuff! I feel like I’ve learned more from spending a few hours with your tutorials than I have anywhere else.

    I see the benefits to hiding the site title and site description as one could create a custom banner with that information in it but not miss out on the SEO benefits of keeping the tags/content. But I’m curious as to why someone would want to hide the page titles? Aesthetics? Also, why style it in-line and not in the stylesheet?

    Thanks and keep up the good work.

    Cheers,
    Brad

    • The same theme element is used for pages and posts that is why we style inline, as we then control where we hide it.

      We may want to hide the page title as we have clicked a menu item called “About” why then do we need a big label to tell us what we selected?

      Websites are about real estate, the title of a post could mean the difference between a read or a bounce, so we do not mind the post title taking the space, but a page title is a waste of important space.

  2. Hi
    Re: Title visual removal
    This is a problem I’ve been trying to solve. Unfortunately your instructions were to simple for me
    so was unable to follow them to success. I have a certain amount of HTML knowledge but was unable to figure it out

    Could you expand the the instructions for us peons can follow you along

    Thanks

    Robert

  3. Hi. I’m using a custom header image with a white background and would like to know how to remove the bold black border on the top of the header image. Thanks for these tutorials, they’re very easy to follow.

  4. You say “For the page titles we just copy not cut the page.php from the twentyten folder to our twentyten-templates folder, we are going to add a new inline style to the page title, this will hide it from view.”

    Under themes, I see “Twenty ten” folder with “page.php” but I can’t find a template folder within twentyten or any other folder that would make sense to copy it to. Can you help please?

  5. You said,..

    “no space is reserved on the page for the hidden section”

    However, when I modify the loop-page.php file with the inline style, it just removes the title (which is great), but keeps the white space reserved for the title.  Is there a way to modify this so the white space is removed also?

  6. The first part of this post did not remove the solid line under the pagemenu for me, and i don’t understand why it would since that line is part of the pagemenu styling. I had to go into style.css and remove the pagemenu styling “border-bottom: solid 1px #333;”.

    • You should not do this in the parent theme, no need to edit an existing line, alway add you changes at the end of the stysheet, and this post is as you say not about the menu.

      All you need to do is add a new style with the border set as none, lets look at the #branding image in the parent we have.
      #branding img {
      border-top: 4px solid #000;
      border-bottom: 1px solid #000;
      display: block;
      float: left;
      }

      In our child theme we just add:
      #branding img {
      border-top: none;
      border-bottom: none;
      }

      Or we can just add in our child theme style.css:
      #branding img {
      border: none;
      }

      HTH

      David

  7. I’m desperately trying to implement these CSS edits (especially making the title invisible), but am not having any sucess. I’ve followed the instructions closely, but the title still remains after the edits. I’m using the Raindrops theme. Is there something I’m missing, besides a brain?

    Great tutorial btw!

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tutorials 2010

templates

For this series of tutorials we need to have a local WordPress setup, this will enable easy deployment of the theme files, this series will be added to over a few weeks, rather than one big set of files we … Continue reading

Read More