What to include in a Boilerplate theme – for faster WordPress development

by on November 17, 2016

What to include in a boilerplate theme

What to include in a Boilerplate theme – for faster WordPress development

  •  
  •  
  •  
  •  

Me sharing this presentation at the MSP WordPress Meetup

https://twitter.com/JLeuze/status/799419529277435906

Why do want to have you’re own custom theme? The problem with commercial themes or even simple responsive themes is that these themes have entirely too much shit going on – they are generally directed at people who don’t have a truly custom visual design solution. You also don’t want to have to re-invent the wheel since you do alot of the same things over again every time you create a new project – so it’s good to get everything done in a basic way and saving that progress.

Here’s an example of my base theme. 

To start – all you really need is the WordPress Loops

That theme already exists: Underscores.me

Another one like this is Bones

Adding in your preferred responsive framework of choice:

Why do I want to add this in? Because you’re going to have to do the work anyway – many find that working with one responsive grid consistently allows ease of implementation since we know all of the classes, they make sense to us, and we can get on to worrying about more important things.

Bootstrap – Old throwback, very commonly used, many paid themes use this as well. Since I started with paid themes, and we used Bootstrap in college this feels like home to me.

Foundation – Created by Zurb, sexier UI, a bit more progressive of some of the things it incorporates quickly, like when they switched to mobile first media queries.

Semantic UI – Haven’t used this personally, but the way the classes are written it’s suppose to have more intuitive terminology

Your own responsive grid / conventions – So you want to be a bit outside the box, eh? Drop in your thirteen column grid or push for tasty flexbox vertical centering and it’s something you always use but none of these is currently on board with it? Go for it – take your best snippets that you use on a regular basis and throw it all in – I won’t tell anyone if you won’t.

Personally,  I work with teams of people – sometimes contractors, and I want to make it as easy as possible for them to get off the ground. So many people know Bootstrap, that for me it just makes sense to use the current version that’s most popular. This also goes for the base theme – once you have one that’s to your liking, why not just keep using it and allow the other people you work with to become accustomed to it, I’ve found these speeds up the beginning of projects considerably.

 

Use a Navwalker to allow for the responsive framework to work with the WordPress menu system

 Here’s a link to the one I use on Github (Bootstrap + WordPress) – _TK is one that does all that work for you

Here’s one for Foundation + WordPress – And FoundationPress which combines Foundation and WordPress loops

 

Get your theme all set up with the type of menu that you use the most

If you switch up your menu conventions all of the time – you don’t need to modify the menu once you get your nav walker set up. Personally I really like a menu style from a modified bootstrap look called Jasny – You can check out that menu look here. It just opens up from the side (push menu) which looks more like the clean stylish menu’s of squarespace or Foundation rather than the dry dropdown look of Bootstrap’s menu.  Maybe I need to get into a Foundation base theme!

Use the WordPress Customizer to set up a few options on your theme like the logo, and perhaps a few colors if you’d like

Here’s the full run-down on working with the customizer.

 

Setting up Widget areas in your footer if that makes sense for what you normally do

Here’s the full run-down on adding widget areas via functions.php and adding to your template

 

Setting up your “hero” or billboard image to use the featured image for posts and pages – if that’s a convention you use often

I find that this is something that I always end up using – and since I’m usually the designer on my projects (and also have helped art direct others) it makes sense that I bake this right into the theme.

Here’s how to make the featured image of a post or a page in WordPress the background of your hero area.

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div id="post" class"your-class" style="background-image: url('<?php echo $thumb['0'];?>')">
<p>text demo</p>
</div>

And of course the CSS – however modified to suit your look.


.your-class {padding-top: 7%; padding-bottom: 3%; background-size: cover}

If you use a particular Carousel/Slider often – consider setting that up, to at least be functional on the site

I find it much more helpful to have a really basic slider built for developer than any crazy slider that has 1,000 options but makes it a pain to get it to do the specific thing you want and be responsive in the right way etc.

Taking it too far – Things I’ve added that haven’t sped up development

  • Advanced Custom Fields in any degree
  • Deep color options in the Theme Customizer
  • Switching out dark and light themes

 

 

 

 

 

 

 

 


  •  
  •  
  •  
  •  

Ready to get started?

Get a free consultation now