Rob Larsen presentation at WordCamp

1. HTML5 + WordPress Rob Larsen 1.23.2010 htmlcssjavascript.com | drunkenfist.com @robreact htmlcssjavascript.com /downloads/wordpress.ppt

15. Let’s Look at Some Code

20. index.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ get_header(); ?> <div id=&quot;content&quot; class=&quot;narrowcolumn&quot; > <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class() ?> id=&quot;post-<?php the_ID(); ?>&quot;> <h1> <a href=&quot;<?php the_permalink() ?>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to <?php the_title_attribute(); ?>&quot;><?php the_title(); ?></a> </h1> <time datetime=&quot;<?php the_time('c') ?>&quot; pubdate=&quot;pubdate&quot;><?php the_time('F jS, Y') ?></time> <div class=&quot;entry&quot;> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> <p class=&quot;postmetadata&quot;><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p> </article> <?php endwhile; ?> <nav class=&quot;navigation&quot;> <div class=&quot;alignleft&quot;><?php next_posts_link('&laquo; Older Entries') ?></div> <div class=&quot;alignright&quot;><?php previous_posts_link('Newer Entries &raquo;') ?></div> </nav> <?php else : ?> <h1 class=&quot;center&quot;>Not Found</h1> <p class=&quot;center&quot;>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

21. View Source s<article id=&quot;post-3&quot; class=&quot;post-3 post hentry category-uncategorized&quot;> <h1><a title=&quot;Permanent Link to This Is an HTML5ized Version of the Default Wordpress Theme&quot; rel=&quot;bookmark&quot; href=&quot;http://htmlcssjavascript.com/dev/?p=3&quot;>This Is an HTML5ized Version of the Default Wordpress Theme</a></h1> <time pubdate=&quot;pubdate&quot; datetime=&quot;2010-01-17T21:52:52+00:00&quot;>January 17th, 2010</time> <div class=&quot;entry&quot;> <p>Source Code and discussion.</p> </div> <p class=&quot;postmetadata&quot;> Posted in <a rel=&quot;category&quot; title=&quot;View all posts in Uncategorized&quot; href=&quot;http://htmlcssjavascript.com/dev/?cat=1&quot;>Uncategorized</a> | <a title=&quot;Edit post&quot; href=&quot;http://htmlcssjavascript.com/dev/wp-admin/post.php?action=edit&amp;post=3&quot; class=&quot;post-edit-link&quot;>Edit</a> | <a title=&quot;Comment on This Is an HTML5ized Version of the Default Wordpress Theme&quot; href=&quot;http://htmlcssjavascript.com/dev/?p=3#respond&quot;>No Comments »</a></p> </article> Default/Kubrick

22. sidebar.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ ?> <aside id=&quot;sidebar&quot; > <ul> <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <!-- SNIP --> </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> <!-- SNIP --> </li> <?php } ?> <?php endif; ?> </ul> </aside> Default/Kubrick

23. searchform.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ ?> <form method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;<?php bloginfo('url'); ?>&quot; > <div> <label class=&quot;screen-reader-text&quot; for=&quot;s&quot;>Search for:</label> <input type=&quot;search&quot; placeholder=&quot;Search <?php bloginfo('blogtitle'); ?>&quot; name=&quot;s&quot; id=&quot;s&quot; /> <input type=&quot;submit&quot; id=&quot;searchsubmit&quot; value=&quot;Search&quot; /> </div> </form> Default/Kubrick

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

25. footer.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ ?> <hr /> <footer id=&quot;footer&quot; > <!-- If you'd like to support WordPress, having the &quot;powered by&quot; link somewhere on your blog is the best way; it's our only promotion or advertising. --> <p> <?php bloginfo('name'); ?> is proudly powered by <a href=&quot;http://wordpress.org/&quot;>WordPress</a> <br /><a href=&quot;<?php bloginfo('rss2_url'); ?>&quot;>Entries (RSS)</a> and <a href=&quot;<?php bloginfo('comments_rss2_url'); ?>&quot;>Comments (RSS)</a>. <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> </p> </footer> </div> <!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ --> <?php /* &quot;Just what do you think you're doing Dave?&quot; */ ?> <?php wp_footer(); ?> </body> </html> Default/Kubrick

26. What’s the Diff? footer.php

27. archives.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ /* Template Name: Archives */ ?> <?php get_header(); ?> <div id=&quot;content&quot; class=&quot;widecolumn&quot;> <?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

28. 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

29. What’s the Diff? style.css

30. 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

31. PSST! CSS3

33. Any Questions?