Fix title and h1 elements for Twenty Ten theme

[mikeschinkel]

There are several problems with the Twenty Ten theme related to use when a static front page is used. I have attached a patch to resolve these issues.

The issues include the display of the page title on a static home page, which should be omitted, and the <div id=site-title> in the header should instead be an <h1> element when on the front page. I made these fixes in page.php and onecolumn-page.php.

In addition when using a static home page the title element gets "<site-name> | <site-description>" for both the front page and the posts page. It should get it just for the front page and for the posts page use "<post-name> | <site-name>" instead.

Finally, I added two helper functions in the function.php file: is_root_page() and the_header_title_element().

This patch addresses use-case applicability (i.e. removing the page title from the front page) and improved semantics/optimized seo (using the <title> and <h1> elements on the front page as search engines would expect and to help search engines differentiate between front page and posts page.)

The patch may not be coded as the core devs would like and that's okay but these fixes really do need to be added one way or another. Please.

[mikeschinkel]

Patch to resolve <title> and <h1> issues with Twenty Ten theme.

[Utkarsh]

Changed a few things from Mike's patch.

function is_root_page() { 
   return (is_front_page() || (is_front_page() && is_home())); 
}

Replaced this with using an is_front_page() call, as it means the same.

[mikeschinkel]

@Utkarsh - Good catch. I refactored and refactored didn't realized it was the same thing.

[dd32]

Personally, I'm a huge -1 to this patch.

I'm against changing element types based on the type of page being displayed.

I'm also against hiding the title on front-page page's, Whilst i've removed it in the past for some installs, for a lot of people, they expect the title to be displayed.

Those that really want to hide it, can do so easily via CSS right now or remove it in a custom theme..

[mikeschinkel]

Replying to dd32:

Personally, I'm a huge -1 to this patch.

I'm against changing element types based on the type of page being displayed.

Figures. This is the first thing I have to fix with most themes. I thought it was because theme developers were just being lazy, but evidently it's actually a preference?

Why are you against this? Is it a personal preference or is there codified best practice somewhere I can read that explain why this isn't the best approach?

It may be less "elegant" from a coding perspective but in my opinion it's the thing you want 99% of the time (and I've been coding business sites for the web since 1994.) The home page is fundamentally different than all other pages; it is the root page. <h1> has become the convention for "the most important description of this page", especially for search engines (this is white hat SEO.)

FROM: ​http://stackoverflow.com/questions/268475/h1-in-article-page-site-title-or-article-title
Six Votes: "On your blog's home page, I would use H1 to denote the site title and H2 for the titles of the individual blog posts that are published on the front page."

FROM ​http://prandall.com/2009/02/06/the-h1-debate/
"I do agree, there are certain pages that don’t have a specific main heading. For example the Digg.com website uses an H1 as the title on its homepage, yet uses an H1 as the main heading of an inside page, but every inner page has different content, and I think the H1 should describe it. After reading the tweets, I have grown to like the idea of using an H1 on the homepage for the company name or logo, and to use H1 on ‘inside’ pages for the main page title. When entering a particular article, though, I would use H1 for the article title and an anchor for the site title."

Presuming there is actually a reason for some people not to do what I propose would you support an option on the General Settings page (or the Miscellaneous Settings page) labeled "Wrap site title with <h1> element on home page?"

I'm also against hiding the title on front-page page's, Whilst i've removed it in the past for some installs, for a lot of people, they expect the title to be displayed.

It only hides the title when a site has a static home page.

