As a web designer, you want to bring out the best in your client’s websites. Sometimes clients just want a simple landing page to advertise their services, other times they want a fully-fledged e-commerce system with an integrated automated payment system and CRM-like functionality.
Whatever their requirements are; you as a web designer want to provide the best designs for your client. You have three choices: use an existing theme from the thousands of pre-built WordPress themes online, use a relatively simple pre-built theme and extend upon it, or create a WordPress theme yourself. All three options can be categorised by WordPress theme development skill level: beginner, intermediate, advanced.
For the Beginner
There is nothing wrong with using pre-built themes for WordPress. It is strongly encouraged to start off with using pre-built themes for your first projects so that you can get a feel of how they work both in the front-end as well as in the back. Pre-built themes often ranked from simple to complex in terms of functionality and extendability. If your client only requires a simple brochure website then most themes will suffice.
The best places to find pre-built themes would be from WordPress’ own Theme Directory and ThemeForest. For more complex requirements (such as sliders, parallax banners, fancy animations etc) you might try looking at the Avada theme or Salient themes. Both of these themes offer a ton of features and give you a lot of freedom to play around with layouts and styling. Most paid pre-built themes will bundle useful extensions such as Revolution Slider or Visual Composer editor plugins that allow you to easily add enhanced functionality to your WordPress site.
In most cases, using a pre-built theme is usually good enough for the client. Other times however, the client may want some other functionality or changes in styling on their site that the theme does not provide. In such cases, usually a third-party plugin can solve the issue but when all else fails, you will have to dive into the code and make adjustments. The next section will discuss further our second option; extending upon a pre-built theme.
For the Intermediate
Sometimes the client’s requirements exceed what a pre-built theme is capable of. They may want the layout to be different or they might want to change the styling of particular elements on the page. When such a situation arises, you have have to dive into the code and make those changes. As a basic requirement, you should know basic HTML/CSS and some PHP along with how WordPress themes work and where theme files are located. Once you’ve got these requirements down pat, it’s time to hack the theme! But wait! Before you go messing around through the theme files, it is important to start off with a child theme.
A child theme is a theme that inherits functionality and styling of another theme, which, not surprisingly is called a parent theme. Child themes are the recommended way of modifying an existing theme.
There are a few reasons why you would want to use a child theme:
- If you modify a theme directly (which is a big no-no) and the theme is updated, then all your modifications may be lost. By using a child theme that extends upon the parent theme, it will ensure that your changes are preserved when the parent theme is updated.
- As a web designer or developer you’ll know the pain of trawling through lines and lines of code to find that one line to edit. Creating a child theme allows you to simply write lines of code that will override the parent theme’s existing code automatically thus speeding up development time.
- Learning about how child themes work is also a great way to learn about WordPress theme development.
To get started on creating a child theme or what WordPress functions you can use, check out the comprehensive Child Themes guide in the WordPress Codex. There are also plenty of child theming guides online to help you get started with creating your first child theme.
However, child themes will only let you go so far in terms of functionality and styling. Sometimes, the only way to fulfill the client’s requirements is to create your own WordPress theme from scratch. Not to fear, there are plenty of starter themes to help you get started.
For the Advanced
Since WordPress is open-source and is built with the widely used PHP programming language, you have the freedom to modify it in any way you want. Creating your own theme from scratch is always enjoyable and always a great learning experience no matter your skill level. Before attempting to get straight into custom WordPress theme development it’s good to know the basics (HTML/CSS, PHP and WordPress hooks and filters) first or else you’ll become hopelessly lost in the jungle of code.
To help you get started with your own theme development it is best to use a starter theme. Starter themes only contain the bare minimum code and useful Boilerplate WordPress functions to get you started. From there on, it is all up to you to install what you need such as JavaScript libraries (for example Bootstrap or Foundation) and CSS preprocessors such as LESS/SASS. Since you are using a starter theme there is no need to create a child theme, it’s all 100% yours and hackable in any way you like it to be. So what starter themes should you use? Two very popular and free starter themes to use are Underscores and Roots by Sage.
Underscores
Underscores (known as _s or underscores) is an ultra-minimal CSS theme that contains the bare minimum requirements to run on WordPress. There’s no fancy LESS/SASS compiled stylesheets or custom templates. It does however provide a base template which you can build from as well as a few included JavaScript custom scripts to help you with theme customisation. To help you even further, it also comes with base WordPress template files such as index, head/footer, content page elements. It is easy to get started with this theme and once you’re ready to deploy, simply upload the files and select your theme from WordPress and you’re good to go!
Sage by Roots
Sage by Roots claims to be the best WordPress starter theme with a modern front-end development workflow. Unlike Underscores where you can simply download, edit, and upload the files to the server, Sage requires a bit of initial set-up to get going. You will be required to use Git to grab the latest copy of Sage and know how to use Gulp (streaming build tool) and Bower (front-end package manager). The Sage workflow also consists of BrowserSync (asset injection), asset-builder (asset collector and sorter) and wiredep (style injection from Bower into main stylesheet). It’s a bit daunting at first, but once you’ve worked out how everything works and how Sage structures it’s files, working with it becomes easy as pie! For more information and a quick guide on how to get started with Sage, check out the Theme Installation docs on Roots.io. If you require more help, there’s also the Roots Discourse community and of course, Google.
Don’t know which starter theme to choose? Roots.io provides a helpful guide on the differences. Remember to always stay DRY!
Closing the Tag
So there we have it. A brief rundown on WordPress themes and how they work. But the question remains: should you choose a theme or build one yourself?
It depends, if your client wants something simple and aren’t too fussy about details then go for a pre-built theme. If your clients has complex functional requirements and custom designed mockups, definitely go with custom building a theme using a starter theme template. In the end, a theme is just a bunch of files that determine the layout and styling presented on the page, whatever your skill level is, there is nothing stopping you from customising the theme in whatever way you like or in whatever method you prefer. So get creative! Show the world what you are capable of!