HTML5 + WordPress
Rob Larsen
1.23.2010
htmlcssjavascript.com | drunkenfist.com
@robreact
htmlcssjavascript.com /downloads/wordpress.ppt
Who is this Guy Anyway?
• 12+ years HTML/CSS/JavaScript. My job
since 1999.
• WordPress since 2005. Launched a ton of
sites. Currently manage 6.
• For the next 5 days: Principal Presentation
Engineer at Cramer
• Next Week: Molecular
•
PAST: AdvisorTech, Compete, Demandware, The Weekly Dig, Gillette, Museum of
Science, Boston, PC Connection, State Street, Webex
Introduction to HTML5
HTML5 is a lot of things– Ongoing. This is a moving target. The spec can
change underneath you. This can be fun, I swear.
It also means there’s not always an answer.
That, too, can be fun.
– Occasionally controversial.
– Full of cool stuff that’s got both browser and web
developers excited
– Something to pay attention to/ experiment with/
discuss and give feedback on (which is why we’re
here today)
What Are We Going To Talk
About
Marking up a standard WordPress blog using some of
the new, semantic elements/attributes. This is a subset
of the spec that’s relatively stable and is usable right
now. We’ll use a small bit of JavaScript or the Modernizr
library to make styling these elements work in Internet
Explorer.
Sweet.
Meet the New Semantic
Elements
<section>
The section element represents a generic document or
application section. A section, in this context, is a
thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various
tabbed pages in a tabbed dialog box, or the numbered
sections of a thesis. A Web site's home page could be
split into sections for an introduction, news items,
contact information.
Meet the New Semantic
Elements
<nav>
The nav element represents a section of a page that
links to other pages or to parts within the page: a section
with navigation links. Not all groups of links on a page
need to be in a nav element — only sections that consist
of major navigation blocks are appropriate for the nav
element. In particular, it is common for footers to have a
short list of links to various pages of a site, such as the
terms of service, the home page, and a copyright page.
The footer element alone is sufficient for such cases,
without a nav element
Meet the New Semantic
Elements
<article>
The article element represents a component of a page
that consists of a self-contained composition in a
document, page, application, or site and that is intended
to be independently distributable or reusable, e.g. in
syndication. This could be a forum post, a magazine or
newspaper article, a Web log entry, a user-submitted
comment, an interactive widget or gadget, or any other
independent item of content.
Meet the New Semantic
Elements
<aside>
The aside element represents a section of a page that
consists of content that is tangentially related to the
content around the aside element, and which could be
considered separate from that content. Such sections
are often represented as sidebars in printed typography.
The element can be used for typographical effects like
pull quotes or sidebars, for advertising, for groups of nav
elements, and for other content that is considered
separate from the main content of the page.
Meet the New Semantic
Elements
<hgroup>
The hgroup element represents the heading of a section.
The element is used to group a set of h1–h6 elements
when the heading has multiple levels, such as
subheadings, alternative titles, or taglines.
“Just another wordpress weblog”
Meet the New Semantic
Elements
<header>
The header element represents a group of introductory
or navigational aids. A header element is intended to
usually contain the section’s heading (an h1–h6 element
or an hgroup element), but this is not required. The
header element can also be used to wrap a section’s
table of contents, a search form, or any relevant logos.
Meet the New Semantic
Elements
<footer>
The footer element represents a footer for its nearest
ancestor sectioning content or sectioning root element. A
footer typically contains information about its section
such as who wrote it, links to related documents,
copyright data, and the like. Footers don’t necessarily
have to appear at the end of a section, though they
usually do. When the footer element contains entire
sections, they represent appendices, indexes, long
colophons, verbose license agreements, and other such
content.
Meet the New Semantic
Elements
<time>
The time element represents either a time on a 24 hour
clock, or a precise date in the proleptic Gregorian
calendar, optionally with a time and a time-zone offset.
Meet the New Semantic
Elements
<form> <input> attributes
Placeholder Text/Search Boxes
<input type="search" placeholder=“Search Example.com" name="s" id="s" />
Email Addresses
<input type="email" class="text-input" name="email" id="email" value=""
size="22" tabindex="2" aria-required='true' />
Web Addresses
<input type="url" class="text-input" name="url" id="url" value=""
size="22“ tabindex="3" />
Isn’t All That New Stuff Just About
Perfect for Marking up a Blog?
Heck yes.
Let’s Look at Some Code
header.php
<?php
/**
* @package WordPress
* @subpackage Kubrick_x_HTML5
*/
?>
<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<script type="text/javascript">
var elem;
var elems = 'abbr article aside audio canvas datalist details eventsource figure footer header hgroup mark menu
meter nav output progress section time video'.split(' ');
var i = elems.length+1;
while ( --i ) {
elem = document.createElement( elems[i] );
}
elem = null;
</script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Default/Kubrick (part 1)
header.php
<style media="screen">
<?php
// Checks to see whether it needs a sidebar or not
if ( empty($withcomments) && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php
bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top;
border: none; }
<?php } ?>
</style>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">

