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

Leave a Reply

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