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.
style.css
stylesheet./* hide home page title */ .home h2.post-title { display: none; }
style.css
and switch to your browser. Refresh the home page screen.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 earlierh2.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 targetedSo now what does our home page look like?
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.