Roadmap for WordPress Developer

I started my way in development websites on WordPress around 10 years ago. To be honest, I just started to fix some bugs and maintain sites. I had no idea on which CMS they were built, I just dug into the code and tried to do what I had to 😅. But what I did know were basics of web development, like HTML, CSS, JS for front-end and PHP with MySQL for the back-end. So here’s in more detail what you should learn to develop professional websites based on CMS WordPress, IMHO.

DECIDE WHAT YOU WANT TO DO

First of all, you should understand for yourself what exactly you’re planning to do with WordPress. You can be an Elementor templates developer, for example. In this case, you should know only WordPress basics like installing WordPress, adding/editing posts or pages, working with menus and widgets, and of course working with the Elementor builder itself. But if you want to develop custom plugins or themes on WordPress — then you need to learn some technical stuff too.

THE BASICS

On the web, it all starts with HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets*)*. Basically, even if you’re planning to work with WordPress using builders like Elementor or WPBakery — you still need to know at least basics of HTML and CSS. There are tons of different courses, videos on YouTube and articles on the Net about learning HTML and CSS, so it’s up to you which one to choose. As for me, I prefer MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML.

After you learn how to place elements on the page and style them, you can REALLY start to develop on WordPress.

First you need to understand that you cannot be ONLY a front-end or ONLY a back-end WordPress developer. You have to be both — means you’re gonna be a full stack developer.

Of course you can work with WordPress knowing only a front-end or a back-end (e.g React developer builds a front-end for some custom WordPress plugin). But to be a WordPress developer itself and be able to maintain all the path from markup to the final product (theme, plugin) requires being a full stack developer.

THE FRONT-END

Despite WordPress including jQuery (which is a library for JavaScript) I highly recommend learning JavaScript from scratch. Because the more complex your WordPress sites become the more knowledge you need to maintain and improve them (both in front-end and back-end). And jQuery only helps you to work faster and more convenient with DOM and AJAX basically, but doesn’t replace all JavaScript’s syntax (like arrays, objects, functions etc). Besides, it becomes handy when you work with other developers’ code, which they can write in so-called vanilla JS (clean JavaScript without any extra libraries).

Like with HTML and CSS, there are plenty of docs about JavaScript, so you can learn it in any way you want (Google helps you). I can suggest MDN Web Docs or the Codecademy course for beginners.

When you get comfortable with JavaScript itself, you can get into jQuery. It’s a JS library that makes a lot easier to work with elements, handling events and AJAX requests etc.

For example, here’s how to make an element to fade out and then remove it in plain JS:

let s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){
  (s.opacity-=.1) < 0 ? s.display="none" : setTimeout(fade, 40)
})();

And here’s how to make the same thing with jQuery:

$('#thing').fadeOut();

The official documentation is quite explicit, so you can start to learn jQuery there.

I mentioned a couple of times something called AJAX. It stands for Asynchronous JavaScript and XML. It’s a method that allows websites to make quick, incremental updates to the user interface without reloading the entire browser page. For example, when a user clicks on a submit button to post some form with a quiz, the result of the quiz appears on the page immediately so the user doesn’t need to reload the page to see it. This makes the website faster and more responsive to user actions.

In addition, when you become an advanced WordPress developer you can start learning React. This is another JS library to build complex web applications. It can be useful when developing builders (like Gutenberg or Divi) or their components for WordPress. Also, with WordPress REST API you can build complex web apps, where React will be responsible for the front-end and WordPress itself for a back-end. Until you get into React, you can build custom Gutenberg blocks in much easier way:

How and Why to Build Custom Gutenberg Blocks in WordPress

THE BACK-END

WordPress works on PHP. It’s an open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. WordPress core expands it with its own functions, but the start is PHP. Learn basic syntax, read about functions and classes, error handling and namespaces.

The explicit documentation is available on the official website, but as usual — learn in the most convenient way for yourself. Watch YouTube videos, read different manuals, pass online courses, go to some code classes — it’s your life 🙂

After PHP itself, start to dive into WordPress core functions, coding standards etc. It all can be found at the WordPress Developer Resources. The most basics are actions and filters. I’ve also wrote about them in this post about useful tips for WordPress developer:

5 useful tips for Wordpress developers

I can also recommend studying at least some basics of MySQL. This is a free, open-source and widely used relational database management system (RDBMS). In simple words, this is a database (DB) where all your WordPress data is located. And to manipulate that data (adding/updating/removing) you need to use SQL (Structured query language). The official documentation of MySQL is quite messy and may be hard for beginners, so I recommend studying MySQL on W3Scools.com.

THE CONCLUSION

To sum up all that stuff you just read, I prepared this illustration about roadmap for WordPress developer:

Roadmap for WordPress developer

Here’re some links where you can study about all those languages and technologies to become a master WordPress developer:

1. HTML + CSS:
   • W3Schools tutorial for HTML
   • W3Schools tutorial for CSS
   • MDN Web Docs for HTML
   • MDN Web Docs for CSS
2. JavaScript + jQuery + React:
   • MDN Web Docs
   • Codecademy course
   • W3Schools tutorial
   • jQuery official docs
   • MDN Web Docs for AJAX
   • Official React docs
   • W3Schools tutorial for React
3. PHP + WordPress core:
   • PHP official manulas
   • W3Schools tutorial for PHP
   • WordPress developer resources
4. MySQL:
   • W3Schools tutorial

What was your way in WordPress development? Don’t hesitate to write your stories in the comments below.

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!