Recently, a friend of mine gave me a call asking if I could build him a blog in next to no time. Challenged, I accepted and worked out a way to have him a functional blog so that he could write pages and posts. And, even better for him, do it in just 15 minutes. Here's how you can do the same.

Step 1 Ease Your Workload

Thanks to open source tools, you no longer have to spend hours getting in a fuddle with grid systems, responsive design patterns, browser resets or complicated file structures (WordPress themes). Luckily, we've now got the ability to 'outsource' the hard, boring work to other people.

Whether you're looking for a quick starting point or just want to be able to do this 15 minute blog with me, it's handy to use the following.

• MAMP/XAMPP - If you're fed up of waiting for your files to upload every time you make a design change, develop your sites locally instead. MAMP (or the Windows equivalent XAMPP) makes use of MySQL databases and Apache to make sure that you can install local copies of WordPress. Plus, any files that you move are almost instantly in the directory that you want them in - no more waiting for your FTP server.
• ZURB Foundation 3 - Want a grid that's responsive down to mobile? How about forms, sliders and other really useful things to go along with that? ZURB is the sleekest and most comprehensive boilerplate that I have come across yet. It's well worth taking the time to use it!
• Underscores.me - I used to get so hung up on the file structure of my WordPress sites that I would end up downloading someone else's theme and writing code on top of that. The problem with that is that it's their code and not always a good place to start developing themes. That's where Underscores.me comes into its own. It gives you a basic theme framework without any of the weight of traditional frameworks. It's just a great place to start if you only want some basic functions and a lean theme architecture.

Step 2 Include All Your Files

After you've downloaded all of the above, make sure that you've got them in the same directory and you've decided on any of the extra parts of ZURB that you might want to use (for a list of the extras, see here).

Once you've got a complete theme directory, open up your functions.php and reference the vital stylesheets like this:

function wptuts_styles() {
/** I've commented out the default style.css file. I don't know if this is a bad thing to do -- I've personally never had any problems. 
 wp_enqueue_style( 'style', get_stylesheet_uri() ); 
**/
	wp_enqueue_style( 'app', get_template_directory_uri() . '/stylesheets/app.css' );
	wp_enqueue_style( 'foundation', get_template_directory_uri() . '/stylesheets/foundation.css' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles' );

Then you're good to start using the files that you just included.

Step 3 It's Mostly in Your Head

For a basic structure, you really only need to open up your header.php. That's great news for developing quickly.

We're going for two columns so I'm just going to have the site's header as the left column and the site's content as the right column. ZURB Foundation provides us with a brilliant way of making a layout quickly. We just need to put our divs/sections/headers into rows of twelve columns by adding classes to the constituent parts.

In our example, I've assigned a width of four columns to my header by adding a class of 'four columns' to the <header> element, and a width of eight columns (8+4=12) to the content area that's going to form my right column like this:

<header id="masthead" class="site-header four columns" role="banner"></header>
<div id="main" class="site-main eight columns">
<!-- This is the end of the header.php file -->

That will give you a basic two column grid which is already responsive in its structure.

Step 4 Housecleaning

After you've got that structure, it's a case of house cleaning. I did the following but you don't have to:

• Removed the assistive-text items that underscores.me includes by default. If this was a real project, I would make sure that they were only visible to screen readers by using a media query. However, this is just a demonstration, so I whipped out the two lines of code that were marked for screen readers in my header.php file completely.
• That sidebar and footer in the right hand column looks sort of weird. I just took those straight out too.
• If I was working on a live server, I would also have included infinite scrolling using Jetpack by adding the capability in my functions.php. However, local development (using MAMP or similar) and Jetpack don't like each other and so I wasn't able to add it to my test site.

Conclusion

That's that! You've got a working blog template that you can get 0 to online in 15 minutes. How good is that?

Don't forget that this is only a basic site - you should go on and add your own styles and flair to it afterwards too, unless you're looking for something that's absolutely basic, of course.