Learn How to Build JavaScript Plugins for WordPress with Riad Benguella’s Starter Kit/Tutorial

photo credit: Krzysztof Puszczyński

Riad Benguella, the technical lead for phase 2 of the Gutenberg project, has published an educational resource to help WordPress developers get started building JavaScript plugins. The WordPress JavaScript Plugin Starter is unique in that it is built as a tutorial, not just a boilerplate. The GitHub repo contains eight commits that have been structured to explain each step along the way. Benguella designed the repository to answer the following questions:

  • How do I quickly setup a WordPress environment and how do I bake it into my plugin?
  • How do I define a WordPress Plugin?
  • How do I load a simple JavaScript script in WordPress?
  • How do I bundle my JavaScript files?
  • How do I use advanced JavaScript features like JSX?
  • How do I build a production-ready version of my plugin?
  • How does all this fit together?

Benguella predicts a shift in the WordPress development community, as JavaScript skills become essential for extending core’s rapidly evolving JS-based UI. Plugin architecture is changing to accommodate that.

“Plugin developers are required to use JavaScript more in order to extend the editor,” Benguella said. “Most blocks need to be developed using this technology. The modules Gutenberg provides (Components, data module, i18n, apiFetch…) will also encourage developers to extend other parts of WP-Admin in JavaScript. Instead of writing HTML/CSS screens from scratch and rendering them from the server, developers are able to bootstrap and prototype fully accessible new screens in WP-Admin by composing these components in a small number lines of code.”

Benguella’s WordPress JavaScript Plugin Starter resource demystifies the plugin creation process with detailed explanations of each step throughout the readme file. It’s a valuable resource for PHP developers who are just getting started transitioning into building JavaScript plugins.

8 Comments


  1. “Benguella predicts a shift in the WordPress development community, as JavaScript skills become essential for extending core’s rapidly evolving JS-based UI.”

    Don’t get me wrong – I love modern application development with an API first approach. VueJs has allowed me to do some pretty clever things.

    However, the shift from tinkering with libraries such as jQuery (which most WP devs can comfortably say they use) to use a framework such as React or Vue is a huge change and to self-teach is a very long and frustrating process.

    The beauty of WordPress was that it provided an accessible playground for people who wanted to try their hand at programming and extend their skills in a forgiving environment. Of course, this has led to some shocking code in plugins, but it is what made getting into web development fun. In fact, it’s what kicked-started my career all those years ago.

    Now that we’re reaching a point of Docker installs, dependencies, compiling and so on we moved past a place where beginners can get involved with WordPress. The base level requirements of knowledge are pretty extreme. It’s sad to see.

    Report


    1. 100% ack.

      Its gonna turn into something like getting into Typo3 development – you first have to learn a complete new language (Typoscript) before you can get down to the actual nitty-gritty.

      NOT AT ALL beginner-friendly. Maybe WP should replace its original motto of “Code Is Poetry” with “Code is Bureaucracy”, starting with 5.0 ^_^

      cu, w0lf.

      Report


    2. You’re underestimating beginners. They always find a way to hack into the code to do what they want. :)

      I couldn’t understand a line of JS but I still somehow always did what I wanted even if I couldn’t understand the code. Docker is also simple, you just need to know few commands and it’s all good to go.

      We’ve many non-coders in the meetup who are able to pickup Docker very quickly and they instantly fall in love.

      JS seems really scary in front of PHP, but everything new and unexplored in scary. :)

      Report


  2. Benguella predicts a shift in the WordPress development community, as JavaScript skills become essential for extending core’s rapidly evolving JS-based UI.

    I really doubt that JS developers will come in droves to contribute to WordPress. On the other hand, many current devs will stop contributing to a platform that is no longer welcoming to them. I, for one, find all the tooling and transpiling stuff not enjoyable at all to work with.

    Report


  3. That’s a very good starter kit for who is building the app with React. If you are looking for a Vue.js starter plugin, I created one a few months back.

    Report


    1. That seems pretty neat and useful. Will take a look once I’m done with Guten stuff and start exploring Vue.js.

      Report

Comments are closed.