Wednesday, May 18th, 2022

Where to Learn WordPress Theme Development

More than a decade ago, I did a short three-part video series on Designing for WordPress. Then I did other series in the same spirit, like videocasting the entire v10 redesign, a friend’s website, and even writing a book. Although they are getting a little longer in the tooth. If you’re getting into WordPress theme development, you can still learn to look at them, but there will be moments that feel too outdated (older UIs and older versions of software). all code still Works However, because WordPress is great at backwards compatibility. I still hear from people who found those videos very helpful to them.

But since time has moved on, and I was recently asked what resources I would suggest Now, I thought I’d look around and see what I liked.

Do you like how I dropped the WordPress logo on some stock art I bought, which includes both the computer and the chalkboard, to create that feeling of “learning”? How good. I know.

Who are we talking to?

there is spectrum WordPress developers, people who don’t know any code at all or barely touch it, hardcore programming nerds to custom build everything.

  1. Choose a theme that suits you, use it.
  2. Hardcore programmer nerd.

I can’t speak to anyone on either side of that spectrum. it’s a whole world of people medium, They can code, but they are not computer science people. They get the job done People. Maybe it’s something like this:

  1. Choose a theme that will work, use it.
  2. Start with the theme, customize it a bit using the built-in tools.
  3. Start with a theme, hack it with code to do what you need to do.
  4. Start from scratch, build what you need.
  5. Start from scratch, build a highly optimized site.
  6. Hardcore programmer nerd.

I’ve always been around #4, and I think it’s a nice sweet spot. I try to do the heavy lifting of off-the-shelf WordPress and the big popular plugins, but I’ll bring my own front-end (html, css, and javascript) and customize what I need to do. I am making template. I am writing query. I’m building blocks. I am doing modular where I can.

I feel powerful in that area. I can build a lot of sites like this, almost by myself. so where are the resources Today Which help you to learn this kind of WordPress theme development? Lemme see what I can get.

Wing it, old school

There is something to be said for learning by doing. trial by fire. I have learned a lot in my life under these circumstances.

The trick here is to install WordPress on the live server and then play around with the settings, plugins, customizer and edit the theme files yourself to get the site working. You’ll find HTML in those theme files—hack it! You will see PHP code spitting out the contents. Can you tell what and how to manipulate it? You’ll find a CSS file in the theme – edit that sucker!

Editing a WordPress Theme and Seeing What Happens

The official documentation here may help you somewhat:

To some extent, I’m a fan of doing live (on a production website) because it gives a sense of reality What are you doing when you are a beginner. The stakes are high there, giving you a sense of your power. When I make these changes, they are there for anyone in the world with an internet connection to see.

I did this in my formative years by buying a domain name and hosting, installing WordPress on that hosting, logging into it with SFTP credentials, and literally working on live files. I used Coda, which is still a popular app, and is actively being developed into a new version of itself as I write.

This is Nova, a macOS code editor from Panic with SFTP built-in.

Hopefully, the stakes are real but Less, Like you’re working on a pet project or your own personal site. At some point, hacking on production sites becomes too dangerous for a thought. One line of wrong PHP syntax can take down an entire site.

If you’re working on something like a client site, you’re going to need to upgrade that workflow.

modern winging it

The modern, healthy, standard way of working on websites is:

  1. work on them at the local level,
  2. Use version control (git) to branch where new commits are committed master branch.
  3. Deployment to production website is done when the code is pushed master branch, as if merged into your development branch.

I did a recent video on this whole workflow as I do today. My toolset is:

  • Work locally by Flywheel.
  • My web hosting is also Flywheel, but it is not required. It can be anything that gives you SFTP access and runs what WordPress needs: Apache, PHP, and MySQL. Disclosure, Flywheel is a sponsor here, but because I like them and their service :).
  • The code is hosted on a private repo on GitHub.
  • Flywheel Hosting is deployed by Buddy. looks to push Buddy master Moves files to production site on branch and SFTP.
local by flywheel

now that you have Local Setup, you can go crazy. do whatever you want. You can’t break anything on the live site, so you’re free to make experimental changes and see what happens.

When working locally, it is likely that you will be editing files with a code editor. I’d say the most popular option these days is the free VS Code, but there are also fancier editors like Atom and Sublime and PhpStorm.

The freedom to hack on files is especially evident when you extend your code to a Git repo. Once you do that, you have the freedom to to undo Files back to the position of the last push.

I use Git Software Tower, and it helps me see what files have changed since the last time I coded. If I’ve made a mistake, created a problem, or done something I don’t like—even if I can’t remember exactly what I changed—I can cancel They switch back to their final position. That’s a good level of freedom.

