Creating a WordPress theme from scratch was a daunting task for me when I started WordPress development. Yes, I knew how to write basic PHP, HTML, CSS and Javascript but there is lots more to learn.
WordPress has an ecosystem of its own. Just because something is working doesn’t mean that it’s the right way to get the job done. You can code themes and plugins which work as expected but does not follow the WordPress ecosystem.
Even simple WordPress themes have things like pingbacks in their header. As a newbie, I was left scratching my head, completely clueless about what the hell was going on.
After scanning tons of codex documentation, lots of googling and countless hours of reading and hard work, I finally managed to assemble a view of the grand picture. This view is grander than I ever imagined.
In this multi-part tutorial, I will share with you my experience of WordPress theme development. You and I, together we will dissect a WordPress theme inside out to learn what goes into making a top notch advanced WordPress theme from scratch.
A 1000-hour head start
Want a 1000-hour head start? You can have it thanks to underscores, popularly known as _s. Underscores is an open source starter WordPress theme that has the highest of standards and quality.
Developed by WordPress experts from all over the globe, _s highlights the best development practices and years of WordPress theme development experience. Underscores is an incredible theme. It is used as a base in many of the default WordPress themes.
Once you are done with this tutorial and have a complete understanding of how everything works, you can start creating your very own themes using _s.
Throughout this tutorial, I will use many parts of code taken from _s template and some from default WordPress theme twentysixteen.
Pre-requisites
WordPress theme development needs the knowledge of PHP, HTML, CSS and Javascript. So, I assume that you are familiar with these languages.
And of course, you will need to setup a local development environment and a local WordPress installation.
Before developing themes, take some time to get familiar with the WordPress ecosystem. Check out the dashboard and how it works. Create posts, pages and menus. Try some plugins and themes.
The WordPress API
The WordPress Application Programming Interface abbreviated WordPress API makes WordPress what it is today. The API is well thought out, easy to use and well documented. Thanks to the brilliant API, WordPress can be extended to meet any requirements.
The WordPress API is separated into multiple sections. Each section deals with a specific set of functionality. The complete list API is available here.
You don’t need to know every single API to code WordPress themes. Many of them are meant for plugin development. WordPress recommends that themes don’t invade plugin territory but we will need many plugin territory functions while coding our theme (Don’t worry, I know what I am doing!).
A list of API you should get familiar with
Template Tags – A template tag is a simple PHP function. They instruct WordPress do perform some operation like output dynamic data. WordPress offers an extensive selection of ready-made template tags.
The complete list of template tags is available here. Get familiar with as many as you can. You will find them extremely handy. You can also create your own template tags.
Plugin API (Hooks, Actions and Filters) – This API deals with Hooks which combines Actions and Filters. This plugin territory API is heavily used in every WordPress theme.
Hooks allow us to perform some operation like displaying content or changing the content at a specific time. Sometimes, a task can be completed using either an Action or a Filter.
We will use hooks to setup theme functionality like automatic title tags, HTML5 markup, adding stylesheets and Javascript files and much more.
Widgets API – The widgets API is used to create custom widgets. This API is extremely easy to use. If you are planning to create your own widgets, then you need to learn how this API works.
Shortcode API – This ingenious API powers the WordPress shortcodes. The Shortcode API is pretty simple to use. But make no mistake about it – it is extremely powerful.
Tons of information is available online on how to use the WordPress Shortcode API.
Theme Customization API – This API deals with the WordPress customizer, probably the best way to add customization options to your theme. Starting at WordPress 4.0, this API is more powerful than ever before.
This is an advanced API. Theme foundation has a great tutorial on this subject. Check it out to learn more about the Theme Customization API.
Settings API – If you are not satisfied with the WordPress customizer and the Theme Customization API, then behold the Settings API. All powerful theme frameworks are powered by the settings API.
No matter whether you are planning to use an existing theme framework or create your own, you need to learn how this API works if you are planning to integrate advanced theme customization options.
What is i18n
Internationalization, abbreviated i18n the process of writing plugins and themes that can be easily translated to any other languages. Nationalization refers to localizing an internationalized plugin or theme.
WordPress is used all around the globe. Always make sure that your themes and plugins are translatable. Internationalized plugins and themes can be translated without the need to alter a single line of source code.
WordPress i18n is based on gettext, a reliable open source software. More information on WordPress i18n is available here.
WordPress coding standards
WordPress has its own coding standards. It’s best to learn to them so that your themes and plugins can be easily read, by developers around the globe.
Check out our article on WordPress coding standards here and the official WordPress coding standards guide here.
Conclusion
This concludes the first part of the series Create WordPress theme from scratch. In the next part of the series, we will look at the WordPress template hierarchy.
