Web Designers – Skeleton WordPress Theme in HTML5
Posted on Jan 21 2011 | Posted in Web/Tech | 5 Comments
This is the blank WordPress theme that I use as a development basis. When I design new websites, I start with this set of files and add, subtract, or rearrange code as needed. I thought I’d share it in case anyone finds it useful.
View files or Download theme at Github
Here’s what’s in the theme:
- A set of all the core files in standard WordPress themes: header.php, footer.php, index.php, etc. Includes archive and search templates and all the usual stuff.
- I use stylesheets a little differently as a matter of convenience to me: The standard WP style.css contains ONLY theme information and a comment. All the styles for the site are in the CSS folder, and the header.php contains links to those stylesheets. I have three stylesheets in that folder:
- style.css – contains all the styles for the website. I use the Mo’Bulletproof @font-face syntax, which I’ve found to have the best cross-browser compatibility. I’ve switched to the new sparkly Fontspring @font-face syntax now!
- reset.css – based on the Toucan CSS Reset and including a lot of Less Framework concepts (like media queries for different screen sizes), plus some custom classes for a quasi-grid. There’s actually a fair amount of stuff going on in this file. It is @import’ed into style.css.
- ie.css – Currently included with a “less than IE 9″ conditional statement. This might need to be changed.
- A custom functions.php file that contains a lot of stuff that I’ve found in various places. Includes: A custom excerpt, code to clean out the <head> of various metadata, support for shortcodes in text widgets, etc.
- There’s a function in functions.php to include only one copy of jQuery (from Google’s CDN). This is nice because plugins tend to include their own copies of jQuery and sometimes that causes conflicts.
- There’s a scripts/custom.js file for all your custom javascript code.
- The theme supports WordPress 3 Custom Menus – create a menu in WP’s admin section, and add it as a widget in one of the widget areas, which leads me to…
- There are four widget areas: Header, Nav, Sidebar, Footer. These are places that I often like to stick widgets like text boxes. The Nav widget area is a great place to put the WP3 Menu that you create, like I said.
- HTML5!! The theme uses HTML5 semantic elements throughout. There’s no wrapper div – instead the main header, section, and footer all have “
class='body'“. This usually works well as a faux-wrapper and is more semantic. - There are a couple template html files that I use while designing the site so I don’t have to have LAMPP running all the time in the early development stages. This allows me to tweak my document structure and to style various elements: template.html is a pretty much blank document, while template-example.html contains a bunch of filler text and various elements (h1, h2, del, etc.). This filler text is taken from the Toucan CSS Reset demo.
There’s nothing groundbreaking here. I’ve compiled stuff from a lot of different sources:
- The theme is based heavily on Chris Coyier’s Blank wordpress theme (originally in HTML4, but I’ve HTML5′d it up)
- A few resources from (and originally inspired by) Amber Weinberg’s Hijinks theme
- several of the functions from functions.php are from the Digging into WordPress articles one and two on customizing your functions.php
- As noted above, my CSS reset is based on Toucan CSS Reset
- I’m using a lot of stuff also from the Less Framework, primarily media queries which allow the site to adapt to different screen sizes.
- Some resources from HTML5 Boilerplate and related projects.
- Other miscellaneous tidbits from different places scattered about the Intertubes.
Issues:
- functions.php needs to be cleaned up a little more
- I may not be using HTML5 semantic elements correctly.
- You may not find this minimal enough for your use – too much markup, etc. Like I say, for me it’s a good starting place for my projects.
- My IE conditional statements will need to be tweaked over time
- There may very well be typos. Though I’ve been using this for some time, I’m just now working on really polishing it up. So if something doesn’t work, let me know.
- As I’m adding and changing stuff frequently, sometimes I post it before testing (ha!). I’m sure you’ll love it if your WP3 menus don’t work or something. If I’ve used it in a live site, it’ll work because by that point it’ll be tested. Let me know if you find bad code.
- Other stuff.
As noted above, view files or download the theme at Github if you’re interested. Leave a comment, get in touch, etc. if you have issues. Thanks!
Edited to add: I just remembered this: the reset.css file contains box-sizing: border-box; on certain elements. This is a potential gotcha because when you specify width on those elements, it will calculate width to include the border and padding set on the element. See css/reset.css lines ~100-105 for this.