When I Doing commit code to master or by merging into a branch master, that is when Buddy initiates the changes to the production site and deploys them.

CSS-Tricks is a WordPress site in itself, which has evolved continuously over 13 years.

But like, where do you start?

We’re talking about WordPress theme development here, so you get started with a theme. Themes are literally folders of files in your WordPress installation.

root
  - /wp-content/
    - /themes/
       - /theme-name/

WordPress comes with some themes. As I write, the Twenty Twenty theme comes with WordPress, and it’s a good one! You can absolutely start hackin’ your theme on that.

Subjects tend to have some opinion about how they organize themselves and work, and Twenty Twenty is no different. I would say, perhaps controversially, that a true way To organize your theme, as long as it’s valid code and does things the “WordPress” way. This is something that you have to realize when creating a theme.

starter theme

Starter themes were a very popular way to start building a theme from scratch in my days. I don’t have a great idea if that’s still true, but the big idea was a theme that had all the basic theme templates you’d need (single blog post page, a homepage, a 404 page, search results page, etc.) Very little markup and no styling. This way you have a blank canvas from which you can customize all your HTML, CSS and JavaScript to your liking. Sort like you’re building any other site from scratch with these basic techniques, with only some PHP spitting out the content.

There was a theme called Starkers which was popular, but it is now dead. I made one myself called BLANK, but haven’t touched it in a long time. Looking around a bit, I found some new topics with the same spirit. Here’s three of the best I’ve found:

I can’t confirm for them personally, but they’ve all been updated somewhat recently and are great starting points for me. I would give them a shot in case I was starting from complete scratch on a project. I would be tempted to download one and then decorate it exactly how I like it and save She As my own starter in case I need to do it again.

It is worth mentioning that a lot of web development Not there Starting from scratch, rather than working on existing projects. In that case, the process is still setting up a local environment; You are not just starting anew, but starting over with an existing theme. I suggest duplicating and renaming the theme when you hack it, so if you deploy it, it doesn’t affect the live theme. Others may suggest using Starter as a “parent” theme, then branching out into a “child” theme.

For syncing your local development environment exactly like a production website, I think the best tool is WP DB Migrate Pro, which converts the production database to your local site and all the media files (paid products and a . Paid add-on, worth every penny).

Fancier Starter Themes

Instead of starting from complete scratch, there are themes that come with sensible defaults and even modern manufacturing processes for you to start over. The idea is that building a site with essentially raw HTML, CSS, and JavaScript, while completely doable, just doesn’t have enough modern features to be comfortable.

here are some.

  • Morten Rand-Hendriksen has a project called WP Rig with all kinds of developer tools built in. A gulp-based build process spins up a BrowserSync server to perform automatic updates. Javascript is processed in Babel. CSS is processed in PostCSS, and the code is lined up. He teaches WordPress with it.
  • Roots makes a theme called Sage that comes with a templating engine, CSS framework of your choice, and fancy build process stuff.
  • Ignition consists of a manufacturing process and all kinds of auxiliaries.
  • Timber comes with a templating engine and a bunch of code helpers.

I think these are all great, but probably not even for beginner developers who are just starting out.

Books

It’s hard because there are so many. In a quick Google search, I found a site selling fifteen WordPress Books as a bundle for $9.99. How would you even know where to start? How good can they be for that rock bottom price? I don’t know

I wrote a book with Jeff Starr centuries ago called Digging Into WordPress. Even after all these years, Jeff still keeps the book up to date, so I’d say it’s a great option! Jeff has other books like The Tao of WordPress and WordPress Themes in Depth.

A lot of other books specifically about WordPress theme development are quite out of date. 2008-2015 stuff. Again, it’s not like there’s anything to learn there, especially since WordPress doesn’t change that fast, but still, I’d like to read a recent book that’s half a decade old. Sounds like a huge opportunity for the target audience as WordPress users and developers. Or if there’s already stuff out there that I can’t find, let me know in the comments.

Perhaps learning is moving towards online so much that people do not even write books as much.

online learning courses

Our official learning partner Frontend Masters has a course focused on JavaScript and WordPress on WordPress, which may not be perfect for learning the basics of theme development. Still, fascinating stuff.

Here are some others that I liked looking around:

Zac’s course looks like the most updated and probably the best option out there.

A completely different direction for theme development

One way to build a site with WordPress is to not use a WordPress theme at all! Instead, you can use the WordPress API to suck data out of WordPress and build the site however you please.

This idea of ​​decoupling the CMS and the front end you build is pretty neat. This is often referred to as using a “headless” CMS. It’s not for everyone. (One big reason is, it kind of doubles your technical debt.) But it can bring both the CMS and the front end the freedom to develop independently.

Source link