How To Structure Pages Using HTML 5 And CSS3 Styling For Basic Wordpress Theme

How To Structure Pages Using HTML 5 And CSS3 Styling For Basic WordPress Theme

Here's a quick overview on structuring pages using HTML 5 and styled with CSS3 so you can start making Wordpress themes of the future?This is a quick run through of how you can do that. Will add more later after meeting people from W3C and hearing the presentations on HTML5 and CSS3 today at Microsoft....

Twitter Facebook Digg Delicious Stumble RSS Email

HTML 5, CSS 3, SVG Anyone?

The release of HTML 5, CSS 3 are no secret, but they are still very new. So I decided to write up a quick last minute basic tutorial on how to use HTML 5, CSS 3, and some common WordPress Template Tags used in WordPress themes, to create a WordPress theme. I figured this post would go perfectly with my plans for the day today since I'm going to the Boston Web Design Meetup event, starting in T-4hrs and counting, Looking at the Next Open Web Platform.

Exciting Stuff!

The Word Wide Web Consortium (W3C) will be there to talk about the future of the Web and some of the Core technologies that will become part of it. They will have a relatively high-level overview of the technologies in the morning and an afternoon hands-on-session for anyone ready to have some fun with HTML, CSS, JavaScript, or SVG, with presentations in between introducing HTML 5, SVG and Canvas, and CSS 3. Oh and did I mention it is being hosted at the Microsoft N.E.R.D. Center? I can't think of any other place in Boston more suited and fitting for such an event to take place. I went there for Wordcamp Boston and loved it.

Okay enough with the blah blah

Now that I know you're really interested and want to continue following along, let's learn how to create this HTML 5 / CSS 3 basic WordPress Theme finally!

So yeah, you need a Doctype and HTML language.

The Fabulous Sensible Doctype

<!doctype html>
<html lang="en">

This is not only a time saver, but it just makes sense for the one thing that goes at the top of every single webpage as the first line of code to be easy enough it can be quickly added effortlessly, and without trying to remember what the hell xmlns="" is or what it's supposed to link to for that matter. I still have no clue, sad I know. The HTML language setting of the past lang="en-US" is much more reasonable to write lang="en" than the way the old Doctype does using "en-US". I mean if the language is set to English, why should you have to add -US too, especially since English isn't the only language used in the US. Plus the fact that there is only one English language to my knowledge, at least when it comes to coding websites, which if you haven't already guessed is none other than ... English! So goodbye so long, no more -US. That's good stuff, great, awesome, onward!

Give Your Page A Head

<head>
<title><?php bloginfo('title'); ?>(); ?></title>

You could use conditional tags in the title if you wanted to show different titles based on the page or content you are viewing.

A quick example:

<title>
<?php
if( is_home() ) :
	echo 'Homepage text';
elseif( is_page() } :
	echo 'Page title and some text';
else( is_404() } :
	echo 'Uh Oh! You see to have gotten lost - Page Not Found';
// and so on and on etc.... back to the good stuff
endif;
?>
</title>

Add Some CSS 3 to Spice Things Up

I created some quick CSS 3 styles using the awesome tool CSS3, please! bookmark it, since I'm limited for time, and it's getting shorter as I type, T-3hrs now.

The CSSplease generated selectors are:

.box_round with a 10px radius for rounding the corners
.box_shadow with 0px 2px 9px #333 shadow
.box_gradient using the colors #187ccc, #bbfefe
.box_rgba with background color #0A6400 or rgba(10, 100, 0, 0.5) and 0.5 alpha transparency
.box_rotate with a -5.0deg normal state, and a hover state of 5.0deg to rotate it the other way on hover.
@font-face

* Note: I will add more CSS styles later when I have time to layout the page and show where each element is in relation to other elements. Just no time right now, T-2hours (wow do I type slow?).

Here's the Code