The problem is if you <h1> the page title you often end up with "<h1>Home Page</h1>" which is not how something searching for a site will refer to it as (search engines view <h1> as an indicator of importance as I'm sure you know.)

Can you give me one example of a reasonably designed site where the home page displays a page title that looks just like every other page on the site? Can you give me one example of a site that should display a page title for a static home page? Can you give me reasons why it should be displayed on the home page?

This report talks in depth about how the real estate of the home page should be designed rather than just be happenstance as is the case when the title is displayed:

​http://www.adaptivepath.com/ideas/reports/signup/

Those that really want to hide it, can do so easily via CSS right now or remove it in a custom theme..

Alternate with this patch, those who want to add it back could do so with a custom theme...

Assuming we identify a real reason why it makes sense to display the title on the home page would adding an option on the Settings/Reading page to disable the title be sufficient to allow you to support this?

[mikeschinkel]

Interestingly I was doing an ad-hoc presentation on WP3.0 at the Atlanta WordPress user group last night and when I mentioned this problem with the theme I had a whole series of hands fly up, mostly web designers in the audience, all wanting to ask about how to fix this problem. Seems I wasn't the only one who views the existing approach as less than optimal.

[iammattthomas]

I've committed a compromise in r13846 -- it moves the site title into an H1 if you're on an index or the home page. I believe we should be consistent with how the default theme has treated page titles in the past, here -- it seems like the least confusing behavior for the average user.

[mikeschinkel]

Replying to iammattthomas:

I've committed a compromise in r13846 -- it moves the site title into an H1 if you're on an index or the home page.

That only solves the lesser problem and there it confuses home page with front page (if you have a static page then the blog home page should have a different title than the front page.).

The greater problem is that the page title is still displayed on the front page for a static page. In every site where I have a front page my title is "Front Page"; why would I (or anyone) ever want that displayed on a home page? (Can anyone show me a professionally designed site where there is a title like all other pages on the home page?)

Not fixing this means everyone new to theming will see it done this way and most will mindlessly duplicate the approach.

I believe we should be consistent with how the default theme has treated page titles in the past, here

Why is consistency important for a new theme, especially for a use case which will target mostly newer (CMS) users?

Isn't this the perfect time to correct all the legacy issues from the past?

it seems like the least confusing behavior for the average user.

Can you explain what exactly will cause the "average" user to be confused as I don't see it? In my experience it's the opposite, i.e. "Why is 'Home Page' being displayed, and how do I get rid of it?" Since most current WP users don't use the static front page option those that do will most likely be newer users.

Remember, this fix would not affect anyone who is using their blog as their front page; this is for people who are using WP as a CMS with a "static" front page.

Has anyone actually talked to users in this category, or is this just the opinion of people who have mostly been using WP for a blog? I could be one of the few people who feels this is important but I'll bet otherwise. I'd gladly defer to the collective judgement of a large number of people, i.e. a survey post asked at ​http://wordpress.org/development/ assuming it was made clear that it will ONLY affect sites with static front pages.

I feel very strongly about this issue, especially because it is so trivial to fix, so I've reopened it in hopes to at least have some discussion about why others believe the proposed fix is in concept not a good thing and at best to get some data to explain how my perspective is in the significant minority of people wanting to use WP as a CMS (assuming it is, which I doubt.)

So I've also opened new ticket #12753 with an additional approach to this problem which could be combined with this ticket to solve the problem to (hopefully?) everyone's satisfaction.

-Mike

[jane]

@mikeschinkel: Why can't people just use a plugin that drops a simple postbox on the page editor with a checkbox for "Hide page title" or something?

[nacin]

Maybe we should implement front-page.php finally (#6801), and create a template for it.

At the moment, I'm tentatively in agreement that the page title for a static front page should not show up in the template.

[mikeschinkel]

Replying to jane:

@mikeschinkel: Why can't people just use a plugin that drops a simple postbox on the page editor with a checkbox for "Hide page title" or something?

The problem is that the theme hardcodes the control of this so a plugin cannot do this. That is why I was suggesting what I suggested.

Another option would be to (start) add(ing) some filters designed to be used by themes. For example, instead of this on lines ~5-8 in twentyten/header.php:

<title><?php
if ( is_single() ) {
  single_post_title(); echo ' | '; bloginfo( 'name' );
} elseif ( is_home() || is_front_page() ) {
  bloginfo( 'name' ); echo ' | '; bloginfo( 'description' ); twentyten_the_page_number();

We could add a filter called "theme_head_site_title" which would be called in the theme like so:

<title><?php
if ( $head_title = apply_filter('theme_head_site_title',false) ) {
  echo $head_title;
} elseif ( is_single() ) {
  single_post_title(); echo ' | '; bloginfo( 'name' );
} elseif ( is_home() || is_front_page() ) {
  bloginfo( 'name' ); echo ' | '; bloginfo( 'description' ); twentyten_the_page_number();

Adding that filter would allow me to achieve my goal in my child theme using this code in functions.php:

add_filter('theme_head_site_title','my_theme_head_site_title');
function my_theme_head_site_title($title) {
  if (is_front_page()) 
    $title = get_bloginfo( 'name' ) . ' | ' . get_bloginfo( 'description' );
  elseif (is_home())
    $title = wp_title( ' | ',false ) . ' | ' . get_bloginfo( 'name' ) . twentyten_get_page_number();
  return $title;
}  

Also in twentyten/header.php at line ~33:

<div id="site-title"><span><a href="<?php echo home_url( '/' ); ?>" 
  title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" 
  rel="home"><?php bloginfo( 'name' ); ?></a></span></div>

We could add a filter called "theme_branding_site_title" which would be called in the theme like so:

<?php echo apply_filters('theme_branding_site_title',
  '<div id="site-title"><span><a href="' . home_url( '/' ) . 
  '" title="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . 
  '" rel="home">' . bloginfo( 'name' ) . '</a></span></div>'); ?>

Adding that filter would allow me to achieve my goal in my child theme using this code in functions.php:

add_filter('theme_branding_site_title','my_theme_branding_site_title');
function my_theme_branding_site_title($title) {
  if (is_front_page()) {
    $title = str_replace('<div id="site-title">','<h1 id="site-title">',$title);
    $title = str_replace('</a></span></div>','</a></span></h1>',$title);
  }
  return $title;
}  

Finally in twentyten/page.php and twentyten/onecolumn-page.php we could replace the following at lines ~5 and ~15, respectively:

<h1 class="entry-title"><?php the_title(); ?></h1>

With this:

<?php echo apply_filters('theme_page_title',
  '<h1 class="entry-title">' . the_title('','',false) . '</h1>'); ?>

Adding that filter would allow me the last part needed to achieve the goal in my child theme using this code in functions.php:

add_filter('theme_page_title','my_theme_page_title');
function my_theme_page_title($title) {
  if (is_front_page()) {
    $title = '';
  }
  return $title;
}  

Without this (or something else to address the issue) then:

1.) Themers will have to duplicate header, page, and onecolumn-page to create a child theme just to address this issue. If twentyten gets bug fixes or enhancements in those files I don't get them until I discover and make the same change, and

2.) Themers developing themes will see the pattern in twentyten and duplicate it, thus ensuring we'll have this same problem with practically every other theme out there (I quit using several other themes already because of this issue, Thesis being the main one I otherwise liked because it outputs an page title on the front page, for example, and fixing it was too difficult.)

OTOH, with these three (3) simple hooks I just proposed many themers will recognize the need (even if they don't fully understand it) and many of them will offer the same hooks.

Replying to nacin:

At the moment, I'm tentatively in agreement that the page title for a static front page should not show up in the template.

Lately, here on your blog and elsewhere, you have been my hero. :)

[iandstewart]

My hunch is that most users who use the static front page will title their home page "Welome to my awesome site about hamsters" or something similar. And would be very surprised if this one page did not behave exactly like the 50 other pages they've created (about rats, gerbils, and what have you) that displayed the title they carefully crafted.

My feeling is that the power users and theme tweakers who edit Twenty Ten to craft a new site theme for themselves can simply add this to the list of other edits they make. And of the other concurrent edits I imagine them making it would certainly be the simplest; deleting 1 line in page.php or .home .entry-title {display:none;} in a stylesheet (or with absolute positioning—there may even be an SEO benefit there).

[mikeschinkel]

Replying to iandstewart:

My hunch is that most users who use the static front page will title their home page "Welome to my awesome site about hamsters" or something similar. And would be very surprised if this one page did not behave exactly like the 50 other pages they've created (about rats, gerbils, and what have you) that displayed the title they carefully crafted.

But that's just a hunch from someone who uses WordPress, right? So we have dueling hunches?

Actually, I have a lot exposure to a lot of people who want to use WordPress for things other than blogging. I hosted a workshop[1] in Feb 2009 and a panel presentation/discussion[2] in March 2010 and was paid to deliver a 3 day training course for the Georgia Tech Enterprise Innovation Institute where they wanted to use WordPress as the basis of all sites they would support across their departments (their vice provost actually attended my Feb 2009 workshop.)

Because of my role in the meetup group and because we focus a fair amount on WordPress I get constantly asked question by many different people. I actually spoke to the Atlanta WordPress meetup group on an ad-hoc "What's in 3.0" to an audience of about 40 people. I mentioned this problem and had many in the audience agree with me. They asked me why themes do it the way they do.

So I actually have a few more data points than just my personal hunches.

My feeling is that the power users and theme tweakers who edit Twenty Ten to craft a new site theme for themselves can simply add this to the list of other edits they make. And of the other concurrent edits I imagine them making it would certainly be the simplest; deleting 1 line in page.php or .home .entry-title {display:none;} in a stylesheet (or with absolute positioning—there may even be an SEO benefit there).

Here's my thought: Editing themes is bad (if it can be avoided.) You edit a theme, you own it; no upgrades for you mister!

With this one change (actually there are a few others, but less significant) I could use TwentyTen as the basis of a lot of sites via child themes that mostly just contain a style.css and functions.php. Without this change (or some way to override it would copying and modifying important templates), I cannot.

The front page (in WordPress terminology) is the equivalent to the site name. Having a page title there also is redundant and unhelpful and makes any site that uses it the way you suggest look like amateur hour.

[1] ​http://www.meetup.com/atlantawebmarketers/calendar/9711037/

[2] ​http://www.meetup.com/atlantawebmarketers/calendar/11954596/

[jane]

Mike, come on. He said: "My feeling is that the power users and theme tweakers who edit Twenty Ten to craft a new site theme for themselves can simply add this to the list of other edits they make." You then replied: "Editing themes is bad (if it can be avoided.) You edit a theme, you own it; no upgrades for you mister!" Since he was, in fact, talking about people making their own new themes using 2010 as a base, not keeping 2010 as the theme and just overwriting things they don't like, I don't think your reply was appropriate. We don't want everyone to just use the default theme, we want them to take it and do cool things with it.

The default theme is not meant to be all things to all people. We had a huge debate about this long ago and decided the default theme absolutely should not try to do address all use cases. It should be a simple BLOG theme, that's what was decided. If at some point we decide to pursue something like "core themes" and have a default specifically for CMS or magazine use, etc, then it's a different ball game, but 2010 is supposed to be a blog theme, not a big old CMS theme. On purpose. If someone wants to use it as a base for a more CMS-oriented theme, awesome. That's not the task at hand, though. We need to stick to scope on this.

[iammattthomas]

Editing themes is great. As Ian mentioned, hiding the page title in a child theme would be incredibly simple.

[iandstewart]

If you're already making a child theme and editing CSS there (good practice!) the simplest solution would be to add the following to your child stylesheet:

.home .entry-title {display:none;}

Or, alternately, if you're creating a child theme, adding your own custom page template just for the front page. The latter having the added bonus of being super-cool.

[mikeschinkel]

Replying to iammattthomas:

Editing themes is great. As Ian mentioned, hiding the page title in a child theme would be incredibly simple.

You and I are addressing different contexts here. A designer definitely wants to edit a theme. A user just wants it to work and to be able to upgrade to new versions w/o having to re-apply edits.

Replying to iandstewart:

If you're already making a child theme and editing CSS there (good practice!) the simplest solution would be to add the following to your child stylesheet:

.home .entry-title {display:none;}

You especially don't want to hide a heading tag, see what follows:

From: ​http://www.mattcutts.com/blog/notifying-webmasters-of-penalties/

"Stuey, if display:none is used to hide text, that can cause issues."

From: ​http://railsforum.com/viewtopic.php?id=9657

"Matt Cutts from Google has talked about this on his blog and basically he says you shouldn't use display:none; to hide content as it is considered a form of cloaking as you are showing the user one thing and the search engine bot another."

From: ​http://www.mattcutts.com/blog/seo-mistakes-unwise-comments/

"I don’t recommend that people use CSS to hide text, and I don’t recommend that they document it, either."

Ironically on this same page there is this comment:

Ed September 24, 2008 at 5:19 am
Here’s my question and concern.
I use Wordpress for my website. The newest version has added captions to the images and displays the caption. The caption is the same text used in the ALT tag as well, so simply not adding it is not an option. This new caption messes up my design, so I need it to go away.

Because this is built in and uses a specific class, I am forced to use the display:none code in CSS to remove it, yet the text for the caption is still shown, albeit not in H1 tags. However, it is a repetition of the ALT tag for the image.

Or, alternately, if you're creating a child theme, adding your own custom page template just for the front page. The latter having the added bonus of being super-cool.

I have done that, but only to get rid of the heading. It's painful to see all that duplicated code in my front-page heading, code I fear will be deprecated by the next refresh of TwentyTen.

Replying to jane:

Mike, come on. He said: "My feeling is that the power users and theme tweakers who edit Twenty Ten to craft a new site theme for themselves can simply add this to the list of other edits they make." You then replied: "Editing themes is bad (if it can be avoided.) You edit a theme, you own it; no upgrades for you mister!" Since he was, in fact, talking about people making their own new themes using 2010 as a base, not keeping 2010 as the theme and just overwriting things they don't like, I don't think your reply was appropriate.

Inappropriate? You're killing me! I was trying to lighten the discussion (i.e. I was joking) but still get the point across. I guess in my germanic way it didn't come across.

We don't want everyone to just use the default theme, we want them to take it and do cool things with it.

True, but why force them to do duplicate so much code?

Would it really be so awful to add a few hooks into the theme to allow people to address this themselves?

I'm dying here. I've come up with three (3) different solutions: 1.) change it, 2.) providing admin options and/or 3.) adding in hooks. None of these work for you?

