I’ve wrangled many a website theme over the years and built a few websites from scratch. I was thrilled one day when I came across the Twitter Bootstrap system because it saved huge amounts of time and laid a much better and quicker foundation for building sites and themes on top of.
I’d experimented with some Bootstrap-based WordPress foundations like Bones and WrapPress but they all seemed like quite hard work. A year or so ago I started using the Genesis framework instead. Although there’s nothing stopping you using it with Bootstrap’s HTML and Javascript elements (this site does just that), I find that I don’t ever need to use Bootstrap any more.
If you’re like me – a self-taught web coder who likes building websites – and intend to make a living from doing so – then here’s some reasons why I think Genesis might be worth a look for you:
- It’s built on a rock-solid foundation, by people who’ve forgotten more about HTML/CSS/JS/PHP/WordPress than I’ll probably ever know.
- It’s built with the best SEO practices at its core, not as an afterthought
- It’s really, really quick to build very customisable WordPress sites on.
- There’s a great community of users out there. In a sense we’re all competitors with each other but they’re very supportive and helpful bunch.
- It comes with some great features built in. Want to change between a Full width or a sidebar/content or content/sidebar layout per site, or even per page? It’s the click of a button. Want to remove a title on one page? Want to add a custom widget on your blog pages? Easy.
- It’s very cheap for what you get. At the price of most WordPress themes from Themeforest you’re getting a platform that enables you to build countless sites.
Why is it better than creating/converting a WordPress theme/ Bootstrap from scratch?
Because converting a HTML Bootstrap theme into a WordPress one takes forever, and your base WordPress theme is likely to be nowhere near as good/fast/secure/SEO friendly than one built by the experts. The one I built in my tutorial series is a great case in point – it does the job but it’s nowhere near as good as something built on the Genesis foundation.
Why is it better than buying a WordPress theme?
Ready-made themes like the ones you buy from Themeforest are nice and affordable if you want your site to look and work exactly like the demo one. Some of the better themes have good customisation options – but you’re still limited in what you can and can’t change.
Trying to hack into the theme to change the layout and add custom fields and post types is usually an exercise in frustration. You’re far better off building all those elements yourself – then you have complete control about what they look like, where they go and what they do. If that sounds like some pretty hardcore WordPress/PHP coding then you’ll be pleasantly surprised at how easy it can be. You need never write a single line of PHP of your own.
The learning curve
If you’re coming to Genesis from a standard WordPress theming background – including an ‘amateur’ one – then you’ll be used to the idea of editing the theme templates that make up different parts of the site. That’s what my tutorial does. Although you may not understand all of the code, the system seems intuitive. If you want to change the header you go to header.php. The sidebar is all kept in sidebar.php etc.
But what if you want a different sidebar on certain pages, or the header to look different on your homepage? That’s when it can quickly become complicated.
Genesis takes a different approach. It doesn’t have all those templates, and although you can create templates for certain pages or custom post types, you don’t need to. I do all those changes using the Extender plugin instead.
Genesis relies entirely on hooks and filters. These are actually part of WordPress’ core functionality anyway and Genesis just builds on top of them. The Genesis Visual Hooks plugin is the best way to get to grips with this new world order. Turn it on and you’ll see that a WP post/page is made up of lots of different sections that you can ‘hook’ into and either add or edit things.
As a basic example, you’ll see that there are ‘hooks’ called ‘before_header’, ‘header’ and ‘after_header’. If you want to take your Primary Navigation out of the header and put it below it then you just unhook it from ‘header’ and hook it into ‘after_header’ instead.
If you want a certain widget area or piece of custom code to appear below certain posts (like the Genesis boxes that appear at the bottom of my tutorial posts) – then that’s easy. You create a new widget area or piece of HTML and ‘hook’ it into the ‘after_content’ area in this case. Want it to only appear on posts that are in a certain category? Easy – with the Extender plugin you can do this without writing a single line of code. (It generates the code for you in the back end – so it’s a good way of learning the PHP if you want to).
There’s no denying that it can take a day or two to get your head round – but you’ll soon have a lightbulb moment and it will all start making sense.
The missing manual
If you’re looking for a manual, there isn’t one. Yet. Here’s where the Genesis community are a great asset. Once you’re up and running I suggest visiting Nick The Greek, Sridhar, the Google+ community and Carrie Dil’s ‘Genesis Hours’ podcast.
Can you use Genesis with Bootstrap?
Yes, if you want. This site does that. Bear in mind though that both Genesis and Bootstrap have basic typography, HTML element and layout CSS styling – so you need to be sure which order they’re loaded in. I think you’ll find like I do that you don’t really need Bootstrap anymore.
You can get the FontAwesome icons separately and the Genesis layout and typography is just as nice as Bootstrap’s. Bootstrap is still better for responsive layouts I think. Genesis is fully responsive and using its CSS media query breakpoints mean that you have the flexibility of using its full width/sidebar-content/content-sidebar/sidebar-content-sidebar etc layouts on any page you like.
One of the areas that Genesis isn’t so good out of the box for example is that you can split your content/layout into 4 columns (using the ‘fourths’ class). On big screens it will show each at 25% width and on smaller screens it will stack them under each other at 100% width. On medium screens though, you might want them to split into 2 columns of 50% width. That’s easier to do in Bootstrap 3. It’s just fairly basic CSS though. What I do is create my own class – so for instance I can have a div with class=”one-fourth stack”>. The stack is my own addition. I use the standard Genesis column classes and then create a .one-fourth.stack line in my stylesheet to overwrite the standard properties with my own tablet-sized ones instead.
My recommendations
With a fairly modest budget you can invest in everything you need to build your own WordPress sites that compare favourably with any that a client would pay tens of thousands of pounds for.
Here’s what I’d get:
1 The Genesis starter theme.
You’ll see on the StudioPress site that there’s loads of lovely looking Genesis themes available, and you can get a ‘Developer’ license that buys you access to all of them. I bought one of these in a Black Friday sale but I don’t ever use most of them. You’re better off learning how to customise the Sample theme I think. Once you get the hang of that you can make it look like the other themes pretty easily. As a starter theme for most of my sites these days I use the free Trestle theme – which is a brilliant turbo-charged version of the standard Sample theme. I thoroughly recommend it.
2Genesis Extender plugin.
This is what lets you create virtually any layout without any PHP coding at all. Plus it has a great frontend CSS editor that updates the page in real time. That alone saves you hours of time and frees you from constantly having to save and FTP your stylesheets when you’re developing a theme on a remote web server. There’s a sister plugin called Dynamik website builder. Take a look by all means, but it’s more expensive and I think you’re better off by learning how to use Extender.
3Types/Views.
This isn’t a Genesis plugin but it works perfectly well with it. While Extender handles all the layouts and conditional stuff, Views is a great alternative for those who’d rather use a point and click interface for wrangling the WordPress loop than delve into the PHP code everytime.
Whilst it’s certainly good to know how to wrangle the WordPress loop using code, it’s much quicker and easier to build and tweak the loops using Views. Here’s the kind of thing you can do with it in under 3 minutes:
- Build a list of the 5 latest News post items to go in a widget on your homepage. Want the date field in there too, or a featured image? Easy peesy. Just want to list ones that use certain tags/categories? That’s just the click of a button.
- Create a grid of a custom post type (like portfolio items or staff members) with a filter at the top so users can use a dropdown/checkboxes/searchbox to get the results they want. In fact it’s easy to make complicated ‘parametric’ searches (like the ones you see on clothes shopping or holiday websites for example) really easily.
- Create a template for a custom post type that displays custom fields instead of the standard title and content.
Views works alongside the free sister plugin called Types – that lets you create custom post types and taxonomies in a flash, and add custom fields to them with a drag and drop interface.
One of the good things about Types/Views is that you can you can use them in combination and export some or all of those combinations as a module. In my case for example, the charity websites I build have a Latest News, Jobs, Events, Staff, Fundraisers and Projects custom post type with corresponding Views – all set up in less than 5 minutes thanks to the module I use.
Something fairly simple like creating a post type of ‘Job’ with associated fields, and a page that lists all the jobs that are still ‘live’ (i.e. the closing date custom field is after today) can take an hour or so to do from scratch, but once you’ve made one you can just reuse it. Sure, you could find a jobs plugin, but there’s definite advantages in having complete control over all your own custom post types.
