Creating an HTML5 Boilerplate WordPress Theme

 

I’ve just had a logo and design done for Furld. I am pleased with the design but it was supplied in HTML and CSS rather than HTML5 and CSS3 so I want to convert it at the same time as I turn it into a WordPress theme.

Furld home page design

I like HTML5 Boilerplate by Paul Irish and luckily there is a WordPress theme called Roots, which is designed as a jumping off point for your own HTML5 theme.

I have installed WordPress locally to use as a development environment so I just have to copy the roots theme to mysite/wp-content/themes/roots and I can activate it.

After activating the theme I can visit the home page and see this.

New html5 home screen

Not very pretty but it is HTML5 and now I can start customising it. Rather than customising the theme itself I am going to create a child theme:

  • Create a directory mysite/wp-content/themes/roots-child/
  • Create a style.css in the directory.

When the Roots Child theme is activated the site should look exactly the same but changes I make in the child theme will override the parent theme. This means the parent theme can be updated by the original author and I will not lose any customisations I make to the child theme.

 

2 thoughts on “Creating an HTML5 Boilerplate WordPress Theme

  1. So you use the css child to make the styles in css3, but how about aditional markup?
    thnx for the article

Leave a Reply