[000] – Create a WordPress Plugin That Dynamically Loads Content In A Modal

Welcome to my very first WordPress tutorial series!

For a good, while now, I’ve wanted to build a custom WordPress plugin that dynamically loads content into a modal and then allows you to cycle through the rest of the content on that page while never closing the modal.


There are several reasons why I want to build a plugin with this functionality. For brevity, I’ll list a couple reasons below:

  • AJAX in WordPress isn’t the easiest thing to grasp. Building a plugin like this will help me get better at it.
  • It’s all about learning. Don’t expect all the code and practices used in this plugin to be perfect. I’m still learning and always open to constructive criticism!
  • Fetching data dynamically and then using JavaScript to do something cool with that data is really intriguing to me. This concept can be hard to grasp in the context of WordPress.
  • For the past two years, I have been studying JavaScript outside the context of WordPress and it’s time I start sharing some of that knowledge with the WordPress community. I want to share my ideas on how we can use JavaScript in different ways with WordPress.
  • JavaScript is my language of preference, but building a plugin will help me build out my PHP/WordPress skills.


As it stands now, I have a working prototype built out for the plugin we will be building. The code isn’t final, but I wanted to at the least hack together a working version before starting the series.

I hope to make a couple of different versions of this plugin. I like to think of it as going from traditional to modern. Quick disclaimer: It will be a huge deal for me personally if I can actually get this first series of tutorials published. The second and third iterations will be bonus content at this point:)

In the first version, I will implement AJAX in a traditional sense using admin-ajax.php. We’ll also explore using the built-in JS templating WordPress provides along with ES6. jQuery is great, but we won’t be using it in this tutorial.

As I stated earlier, there is a possibility of a second and third iteration. One could implement the WP-API and the other could be an implementation built with React. It will all depend on how this first series goes!

What’s Next

In the next part, we’ll get the initial plugin setup and make sure our dev environment is good to go.



Leave a Reply

Your email address will not be published. Required fields are marked *