<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Christina Fowler &#187; Wordpress</title>
	<atom:link href="http://christinafowler.com/category/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://christinafowler.com</link>
	<description>Portfolio &#38; more</description>
	<lastBuildDate>Fri, 09 Apr 2010 09:09:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>The confusion between Wordpress h1s and h2s</title>
		<link>http://christinafowler.com/wordpress/wordpress-h1s-and-h2s/</link>
		<comments>http://christinafowler.com/wordpress/wordpress-h1s-and-h2s/#comments</comments>
		<pubDate>Thu, 08 Apr 2010 14:20:49 +0000</pubDate>
		<dc:creator>Christina</dc:creator>
				<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://christinafowler.com/?p=385</guid>
		<description><![CDATA[One thing that confuses me about many Wordpress powered sites is the fact that on a single post the title is a link to itself and is a h2. Why?! I know that this problem isn&#8217;t restricted to just Wordpress sites but I find they tend to be the worst offenders. 
I expect the answer [...]]]></description>
			<content:encoded><![CDATA[<p>One thing that confuses me about many Wordpress powered sites is the fact that on a single post the title is a link to itself and is a <code>h2</code>. Why?! I know that this problem isn&#8217;t restricted to just Wordpress sites but I find they tend to be the worst offenders. </p>
<p>I expect the answer is that whatever theme you have was developed using Wordpress&#8217;s default theme as a framework. </p>
<p>What makes more sense semantically is that on the homepage the website name is the <code>h1</code>, but on all other pages the page title should be the <code>h1</code>.</p>
<p>Here are a few snippets that can be used on every Wordpress powered site, from blogs to portfolios, e-commerce to magazine &#8211; there are just some things that defy genre.<span id="more-385"></span></p>
<h2>Logo is a link but not on the homepage</h2>
<p>It is a popular convention that a website&#8217;s main logo should link back to the homepage and most sites have that down. However, as <a href="http://www.webcredible.co.uk/user-friendly-resources/web-usability/big-websites-usability.shtml">Webcredible</a> rightly point out, a page should not link back to its self &#8211; that just doesn&#8217;t make sense and can cause usability problems.</p>
<p>So, here is the snippet that will make sure that on the homepage the logo is the <code>h1</code> and on all other pages it is a link that takes the user back to the home page.</p>
<pre><code>
&lt;?php if (is_front_page()) { ?>
	&lt;h1><span>&lt;?php bloginfo('name'); ?>&lt;/span>&lt;/h1>
&lt;?php } else { ?>
	&lt;a class="faux-h1" href="&lt;?php bloginfo('url'); ?>">
		&lt;span>&lt;?php bloginfo('name'); ?>&lt;/span>
	&lt;/a>
&lt;?php } ?>
</code></pre>
<p>Note that I have used <code>is_front_page()</code> as opposed to <code>is_home()</code> &#8211; this is to ensure that any Wordpress powered sites that use a static page as their front page still benefit.</p>
<p>To go with that here is the CSS &#8211; note that I have styled the <code>h1</code> and <code>a.faux-h1</code> the same. The user will see no difference but semantically the code makes far more sense.</p>
<pre><code>
#header h1, #header .faux-h1 {
background:url('images/logo.gif') no-repeat;
width:200px;
height:50px;
display:block; /* For the A tag */
}
</pre>
<p></code></p>
<h2>Single post &amp; Page title is not a link</h2>
<p>Continuing on the idea that on the homepage the site title is the <code>h1</code> but on all other pages the page title is the <code>h1</code>, in all of your templates (404.php, archive.php, archives.php, fullwidth.php, links.php, page.php, search.php, single.php, sitemap.php, etc.) replace your title with this snippet:</p>
<pre><code>
&lt;h1>&lt;?php the_title(); ?>&lt;/h1>
</code></pre>
<p>You might not be keen on the fact that your page title was perhaps a <code>h2</code> on the homepage and is now a <code>h1</code> on the single post page which could affect the size or overall styling so try attaching a class of <code>.post-title</code> - this will give you the opportunity to style the post titles to look the same in the CSS no matter what tag they are using and still remain semantic.</p>
<p>Adopting this method with all your templates should now mean that you have a more standard structure. For example, on a search results page the <code>h1</code> is "Search results" and the individual post titles are <code>h2</code>s, just like on your archives and the homepage.</p>
]]></content:encoded>
			<wfw:commentRss>http://christinafowler.com/wordpress/wordpress-h1s-and-h2s/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
