Where to Learn WordPress Theme Development

More than a decade ago, I made a three-part video series about WordPress design. After that, I made other series with the same spirit, such as the redesign of live v10, a friend’s website, and even wrote a book. However, these are a bit outdated now. If you're just starting to learn WordPress theme development, you can still learn something when watching these videos, but some parts will feel very old (old UI and older versions of the software). All code still works, though, because WordPress does a great job of backward compatibility. I still get letters from some people who find these videos very helpful to them.

But over time, I was asked recently what resources I would recommend now, and I thought I should look around and see which resources are good for me.

Who are we talking about?

WordPress developers have a wide range of things, from people who don’t understand code at all or have little exposure to code to veteran programming geeks who build all custom content.

1. Choose a theme that looks good and use it.
2. ?‍♂️
3. ?‍♂️
4. ?‍♂️
5. ?‍♂️
6. Senior programming geek.

I can't communicate with anyone on both ends of that range. There are a large number of people in the middle. They write code, but they are not computer science professionals. They are the ones who “get the job.” Maybe it's like this:

1. Select an available theme and use it.
2. Start with a theme and use built-in tools to customize it.
3. Start with a topic and modify it with code to suit your needs.
4. Start from scratch and build what you need.
5. Start from scratch and build a highly customized website.
6. Senior programming geek.

I've been around #4 all the time and I think it's a good choice. I've tried to get ready-made WordPress and popular plugins to take the heavy lifting, but I'll use my own front-end (HTML, CSS, and JavaScript) and customize what I have to customize. I'm making a template. I'm writing a query. I'm building a module. I'm doing modularity as much as possible.

I think it's very powerful in this area. I can build many of these sites almost alone. So, what resources are there today that can help you learn this type of WordPress theme development? Let me see what I can find.

Old-style improvisation

There are indeed some benefits to learning practice. Practice to produce true knowledge. In my life, I learned a lot in this situation.

The trick here is to install WordPress on a live server and then play around with settings, plugins, custom programs, and edit the theme file itself to get the website to perform actions. You will find HTML in these theme files - modify it! You will see that the PHP code is outputting content. Can you tell what and how to operate it? You will find a CSS file in the theme - edit it!

The official documentation here can help you:

• How to install WordPress
• Developer Resources
• Use Google Search when you have problems

In a way, I like live operations (on production sites) because when you’re a beginner, it gives you a sense of realism about what you’re doing. The risk is high and makes you feel the power you have. When I make these changes, anyone around the world with an internet connection can see it.

When I first started, I did this by buying domain names and hosting, installing WordPress on this hosting, logging in with SFTP credentials, and then processing the live files directly. I used Coda, it's still a popular app and it's actively developing new versions as I wrote this article.

Hopefully the risk is real but low . For example, you are working on a personal project or a personal website. At some point, it becomes too dangerous to make modifications on a production website. A single line of misplaced PHP syntax can crash the entire website.

If you are working on a client website, you need to upgrade your workflow.

Modern improvisation

The modern, healthy, and standard way to deal with websites is:

1. Process them locally .
2. Use version control (Git), do new work in a new branch.
3. When the code is pushed to the main branch, such as when your development branch is merged, deploy the code to the production website.

I recently made a video about how I perform this entire workflow today. My tool set is:

• Work locally using Local by Flywheel.
• My web hosting is also Flywheel, but that is not necessary. It can be any tool that provides SFTP access and runs WordPress: Apache, PHP, and MySQL. Statement, Flywheel is a sponsor here because I love them and their services :).
• The code is hosted in a private repository on GitHub.
• Deploy the code to Flywheel hosting via Buddy. Buddy monitors pushes to the master branch and moves files to the production site via SFTP.

Now that you have the local settings, you can play your part. Do whatever you want. You can't break anything on your live site, so you're more free to make experimental changes and see the results.

While working locally, you may use a code editor to edit files. I would say that the most popular choice now is the free VS Code, but there are also Atom and Sublime, as well as more advanced editors like PhpStorm.

Once you push your code to a Git repository, the freedom to modify files will be particularly noticeable. After you complete this, you are free to restore the file to the state you last pushed.

I use Git software Tower, which allows me to see which files have changed since the last time I submitted the code. If I make a mistake, cause a problem, or do something I don't like - even if I don't remember what exactly I changed - I can discard those changes back to their previous state. This is a good degree of freedom.

When I do commit the code, whether it is committing to the main branch or by merging the branch to the main branch, Buddy starts and deploys the changes to the production site.

But, where to start?

We are talking about WordPress theme development here, so you start with the theme. The theme is actually a folder of files in the WordPress installation.

 <code>root - /wp-content/ - /themes/ - /theme-name/</code>

