Under the Hood – a Look at the New WMPU.org Design

Since our new version was made live we’ve had several requests for some behind the scenes posts.  In response to this here is our first in which we are going to take you behind the scenes a little to see some of the things that make this site run.

HTML 5 has landed

The theme now is fully HTML5.  WordPress itself adapts so nicely to HTML5.

Just take a look at this format for a post.

1
2
3
4
5
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="post-header"></header>
    <div class="post-body"></div>
    <footer class="post-meta"></footer>
</article>

What about a full page?

1
2
3
4
5
6
7
8
9
10
11
12
<header></header>
<section id="content">
   <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <header class="post-header"></header>
     <div class="post-body"></div>
     <footer class="post-meta"></footer>    
   </article>
</section>
<section id="sidebar">
   <aside id="%1$s" class="widget %2$s"></aside>
</section>
<footer id="site-footer"></footer>

That’s a fairly simplified view of a skeleton that uses HTML5, but you get the idea. Class names and so on of course will vary. It really is striking once you use WordPress and HTML5 how seamlessly it fits in.

Of course it’s up to you to find your HTML5 voice but as you see it’s not that daunting once you start to dabble. It just makes sense with a look, doesn’t it?  That is the joy of HTML5.

Modernizr washes the browser nightmares away

So, how did we use HTML5 across every browser when they don’t all recognize the new format?

The answer simply is Modernizr.

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

In our opinion, Modernizr is becoming rapidly a ‘must use tool’. It really allows designers and developers to take things further while still catering for those browsers that aren’t the hippest kids in town.

Let’s take a look at how we implemented Modernizr in the new wpmu.org design.

First we needed to include it so we went with a function in our theme files:

1
2
3
4
5
6
7
8
9
10
11
if ( ! function_exists( 'wpmuorg_load_scripts' ) ) :
function wpmuorg_load_scripts() {
   if ( !is_admin() ) {
     wp_enqueue_script("jquery");
     // queue other scripts
     wp_enqueue_script('modernizr',
     get_template_directory_uri() . '/js/modernizr.js',
     array("jquery"), '2.0');
   }
}
endif;

Then in our function to set up the theme we simply call this function:

1
2
3
4
5
6
7
add_action( 'after_setup_theme', 'wpmuorg_setup');
if ( ! function_exists( 'wpmuorg_setup' ) ) :
function wpmuorg_setup() {
   // lots of set up goes here adding actions and calling functions
   add_action( 'wp_enqueue_scripts', 'wpmuorg_load_scripts' );
}
endif;

Then in the header.php we have this code which has switches to flag various browsers.  The key is the no-js which tags Modernizr. The class browser names also are a dash of extra help in drilling down problems.

1
2
3
4
5
6
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<html <?php language_attributes(); ?> class="no-js"> <!--<![endif]-->

We also have a Facebook call in our headers but I’ve removed these to illustrate Modernizr.

Now we can not only use media queries and HTML 5 tags which we could not before, but we can also call each of the more problematic browsers directly.

For instance, this was a solution for ie 7:

1
.ie7 .post-featured-thumb{float:left;width:150px;margin:0 1em 0 0;}

Responding to the Smallest First

As it’s such a vast topic we will be going over responsive design in another post.  We can’t leave it out totally here though as responsive design is central to the theme. 

We took the popular and sensible 320 and up route – not using the framework but following the idea.  The basic premise is that you design for the lowest device.  This means you can focus development and then add bells and whistles.

Sometimes Responsive Means Adapting

Currently, responsive design isn’t the easiest thing to do. We did come up against a few stumbling blocks.  Two of the bigger ones were the fixed width of the Facebook code and the comment form.

In the end we had to use a more adaptive approach of a small script to assign widths.  It’s not ideal but it works. Our hope in future is we can remove any scripts we have put in to ‘get around’ being responsive as companies catch on to it.

I hope you enjoyed the insight into some of the ‘under hoodness’.  We do plan on some more posts building on these topics.  Hopefully you are enjoying the new theme. Feel free to request any posts relating to this or leave a response in the comments.

Tags , ,

Comments (4)

  1. This article got me into Modernizr, which is removing some of my reservations with moving on to HTML 5, so thanks! I think the ie7 CSS class example demonstrates a good application of IE conditional comments rather than Modernizr, but still illustrates browser capabilities-to-class mapping. Looking forward to your next wpmu.org make-over article!

Participate