[notice]New here? Head to the introduction to development chapter, the first part of our WordPress Developer Guide. This is the second chapter in a series of blog posts about our method for building WordPress and WooCommerce websites.[/notice]
On the internet we are used to loud opinions. They are normally in the comments of articles you read. These loud opinions are normally fanatical about the best way to do something.
Canvas is the best framework, no, Genesis is way better, no you should just buy a theme off theme forest, no you should use a starter theme! Everyone likes to be an expert.
“The fundamental cause of trouble in the world today is that the stupid are cocksure while the intelligent are full of doubt” – Bertrand Russell,
The problem with these loud opinions is that they are giving an answer before asking the question. The question is as important as the answer.
I always say to prospective clients: Requirements. Requirements. Requirements (and budget!).
We find many wandering without having specifying their requirements. They know where they want to get to, but they have set off without any preparation. It’s akin to setting off naked into that jungle! You’ll get bitten by some grisly pretty soon.
If you are looking for a small brochure site that will not need any content added, off-the-shelf design is not an issue and no bespoke work is required, then you may be better off not using WordPress let alone working out which theme or framework to use.
We recommend setting the requirements before the budget. If you don’t and you pose the question of budget the response is often, that we can afford the minimum. After all who can afford the maximum.
The smarter way to use requirements to determine the value the website provides. For example, if you are selling your widget online you may have a requirement for some custom work. Say you have an integration and for every order it saves you 5 minutes.
Now you can use this requirement to determine the value of the work. If we reach our target of 100 orders a week then this work will save 500 minutes, just over 8 hours. Joe Bloggs is paid $10 an hour, which is $80 a week.
After 6 months that will amount to $2000. If you use requirements like that you can make decisions which deliver a return on your investment.
List out all the requirements you have. If you are unsure then I can highly recommend heading over to clarity.fm where there is a whole range of expertise you can call upon.
Preparation is key. Determine requirements and choose based on what will yield a strong return on investment. Go with the figures and not the loud opinions.
Flexible with requirements
Let’s return to the example we had earlier. The custom work that will save you 5 minutes per order. There may be a plugin that will save 4 minutes per order instead. You might also have to change your businesses processes to work with this plugin as it has not be built exactly to your requirements.
However, the plugin costs $100 and you can buy an annual license which means you can be sure that it will be maintained to work with updates (whereas custom work may require additional costs to keep it unto date).
If you are flexible with your requirements you can sometimes achieve a similar result at a better ROI.
Don’t. There is no such thing as a child-plugin. Some plugins have modules and you can develop extensions for these, but don’t modify plugins.
Risk and Value
Sometimes value is hard to determine. In these instance consider your own time and perceived risk into the equation.
What is the risk that the solution will be working within a year. If it breaks and needs rebuilding, what would the cost be. If you are uncertain, then try and put it into figures. Bear this in mind.
The process we are outlining are all designed to minify risk and be fully transparent value can be gauged. Be honest about the risk. Be upfront about any ongoing maintenance that custom work may require, so a decision can be made that fulfils the requirements and the budget.
Frameworks vs Themes
If you do not have the budget or requirement for design and development then find a Premium Theme you will be comfortable with.
There are many ‘theme shops’ and theme marketplaces. Be careful about that Jungle though!
When shopping for a theme check the support tickets and to see how well the code is maintained. Keep an eye on the change log which will list how often the theme is updated. If it hasn’t been updated recently then that should raise an eye-brow.
Be sure to always create a child theme for a premium theme. This means that if an update comes out you can update. More on this later in the eBook.
The line between premium theme and framework is often blurred. A framework is an entire toolset to build a variety of different sites. There are many premium themes that market themselves as doing this as well. I’m not looking at these in this book.
If you are looking for a ‘no code necessary’, ’no design necessary’ all-in-one theme then this book is not for you.
This is the confusing part. In many respects WooThemes Canvas is a ‘do everything’ theme. You have an options panel where you can control typography, background colours, layout and more.
But we are going to disable all of that. It’s not what makes Canvas a good tool for us. When we have let site owners have control over the minutae of the site they often inadvertently cause problems. It’s also better discipline to control the styling of the site with SASS and CSS than use the built in controls. It’s a more future-proof process which let’s us fix and develop more efficiently. It provides better value.
If you want to build a bespoke site then you will want to work from a blank canvas. There are a number of frameworks that exist. We recommend WooThemes’ Canvas because it is supported by the same team that develop WooCommerce. It’s flexible and follows good practice. We like it so much we built Bamboo and Bambino around it.
Our recommended setup is:
- WooThemes Canvas Framework as Parent Theme
- Bambino as Child Theme
What about Starter Themes
There is another way. You can use a starter theme. This is a minimal skeleton to dress. It kicks ass but I don’t use it very often. I didn’t find this method of working fit with my ninja sensibilities. I took longer and was more clunky. I couldn’t use my hooks and actions (which you will learn to love). I couldn’t update the parent theme if there was an update (spoiler: there isn’t a parent theme!).
But I am keeping my eye on starter themes and you should too. I saw a fantastic talk at WordCamp Europe 2014 by Konstantin Obenland. His talk was passionate and inspiring. The guys at Automattic are building a cool starter theme called _underscores.
One to watch.
A child theme is used in conjunction with a parent theme. It lets you keep the parent theme untouched and add any custom work within the child theme.
This means that when the plugin author upgrades the parent theme you can upgrade it too without losing your custom work.
When a theme loads it checks the child theme folder first and then the parent theme folder. A file in the child theme will be given priority to load. This is true for all files in the child theme except the functions.php. Both the child and parent functions.php will be loaded.
Creating a child theme is simple, but a ninja plugin that helps is called [One-Click Child Theme][https://wordpress.org/plugins/one-click-child-theme/]. Activate your parent theme and then run the plugin. This will then create a child theme.
Alternatively use Bambino which is a child theme for Canvas by WooThemes. It’s already setup and ready to go.
Bamboo works alongside a child theme called Bambino. This duo are ideal tools for you to build your site.
Bambino works with the Canvas Framework by WooThemes. There are many frameworks out there, but because we are developing for WooCommerce it is more fitting to use the framework built by the same team. Remember, consistency is a key trait of the ninja.
We’ll look over the other options. It’s important to know the competition and not blindly hold onto a sagging bamboo branch just for the sake of it. I often review the alternatives. In fact I often pinch the best from them and integrate them into the Bamboo process.
Plugins are a big part of WordPress. They come in all shapes and sizes. They are awesome, but must be used wisely.
Plugin bloat is a problem. Many sites over do it and don’t curate their plugins.
Every plugin you add will require more resources from your server. The more moving parts in a site the greater the chance of there being a conflict. There are also many plugins which have similar functionality, so be mindful of what you are adding to your site and remove any obsolete or old plugins.
Be mindful of the plugins you add. Remove and delete those you don’t need.
When choosing a plugin always check the date it was last updated and the support tickets. You also get what you pay for and going Premium is a smart move if your online business depends on the plugin.
I love paying subscriptions for plugins. I will always choose a paid WooCommerce extension from WooThemes over a freebie and you should too. It’s much better value. If you have a business critical process it is important to know the functionality is being maintained so it will continue to work with the latest updates.
I’m a big proponent of open source. I think the best solutions have a mix of open source and premium. This provides for a robust solution. A solution where developers can continue to research, develop and maintain. This is exactly what WooCommerce has done and the key reason they have been so successful.
If you purchase from CodeCanyon or another marketplace you may only pay once. If you purchase from a subscription then you know they have a sustainable business model and you are investing in a solution that will be maintained.
Consider the risk, value and return on investment. Cheaper is rarely the best value.
Some plugins are useful for development and others for when the site is live. Always check which plugins are activated and whether they are required.
Here are some of our essential plugins for any site:
- Bamboo Plugin
- WooCommerce – Ecommerce module
- Advanced Custom Fields – Allows you to have specific fields for specifics pages
- Yoast SEO
- Image Widget
- Cookies for Comments
- Widget Logic
- BWP Minify – Optimises your site (live use only)
- Debug Bar (development use only)
- Regenerate Thumbs (development use only)
- WP Media Cleaner (development use only)
N.B We have added brackets around some plugins which may only be required when live or when in development.
We have groups of plugins that we often add and we wanted a way to add and remove them easily and in one go.
For example if we are looking at a new site for the first time there are a number of debugging plugins that we need to investigate the site. We could goto the plugin section and add them all individually, but that is not our ninja way!
So we built a single plugin called Plugin Bundles. You can find this on the WordPress repository as it is open source and available for all. Once this is installed it lets you install a bundle of plugins. For example the essentials list above is added as a bundle, as is our debug bundle.
We think you will find it super useful. If you have a cool bundle then you can create your own, or let us know and we can add it for others to use.
The first thing I mentioned about plugins was about the problems that they can cause. Conflicts can be a real PINA.
When you contact a plugin author the first thing they always say is: have you disabled all your plugins and tried with the 2012 theme.
They are trying to determine if the plugin has a conflict and where the conflict comes from. 2012 is a theme by Automatic.
We made a super easy way to debug plugins, called Bulk Deactivate. It’s on the WordPress repository as we open sourced it.
I’ll explain how to use it with an example. Say we have our Canvas child theme being used with twenty plugins. I can see that the home page is broken and think it might be a plugin but am not sure.
Bulk Deactivate shows all the plugins that are activated. It lets me deactivate them all and then enable them one by one. You can do all this with the normal plugin manager, but it is much more trouble.
This is a slick ninja tool and I hope it saves you many hours. It has for us.
A library is a collection of code that fulfills a function. For example if you want to have a lightbox modal window then we could use the prettyPhoto library.
It saves us from creating our own solution from scratch.
The following libraries are included with Bamboo. Some are also included in both Canvas and WooCommerce.
We’ve chosen the following as they are used by WooThemes but we are loading them throughout the site. This increases the load time of a page but provides consistency and utility when building.
If you don’t need a library, then don’t use it. These libraries can be disabled from loading in the Bamboo settings.
- PrettyPhoto – Ability to open items in a Lightbox
- Flexslider – Comprehensive Slider
- Modernizr – Feature detection HTML/CSS
- FontAweseome – Icon Library
- jQuery – jQuery library
Learning is an active process. You learn by doing. You will pickup the basics the more and more you get your hands dirty. And sometimes it will get dirty. Pages won’t load. You will get the White Screen of Death. You might knock out a server or two. But the best thing about learning code is that we have CMD+Z.
Edit > Undo. Let’s have another go.
All three follow a similar construction and as you learn one you will better understand the others.
- HTML – Used to build the structure of the site
- CSS – Used to style the structure of the site
- SASS – Clever CSS
- PHP – Used for dynamic elements (run on the server)
- JS/Jquery – Used for dynamic elements (run in the browser)
This eBook explains the code we use but does not attempt at teaching code. There are many great resources for this that already exist.
Although you can do quick edits from within WordPress it is recommended to use a code editor (known as an IDE).
There are many options available so use what you are familiar with.
We use Coda by Panic. This has a lot of functionality built in. It is super easy to pick up and a great tool to use.
WordPress is diverse and there are some very cool options available for development. For instance Varying Vagrant Vagrants are a very smart option. However a ninja wants the most immediate and simple solution available. Therefore we recommend starting simple and progressing from there.
Two options stand out:
Developing online – let’s you test in an environment that is similar to the live environment
Use ServerPress to develop locally – a simple solution to spin up new development environments without having arrange hosting.