In 2012, I’ve written an article to help you Build Your Own WordPress Development Environment with requirement resources to start your WordPress projects.
Making a theme for WordPress is easier than ever with a ton of tutorials, guidelines … Today we have a few amazing tips for you to help you boost the developing WordPress themes process. It covers several tips and tricks that will make you a better theme developer.
Getting started
There are several options to create a WordPress theme:
- Build a theme from scratch.
- Use a WordPress theme framework like Genesis, Theis, Hybrid…
- Edit an existing theme to add/remove more features.
- Create a child theme to make changes to an existing theme.
- Create your own parent theme.
As a newbie, the Theme Development article in the WordPress Codex is a good starting point.
Follow the official coding guidelines. Always!
- WordPress Coding Standards
- Theme Review Guidelines
- PHP Coding Standards
- HTML Coding Standards
- CSS Coding Standards
- JavaScript Coding Standards
While performing coding, make sure to keep an eye on the important aspects such as spacing, variable naming, indenting and commenting. You must make sure to use good namespace for all the functions by using short, common function names that would avoid any conflicts arising out of same function written by a different coder. Use names for variables, classes and functions that is self-describing. Functions should do as little as possible and be as short as possible.
Picking the right approach will result in a better theme, with clear and consistent coding, and it will minimize the amount of revisions you’ll have to do later.
Internationalization
Have you know? 45% WordPress downloads are for non-English. Making your Theme translation ready is strongly recommended. Read introduction about Internationalization in WordPress Handbook first. I prefer Otto’s the pitfalls of i18n.
Theme Options
You’ll find a lot of WordPress Custom Theme Options scripts, frameworks … if you looking for it through Internet. They are very good and has some fantastic features. Just research about their features then implement into your theme with Customizer.
Since WordPress 2.7, Settings API lets you define settings pages, sections within those pages and fields within the sections without write/choose your theme options panel. The Customizer has pre-built controls for things like text, check boxes, radio groups and drop down selects, as well as more complex controls such as the color picker and the image uploader. It’s enough for your theme.
Leveraging the Customizer in your own Themes is pretty straightforward.
Use WordPress libraries
Never replace the libraries bundled with WordPress, like jQuery, with your own or any other versions. If you still want do that or it’s working better than default, make it as option.
Use the wp_enqueue_script and wp_enqueue_style hooks for every single JS or CSS file you use. No excuses! Make sure to load the components that you actually need for the respective section of the website. Never opt for loading the administrator scripts on the front-end and vice-versa.
Tips: the get_template_directory_uri which returns the URL for the parent theme, and get_stylesheet_directory_uri which returns the one for the child theme. When you’re not running a child theme, both functions will return the same result, but it’s easy enough to spot an error.
Never Start from Scratch, use WordPress Starter Theme
It’s a different approach to WordPress theme development. If you want to create a new WordPress Theme from scratch, don’t start from the zero, you should be using a starter theme. Truth me! You won’t regret about it. WordPress Starter Theme will provide a great base for your next custom theme design project. It will help you understand how WordPress works and give you an appreciation for some of the best practices.
NARGA
I have no doubt that you too have experienced the tedium that goes with re-writing the same code over and over again. So I’ve created NARGA as parent theme to make child themes rather than create separate themes (currently, I’m running 6 WordPress websites). NARGA is an extremely versatile HTML5 & CSS3 WordPress theme based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices. It allows theme developers to forget about all the complex functionality and dive straight into coding their theme’s HTML, CSS, and JavaScript.
Underscores
Underscores wins with basics. It’s also highly recommended if you just want to understand how a WordPress theme works and maybe apply some of the concepts to your own client projects. Underscores aims to provide the mere essentials, so you can get on with what makes your site unique.
There are several WordPress Starter Theme that is worth to try: Roots, Bones, Quark, Hybrid Base (not framework)… Let’s take a look by yourself to choose the best of them.
I think it would be a good idea to develop your own “starter theme” that you can use for future projects. Just have a basic structure, a functions.php with some functions that you find yourself using across different sites, and a style sheet with a simple grid system and other general styles that could come in handy.
Cache at every level
WordPress has an internal cache, also for extensions can be used. You should also make sure you cache results from the database and generated output. All functions of cache are in the Codex by WordPress listed, so a look at the Codex is worthwhile if you deal with the syntax.
Browser Testing as you go Along
If any website looks and functions same on all browsers, then we can consider that as cross-browser compatible. Apart from designing a perfect WordPress theme, it is necessary to check the look and feel in multiple browsers. Browsers like Firefox and Google Chrome can easily adjust the new technologies, but coming to the Internet Explorer, special care is to be taken.
Here’s some of the best tools which will save you time when cross browser testing:
- browsershots.org
- Adobe browser lab
- crossbrowsertesting.com
Remember to know “what’s new” with WordPress?
If you do use outdated code in a theme, it may have known vulnerabilities that hackers can exploit or simpler, your theme stops working in later version of WordPress. There are plugins, such as Developer, Log Deprecated Notices and Theme-Check, that will help you scan your theme’s code for currency, respectively to avoid any problems with deprecated functions, codes.
Distributing Your WordPress Theme
You’ve created an amazing theme and now you want to release it but you don’t know things to do when preparing your theme for distribution. Here is some suggestion:
Theme License
WordPress is released under the GNU’s General Public License (GPL). This means that every WordPress theme you distribute (whether free or premium) must also carry the GPL license. Under the GPL, any user who downloads or purchases your theme is free to modify and distribute any part of it as they wish, without restriction.
If you still confusing with theme licenses, read more information on how the GPL applies to WordPress Themes.
Place to show your works
WordPress.org Theme Directory. is best place to show your works. All WordPress themes that submitted will receive a thorough review from a member of the WordPress Theme Review Team. WoW it’s 100% Human Review.
If your theme does not pass the initial review, you’ll have the opportunity to make the necessary fixes and resubmit your theme for a second round, or a third, until it passes. You have best practices about WordPress theme development. When your theme passed, it reaches the widest audience possible and everyone can install it from their WordPress Dashboard → Appearance → Themes
Did I forget something?
How about you – do you have any tips / tricks or techniques you use when developing themes? Let me know in comments or write a post on your own blog.