If you are thinking of getting started with WordPress theme design and development, whether to customise an existing theme, or have a go at making your own creations from scratch, then the resources in this post should give you some good information to help you take those first steps.
With a mixture of advice, links to tools, tutorials, and other resources, there should be something to fill any knowledge gaps you may have in this key area of WordPress usage, and help you get started off on the right track.
Hopefully you will be able to save yourself some time and unnecessary effort by picking up some tips on good practice before getting started. You can also find a selection of resources that take care of the design initiation tasks for you, which aren’t always the best use of your time.
Even if you currently have no plans to ever develop your own WordPress theme, by checking out some of these resources, you should be able to talk about, evaluate, and choose WordPress themes more effectively, by taking in a bit of background knowledge on this topic.
Coincidentally, just as this post was being written, the guys over at WP Shout released a free 40 page guide on Mastering the Fundamentals of WordPress Theme Design which you should definitely check out if you want to know more about theme design and the processes behind creating themes and how they work.
Understanding the WordPress Loop
The Loop is one of the core components of WordPress and how the themes for this software are built. For that reason it’s an ideal place to start when delving into the world of theme design.
The function of the loop is to display the WordPress post content on a website. The code contained in the loop affects which post or posts are displayed, and along with which components, such as the post date, title, and author information. This makes it a vital part of any theme and is a good place to begin experimenting with editing code and seeing what affect your changes have on the frontend of the website.
The Loop might seem like a confusing concept to grasp at first. However, many WordPress experts have taken the time to break this topic down into more digestible chunks, all for your benefit.
So before getting your hands dirty with the loop, it is definitely recommended to read at least a few of these articles, all of which do a good job of explaining the loop in all its glory:
- Demystifying “The Loop” in WordPress (PressUp)
- What is the WordPress Loop (Welcome to WP)
- What is: Loop (infographic) (WPBeginner)
- Comprehensive Beginner’s Guide to the Loop (Treehouse)
These posts are all written in different styles, with some including graphics to help get their points across. This means it’s worth checking a few out to see which one is able to convey the information to you in a way that clicks best.
Work Smarter with a Starter Theme
In a recent post here at the DesignWall blog I wrote about the benefits of using a WordPress starter theme for your next development project.
You can get the full details in that post, as well as a look at the best starter themes available for WordPress. But in short, using a starter theme allows you to save time and effort by using the foundations laid out by others. As these WordPress starter themes have already been tested and improved since their release, you get the benefit of the experiences of many users, while still having control over how your theme looks.
This frees up your time to allow you work on creating your own custom designs and layouts, without having to worry about the underlying structure of your theme and spending time creating all the individuals files and directories.
What Not to Put in a Theme
Heavyweight feature packed themes might be the best sellers on marketplaces like ThemeForest, but that doesn’t mean you should follow their lead. In fact, there is a growing number of voices in the WordPress community who are speaking out against this approach to theme development. This in turn is starting to perhaps signal a return to the days of themes which had a strong focus on design rather than trying to include an endless feature list.
Unless you are building an app-theme for a specific purpose, such as a directory WordPress theme, then bundling up features and post types into your designs isn’t a good idea, at least not from an end user perspective. Even with app-style themes, this approach is questionable.
By incorporating features into your themes, such as sliders, shortcodes, and other elements, instead of providing them via a plugin, you are making life very difficult for your users should they try to change themes. Switching from a theme that includes many features and content elements, often results in a broken site and a large clean-up operation.
The following articles explain why function and form are best separated, with a few tips on how to effectively work, and develop themes, in this way:
- Should I Do This in a Theme of Plugin? (Tom McFarlin)
- Why Custom Post Types Belong in a Plugin (Justin Tadlock)
- Four Things a Theme Shouldn’t Do (PressUP)
- The Right Way to Include a Plugin in a Theme (CrowdFavorite)
A plethora of features can help sell a theme, as the top selling products demonstrate. However, locking in users by incorporating features into a theme doesn’t offer the best user experience in the long term. If you want the users of your themes to keep coming back for more, separating out the features from the design can make their experience a more positive one.
Theme Options Best Practices
Making a custom theme options control panel page for your theme might be tempting. It gives you the opportunity to extend the creative vision of your project from the frontend to the backend. Why not go crazy with those boring old WordPress default control panel and theme options pages?
Using the native WordPress user interface for the options pages for your theme has a few important advantages in its favour. The main one is a better and more intuitive user experience.
By integrating the control panel with the rest of the WordPress admin backend and dashboard, you can create a seamless environment, which makes adjusting the options for the theme nicely integrated with the settings for adjusting the core WordPress functionality.
By using your own custom theme options pages, you create a break in the user experience. Things that worked one way, might now suddenly not work in the same way. The position and appearance of buttons could change, with wording altered, creating a confusing user experience.
Another point to consider is that there are already good solutions available for adding options and control panels to your theme. Like starter themes, this saves you from repeating the efforts of others, and allows you to focus on creating the design of your site which is what you set out to do.
While all systems can’t be expected to use the same interface, when we are talking about a set of options inside an already familiar interface, it’s beneficial to the user that the controls are consistent. Forcing the user to unexpectedly have to learn a new interface is less than ideal. This also applies to plugins for WordPress, so it’s worth bearing this in mind if you have plans to develop any.
Here are some articles on WordPress theme options pages, and some tools on adding them to your theme in a consistent manner:
- Make Theme Options Pages Less Bloated (XLD Studios)
- Options Framework and Customizer (WP Theming)
- Make WordPress UI (WordPress.org)
Hopefully this content has convinced you of the importance of designing your theme’s control panel to look and feel like a part of WordPress, as well as giving you some tips on achieving this objective.
Theme Design Tutorial and Resources Roundup
After taking in all of the above hasn’t put you off and you still feel like you are ready to get started with WordPress theme development, here are some tutorials and other resources that can help you get off to a flying start:
- Setup a local development installation of WordPress (WPMU Dev)
- Developer Tools for Working with WordPress (WP Gear)
- Ultimate WordPress Theme Development Glossary (WP Lift)
- How to Build a Responsive Theme with Bootstrap (Treehouse)
- How to Create a Simple Theme (SiteGround)
- Create a WordPress Theme from HTML (WP Explorer)
- Design, Develop & Sell WordPress Themes (Udemy)
Armed with your new local installation of WordPress, a glossary of theme terms, and a number of free tutorials, as well as the option of taking a premium course, there should be nothing holding you back.
If you follow the current best practices, while also adding your own personality and ideas into the mix, you should be able to create something that not only looks great, but is also easy to use and user friendly from both the end user and administration perspectives.
Hopefully you have learnt something new by checking out the resources in this post. Whether you want to get started with creating a theme for your site, or improve your skills in order to release a theme into the wild, either for free or for a fee, then this post should have given you some useful tips and pointers.
Even if you have no plans to design your own theme, as a regular WordPress user it can be helpful to have a good idea of what is going on behind the scenes. This can allow you to talk more confidently about your website, shop more effectively for a new theme, work with developers, and make qualified recommendations. It also gives you the opportunity to fix minor issues, or at least identify those who know what they are talking about when offering to carry out any development work for your WordPress sites.
What other tips would you give to aspiring WordPress theme developers; or what would you like to know more about when it comes to theme design?