The default theme is not meant to be all things to all people. We had a huge debate about this long ago and decided the default theme absolutely should not try to do address all use cases.

Agreed. I'm arguing this is a very common use case for almost any site with a static front page. Hardly an outlier.

The TwentyTen theme is *really* good; but it's 90%. I'm asking to take it to the last 10%.

It should be a simple BLOG theme, that's what was decided. If at some point we decide to pursue something like "core themes" and have a default specifically for CMS or magazine use, etc, then it's a different ball game, but 2010 is supposed to be a blog theme, not a big old CMS theme. On purpose. If someone wants to use it as a base for a more CMS-oriented theme, awesome. That's not the task at hand, though. We need to stick to scope on this.

Sigh. I give up. :-(

[WraithKenny]

Luckily HTML5 has sollutions for many of these issues, we just have to hold on for another few years ;-) But really, why limit your self to 1 h1 element. Taking from HTML5, position in the document will allow for more. Use a div element with a .header class for the first h1, then an h1 nested in a .article. Should work on the main page, and on singles/rest-of-site. Or do a HTML5 child theme/derivative. I plan on doing the latter someday, but just as a learning exercise.

[mikeschinkel]

Replying to WraithKenny:

Luckily HTML5 has sollutions for many of these issues, we just have to hold on for another few years ;-) But really, why limit your self to 1 h1 element. Taking from HTML5, position in the document will allow for more. Use a div element with a .header class for the first h1, then an h1 nested in a .article. Should work on the main page, and on singles/rest-of-site. Or do a HTML5 child theme/derivative. I plan on doing the latter someday, but just as a learning exercise.

You can use multiple h1 elements in HTML4, but that doesn't mean I'd ever want to. What you are suggest is what people have been doing and what I'd like to see and easy way to not do without copying code.

[w3prodigy]

As a framework developer, I'm curious as to why WordPress doesn't come with an included framework with sample child themes. The Twenty-Ten theme, while a good example for WordPress Theming, doesn't follow a lot of basic standards. The headers (h1, h2, etc) should be used to define important titles in the document helping to create an organized structure in a web document. I have no real argument to make here, only the curiosity of why WordPress isn't demonstrating the power of the Parent and Child Themes.

As for the title, I like the idea of providing a function which would allow developers to apply a filter to the title. This would help clean up many of the themes that use custom methods for the title in header.php

[iammattthomas]

It was decided before work on twentyten began that it would be a blog theme, not a framework. So it's designed to be the very best blog theme it can be. In successive years, the core developers of WordPress may decide that including a full-fledged theme framework is a good idea, but that wasn't the task for this year. Bugs in Twenty Ten should get new tickets, but the design for this year's theme is settled. Next year's is a blank canvas. :)