<header id="header" >
<hgroup id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2 class="description"><?php bloginfo('description'); ?></h2>
</hgroup>
</header>
<hr />
Default/Kubrick (part 2)
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class=“no-js”>
<head profile="http://gmpg.org/xfn/11">
<title>
<?php if ( is_front_page() ) {bloginfo('name');?> | Fresh Ideas Caught and Served <?php } else {;?>
<?php bloginfo('name');?> |
<?php if($post->post_parent) {
$parent_title = get_the_title($post->post_parent);
echo $parent_title;?>
–
<?php }?>
<?php wp_title(''); ?>
<?php } ?>
</title>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php echo get_post_meta($post->ID, "meta-description", "true");
?>" />
<link rel="shortcut icon" href="http://static.crameronline.com/_assets/images/favicon.ico"/>
<script type="text/javascript">
var ___baseURL ="<?php bloginfo('template_directory'); ?>";
</script>
<!—one file, which contains Modernizr 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/_assets/scripts/b.c.js"></script>
AwiderNet.com
View Source
<html lang="en-US" dir="ltr" class="js canvas canvastext
geolocation rgba hsla no-multiplebgs borderimage borderradius
boxshadow opacity no-cssanimations csscolumns no-cssgradients
no-cssreflections csstransforms no-csstransforms3d nocsstransitions video audio fontface">
<!– such is the power of modernizr 
<head profile="http://gmpg.org/xfn/11">
<title>A Wider Net | Fresh Ideas Caught and Served </title>
<meta charset="UTF-8">
AwiderNet.com
index.php
<?php
/**
* @package WordPress
* @subpackage Kubrick_x_HTML5
*/
get_header(); ?>
<div id="content" class="narrowcolumn" >
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute();
?>"><?php the_title(); ?></a></h1>
<time datetime="<?php the_time('c') ?>" pubdate="pubdate"><?php the_time('F jS, Y') ?></time>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »');
?></p>
</article>
<?php endwhile; ?>
<nav class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</nav>
<?php else : ?>
<h1 class="center">Not Found</h1>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Default/Kubrick
View Source
s<article id="post-3" class="post-3 post hentry category-uncategorized">
<h1><a title="Permanent Link to This Is an HTML5ized Version of the Default Wordpress Theme" rel="bookmark"
href="http://htmlcssjavascript.com/dev/?p=3">This Is an HTML5ized Version of the Default Wordpress Theme</a></h1>
<time pubdate="pubdate" datetime="2010-01-17T21:52:52+00:00">January 17th, 2010</time>
<div class="entry">
<p>Source Code and discussion.</p>
</div>
<p class="postmetadata"> Posted in <a rel="category" title="View all posts in Uncategorized"
href="http://htmlcssjavascript.com/dev/?cat=1">Uncategorized</a> | <a title="Edit post" href="http://htmlcssjavascript.com/dev/wpadmin/post.php?action=edit&post=3" class="post-edit-link">Edit</a> | <a title="Comment on This Is an HTML5ized Version of the
Default Wordpress Theme" href="http://htmlcssjavascript.com/dev/?p=3#respond">No Comments »</a></p>
</article>
Default/Kubrick
sidebar.php
<?php
/**
* @package WordPress
* @subpackage Kubrick_x_HTML5
*/
?>
<aside id="sidebar" >
<ul>
<?php
/* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

</li>
<?php }?>
</ul>
<nav>
<ul>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
</ul>
</nav>
<ul>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>
<li><h2>Meta</h2>

</li>
<?php } ?>
<?php endif; ?>
</ul>
</aside>
Default/Kubrick
searchform.php
<?php
/**
* @package WordPress
* @subpackage Kubrick_x_HTML5
*/
?>
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>" >
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="search" placeholder="Search <?php
bloginfo('blogtitle'); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
Default/Kubrick
comments.php
<?php
// snip!
?>
<?php if ( comments_open() ) : ?>
<div id="comment-form">
<h2><?php comment_form_title( 'Leave a comment', 'Leave a Reply to %s' ); ?></h2>
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.
<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label><input type="text"
class="text-input" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req)
echo "aria-required='true'"; ?> />
</p>
<p><label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label><input
type="email" class="text-input" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2"
<?php if ($req) echo "aria-required='true'"; ?> /></p>
<p><label for="url"><small>Website</small></label><input type="url" class="text-input" name="url" id="url"
value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
</p>
<?php endif; ?>
<p><label for="comment"><small>Comments</small></label>
<textarea name="comment" cols="100%" rows="10" tabindex="4"></textarea>
</p>
<div class="button"><input name="submit" type="submit" id="submit" tabindex="5" value="Submit" /></div>
<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>
</form>
<!—SNIP-
AWiderNet
footer.php
<?php
/**
* @package WordPress
* @subpackage Kubrick_x_HTML5
*/
?>
<hr />
<footer id="footer" >

