Last week I was at the Pasadena General WordPress MeetUp, which I have the privilege of occasional hosting in place of the very knowledgeable Alex Vasquez. If you find yourself in the area come say hi.
Anyways, this question came up:
What are some good resources for someone who wanted to learn more about WordPress theme development?
A few developers in the room described their personal journeys to theming — many recalled trial and error, others cited specific resources however they were a bit outdated. There was also a shoutout to the WordPress educator extraordinaire Zac Gorden, who I believe is presently pouring his energy into JavaScript for WordPress.
In the vein of tutorials, personally I remember finding this gentleman’s YouTube Channel helpful for my journey.
WordPress Theme Developer’s Toolkit
Despite the thoughtful answers, the question lingered with me for a few days. I started to think about what were the conceptual pieces one would have to put together to wrap their head around WordPress theme development. And more fundamentally, what combination of resources and lessons would setup a future WordPress theme developer.
Lesson: Build a Website using only HTML and CSS
WordPress, Joomla, Drupal and any other Content Management System are all abstractions. WordPress provides a tremendous amount of utility bundled into a package that allows anybody to create a website.
Part of this abstraction is breaking a website into various components. For example a header, page content and a footer all come together to form a single page. In WordPress each of these three components correspond to files you will find in a WordPress theme. The reason they are broken into three files is not so important for this article, what is important is that the three files combine to form a single page.
This abstraction is ultimately beneficial for us when developing sites, however if you do not understand what is being abstracted away it can leave you struggling to connect the dots WordPress is filling in for you. On the other hand, to be able to build a page without the help of WordPress allows you to understand the fundamental structure of a WordPress theme.
If you were to build a one page website using only HTML and CSS you would start from the HTML head tag. That would be followed by the HTML body tag. And at the end of the body tag you would likely place a footer tag. Understanding the barebones of a website gives you perspective when looking at a more complicated file structure like what you would find in a WordPress theme.
If you took this process a couple steps further you would likely want to include a couple images, a CSS file and maybe even load a Google Font. Understanding how and where to reference these additional elements dusts away even more of the abstraction WordPress supplies. Additionally, you will need to store the image files and the CSS file somewhere in your site’s folder. The Google Font you would reference externally. Perhaps this is a little confusing. To quickly visualize this, here is another tutorial that demonstrates what I am describing: https://thehelloworldprogram.com/web-development/creating-files-folder-structure-web-pages/.
In a WordPress site we have all the same components — images, CSS and third party resources (the Google Font). Going from a content manager familiar with the WordPress dashboard to a theme developer who needs to be familiar with the theme file structure is challenging. However, if you go through the process of building a site using simply HTML and CSS, I believe you will find navigating a WordPress theme’s file structure much easier.
If you enjoyed this article, please checkout the next post in this series: Theme Developer’s Toolkit: Part 2.