<style type="text/css">
.box_round {
     -moz-border-radius: 10px; /* FF1+ */
  -webkit-border-radius: 10px; /* Saf3+, Chrome */
          border-radius: 10px; /* Opera 10.5, IE 9 */
}
.box_shadow {
     -moz-box-shadow: 0px 2px 9px #333; /* FF3.5+ */
  -webkit-box-shadow: 0px 2px 9px #333; /* Saf3.0+, Chrome */
          box-shadow: 0px 2px 9px #333; /* Opera 10.5, IE 9.0 */
              filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, Color='#333333'); /* IE6,IE7 */
          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, Color='#333333')"; /* IE8 */
}
.box_gradient {
  background-image: -moz-linear-gradient(top, #187ccc, #bbfefe); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #187ccc),color-stop(1, #bbfefe)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#187ccc', endColorstr='#bbfefe'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#187ccc', endColorstr='#bbfefe')"; /* IE8 */
}
.box_rgba {
  background-color: #0A6400;
  background-color: rgba(10, 100, 0, 0.5);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#920A6400',endColorstr='#920A6400'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#920A6400',endColorstr='#920A6400')"; /* IE8 */
}
.box_rotate {
     -moz-transform: rotate(-5.0deg);  /* FF3.5+ */
       -o-transform: rotate(-5.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-5.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.006);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.006)"; /* IE8 */
}
.box_rotate:hover {
     -moz-transform: rotate(5.0deg);  /* FF3.5+ */
       -o-transform: rotate(5.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(5.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.006);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.006)"; /* IE8 */
}
@font-face {
  font-family: 'Rockwell';
  src: url('ROCK.eot');  /* IE6+ */
  src: local('☺'),
        url('ROCK.woff') format('woff'),  /* FF3.6 */
        url('ROCK.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */
}
</style>

Use an HTML5 Style sheet Reset.
I would suggest using Richard Clark's HTML 5 CSS Reset, which is just a modified version of an older reset by Eric Meyer.

Just copy the first chunk of code before the body{ } declaration and paste it in your Stylesheet before everything else, or just save it as a separate CSS file and reference it before any other CSS code.

Normally you would want to link to external .css Stylesheets in the <head> of the page but I don't have time to, and doesn't really matter, I think you'd know how to do it anyways, if not ask in the comments.

Finish Header and Body Builder

<?php wp_head();?>
</head>
<body>

Here's where it starts getting interesting. Using the new HTML 5 attribute selectors we can build a more semantic page structure, with some WordPress template tags here and there. I will explain this more in depth below.

Create the Page Header

<header>
	   <hgroup>
		<h1><?php bloginfo('title'); ?>(); ?></h1>
		<h3><?php bloginfo('description'); ?>(); ?></h3>
	</hgroup>
	<nav id="page-nav">
		<ul>
		    <?php wp_list_pages(); ?>(); ?>
		</ul>
	</nav>
	<nav id="cat-nav">
		<ul>
			<?php wp_list_categories(); ?>(); ?>
		</ul>
	</nav>

	<?php wp_loginout(); ?>
	<?php wp_register(); ?> 

</header>

Build the Content Sections

<div id="content-wrap">

	<section id="content">
		<article id="post-<?php the_ID(); ?>">
			<header>
				<h2><?php the_title(); ?></h2>
					<time>Time</time> Posted by: <?php the_author(); ?>
					<span><?php comments_popup_link(); ?></span>
			</header>

			<?php the_excerpt(); ?>
			<h2>OR</h2>
			<?php the_content(); ?>

			<footer>
				Tags: <?php the_tags(); ?>
				Category: <?php the_category(); ?>
				Related Links, etc.
			<footer>

			<article id="<?php comment_ID(); ?>">
				Comment
			</article>

			<article id="<?php comment_ID(); ?>">
				Another comment
			</article>
		</article>
		<nav>
			Post navigation links
		</nav>
	</section>

Making <aSide> on the Side

<aside id="sidebar">

	<section id="widgetbox">
		<header>
			<h2>One Widget - Show Posts</h2>
		</header>
			<nav id="widget-1">
				<ul>
					<li><a href="#" title="nav one">Nav One</a></li>
					<li><a href="#" title="nav two">Nav Two</a></li>
					<li><a href="#" title="nav three">Nav Three</a></li>
					<li><a href="#" title="nav four">Nav Four</a></li>
					<li><a href="#" title="nav five">Nav Five</a></li>
				</ul>
			</nav>
	</section>

	<section id="widgetbox">
		<header>
			<h2>Another Widget - Blogroll</h2>
		</header>
			<nav id="widget-2">
				<ul>
					<li><a href="#" title="nav one">Link One</a></li>
					<li><a href="#" title="nav two">Link Two</a></li>
					<li><a href="#" title="nav three">Link Three</a></li>
					<li><a href="#" title="nav four">Link Four</a></li>
					<li><a href="#" title="nav five">Link Five</a></li>
				</ul>
			</nav>
	</section>

</aside>

</div><!--/content-wrap-->

A New Pair of Shoes

<footer>
	Copyright 2010 <a href="<?php bloginfo('url'); ?>(); ?>"><?php bloginfo('title'); ?>(); ?></a>
</footer>

'Bout Time to Go Home

</body>
</html>

Did you learn anything?!?!

Any questions you may have let me know in the comments.

PS. T-25 minutes until WC3/HTML5/CSS3/SVG/Microsoft
Goodness!!

Gotta go!

UPDATE: I have also made this simplified by created just an HTML5 page with some basic styling, not using CSS3.

Just The Basic HTML5 Page Structuring

Shortlink:

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!

About the Author

Jared is from Boston working as a web and graphic designer. Also owns the design blog Tweeaks.com, and has designed many other websites powered by Wordpress including the New2WP theme.

Visit Jared's Website Follow Jared on Twitter

Level: Noob, Rookie Posted by: Jared