<p>
<?php bloginfo('name'); ?> is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.

</p>
</footer>
</div>

<?php /* "Just what do you think you're doing Dave?" */ ?>
<?php wp_footer(); ?>
</body>
</html>
Default/Kubrick
What’s the Diff?
footer.php
archives.php
<?php
/**
* @package WordPress
* @subpackage Kubrick_x_HTML5
*/
/*
Template Name: Archives
*/
?>
<?php get_header(); ?>
<div id="content" class="widecolumn">
<?php get_search_form(); ?>
<section>
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</section>
<section>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_categories(); ?>
</ul>
</section>
</div>
<?php get_footer(); ?>
Kubrick/default
style.css
/*SNIP!*/
/* Begin Structure */
body {
margin: 0 0 20px 0;
padding: 0;
}
/*HTML5*/
footer, section, article, aside, header, time {
display:block;
}
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}
#header
/*SNIP!*/
Kubrick/default
What’s the Diff?
style.css
style.css
.borderradius.boxshadow.rgba #container #main article,
.borderradius.boxshadow.rgba #container #main #posts > .meta-data,
.borderradius.boxshadow.rgba #container #main #posts #no-results,
.borderradius.boxshadow.rgba #container #main #posts .author {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .15);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .15);
background:#fff;
overflow: hidden;
}
AWiderNet
PSST! CSS3
Things I Learned
The new outline algorithm is
a fickle master
Otherwise- not so bad.
Kubrick worked with almost
no browser specific
intervention in modern
browsers
Any Questions?
More Info
•
•
•
•
•
http://www.whatwg.org/
http://diveintohtml5.org/
http://www.modernizr.com/
http://gsnedders.html5.org/outliner/
http://htmlcssjavascript.com/html/immessing-around-with-an-html5-version-ofthe-default-wordpress-theme/