Time for action – using CSS to hide our home page's title

Before we can hide our home page title, we'll need to change the settings on our site so it displays a static page as the home page.

  1. In the WordPress admin, go to the Reading screen via the Settings menu:
    Time for action – using CSS to hide our home page's title
  2. Change the Front page displays settings so that your site displays the About us page as the home page:
    Time for action – using CSS to hide our home page's title
  3. Click on Save Changes to save your settings.
  4. Switch to your browser and visit the home page of your site. It's now changed:
    Time for action – using CSS to hide our home page's title
  5. Now open your theme's style.css stylesheet.
  6. Above the media queries in your stylesheet add the following:
    /* hide home page title */
.home h2.post-title {
  display: none;
}
  7. Save style.css and switch to your browser. Refresh the home page screen.

What just happened?

We changed our Reading settings to display a static home page, and then we added some CSS to hide the home page title on that page:

  • .home targets the home page only, the .home class is generated by body_class() which we used earlier
  • h2.post-title targets the h2 element in the loop, which displays the post title of any posts found (in this case actually a page, but that's not important)
  • display: none tells the browser not to display the content we've targeted

So now what does our home page look like?

What just happened?

The title isn't there anymore! What's left would need some styling as the margin between our image and our content is a bit small, but the CSS has done what we set out to achieve.

Now let's look at the HTML that WordPress generates on the home page. This is just a snippet of the full page HTML showing the elements affected by what we've just done:

<div class="content left full">
  <article class="post-16 page type-page status-publish hentry" id="post-16">
    <h2 class="post-title"><a href="http://rachelmccollin.co.uk/opensourcemagazine/" rel="bookmark" title="Permanent Link to About Us">About Us</a></h2>
    <div class="entry-content"><!--//post-->
      <p>Lorem ipsum...

The title is still output in the markup—it's the line beginning <h2 class="post-title">. This means that anyone viewing our site without CSS, either because they've turned it off or they're using assistive technology such as a screen reader will still see or hear that title.

We want to remove the title altogether, so we use a conditional tag instead.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.143.3.208