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

For a quick recap, this tutorial series is about building a WordPress plugin that will dynamically load content into a modal window and then allow you to cycle through the rest of the content on the page.

This plugin isn’t an official plugin. It’s meant for exploring different concepts and techniques that I’d like to learn more about. That’s not to say you couldn’t take it and continue to build it out!

This first part is all about getting the WordPress plugin setup along with our dev environment.

Plugin Functionality Requirements

This is a little bit of an aside, but I wanted to provide a few details for the problems this plugin will solve.

First, we will need the ability to add employee profiles that consist of their name, job title, photo, and a brief bio.

Second, there will need to be a page that lists out all of these employee profiles as cards.

Third, after clicking on an employee, their details will open up in a modal. The user will then be able to navigate through the rest of the content without closing the modal.

Now, on to the plugin setup!

System Requirements

I’m going to assume that if you’re reading this tutorial you have an up-to-date, local WordPress development environment setup.

You are also going to need Node (I’m using v9.3.0) and either NPM or Yarn to install dependencies.

Git should also be setup on your machine, but it’s not required.

Starting Files

To give you a jumpstart, I’ve setup a repo that contains the plugin scaffolding.

The starting files can be found here: https://github.com/efuller/wp-cycle-content-tutorial

The master branch will always be the starting point. I will create new branches as we progress through the series.

Clone the Repo

The first thing you will need to do is create a folder inside your plugins folder. You can name it wp-cycle-content-tutorial.

From your terminal, change into that newly created directory so you can clone or download and unzip the starting files.

If you do not have git installed, do this:

Head over and download the starting files as a .zip file from here: https://github.com/efuller/wp-cycle-content-tutorial/archive/master.zip

After downloading, just unzip those files into the wp-cycle-content-tutorial we created.

If you have git installed, do this:

After changing directories, enter the following command into your command prompt and press enter:

git clone git@github.com:efuller/wp-cycle-content-tutorial.git .

Your newly created directory should now have a bunch of files in it!

Install Dependencies

From your terminal, make sure you are inside the plugin directory and run either npm install or yarn, then go grab a cup of brew while all the things install.

Configure the Plugin

Open wp-cycle-content-tutorial.php in your favorite text editor.

Customize the plugin headers to your liking. Here are what mine will look like:

Activate the Plugin

At this point, you should be able to into the WordPress admin and activate the plugin.

Configure Browsersync

The tooling for our plugin is built out using Webpack. In a WordPress environment, I find it much nicer to use Webpack with Browsersync for live updates while coding.

There is only one line of code we need to adjust in order to get things working.

In the webpack folder of our plugin, locate the file named webpack.dev.js.

Find the line of code that looks like this proxy: 'learnwp.test'. You will want to swap out learnwp.test with whatever your local domain is.

So the Browsersync config should look something like this:

Run it!

With the configuration setup, make sure you are in the root directory of the plugin and from your terminal run yarn dev or npm run dev.

You should be able to visit http://localhost:3000 and your site will load!

To verify things are working properly, go to the src/front/scss/main.scss file and add the following block of CSS:

Go back to your browser which should be located at http://localhost:3000 and the background of the webpage should be a golden color!

After verifying, you can go ahead and remove that block of CSS.

What’s Next

Now that we have the plugin all setup and ready to go, we will get into writing some code in the next part!

[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.

Why?

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.

Iterations

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.