WordPress comes with some themes. As I wrote this, the Twenty Twenty Theme comes with WordPress and it is a great theme! You can definitely start by modifying this topic.

Topics tend to have some perspective on how they organize themselves and do things, and Twenty Twenty is no exception. I would say, maybe it's controversial, as long as it's valid code and does things in a "WordPress" way, there's no only right way to organize your topic. It's just a feeling you have to master when making a subject.

Start the topic

In my day, starting a theme was a very popular way to build a theme from scratch. I'm not sure if this is still the case, but the main idea is a theme that contains all the basic theme templates you need (single blog post pages, home pages, 404 pages, search results pages, etc.) with little tagging and no style. This way you have a blank canvas where you can build all HTML, CSS, and JavaScript to your liking. It's kind of like you're building any other website from scratch using these core technologies, just that it contains some PHP to output content.

There is a theme called Starkers that is very popular but has now stopped maintaining. I made a theme called BLANK myself, but haven't touched it for a long time. After searching around, I discovered some new themes with the same spirit. Here are the three best I've found:

• HTML5 Blank
• BlankSlate
• _s ("Underscores")

I personally can't guarantee them, but they've all been updated recently and in my opinion they're a great place to start. If I start a project from scratch, I'll try them out. I'd try to download one and polish it to my liking and save it as my own launcher in case I need to do it again.

It is worth mentioning that many web developments do not start from scratch, but deal with existing projects. In this case, the process is still setting up the local environment; you just start not from scratch, but from an existing topic. I would recommend copying the topic and changing the name so that even if you deploy it, it won't affect the live topic. Others might suggest using the launcher as the "parent" theme and then branching to the "child" theme.

To get your local development environment fully synchronized with your production website, I think the best tool is WP DB Migrate Pro, which extracts production databases and all media files to your local site (paid products and paid add-ons, great value for money).

More advanced startup themes

Rather than starting from scratch, start with topics with reasonable default values ​​or even modern build processes. The idea is that building a site using basically raw HTML, CSS, and JavaScript is perfectly feasible, but not enough modern convenience to be comfortable.

Here are some.

• Morten Rand-Hendriksen has a project called WP Rig that contains a variety of development tools. The Gulp-based build process starts a BrowserSync server for automatic updates. JavaScript is processed in Babel. CSS is processed in PostCSS and the code is lint checked. He uses it to teach WordPress.
• Roots created a theme called Sage that contains the template engine, the CSS framework of your choice, and the fancy build process content.
• Ignition has a build process and various auxiliary programs.
• Timber comes with a template engine and many code helpers.

I think all of this is pretty cool, but it may not be suitable for beginner developers who are just starting out.

books

This is difficult because there are too many books. In a quick Google search, I found a website selling fifteen WordPress books bundled for $9.99. How do you even know where to start? How good can they be at such a low price? I have no idea.

A few years ago, Jeff Starr and I co-wrote a book called Digging into WordPress. Jeff is still constantly updating the book over the years, so I think it's a good choice! Jeff also has other books like The Way of WordPress and Deep Learning WordPress Themes.

Many other books dedicated to WordPress theme development are quite old. stuff from 2008-2015. Again, it's not that there's nothing to learn out there, especially since WordPress doesn't change much, but still, I want to read a book that's updated five years ago. This seems like a huge opportunity for a target audience as large as WordPress users and developers. Or, if there is already something I can't find, please let me know in the comments.

Perhaps learning is turning online so that people stop writing books…

Online learning courses

Our official learning partner Frontend Masters has a course on WordPress that focuses on JavaScript and WordPress, so this may not be entirely suitable for learning the basics of topic development. Still, it's fascinating.

Here are some other things that look good when I searched around:

• SuperHi: WordPress
• Chris Dixon: WordPress 5 Theme Development Academy with Bootstrap v4
• WPSHOUT: Basic Courses
• WPCasts (Free on YouTube)
• Know The Code, which uses a specific theme framework for teaching.
• Udemy: Zac Gordon's complete WordPress theme and plug-in development course

Zac's courses look the latest and perhaps the best choice.

A completely different direction in theme development

One way to build a website with WordPress is to not use WordPress themes at all! Instead, you can use the WordPress API to extract data from WordPress and build a website to your preferences.

• WordPress REST API (built-in!) you can use to do something like this.
• Gatsby and WordPress
• Use wp-graphql instead of REST Use GraphQL.

This idea of ​​decoupling CMS and the front end you build is very clever. It is often referred to as using "headless" CMS. It's not for everyone. (One of the main reasons is that, to some extent, it doubles your technical debt.) But it can make both the CMS and the front-end grow independently.

The above is the detailed content of Where to Learn WordPress Theme Development. For more information, please follow other related articles on the PHP Chinese website!