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!
I’m going to assume that if you’re reading this tutorial you have an up-to-date, local WordPress development environment setup.
Git should also be setup on your machine, but it’s not required.
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
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
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 email@example.com:efuller/wp-cycle-content-tutorial.git .
Your newly created directory should now have a bunch of files in it!
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
wp-cycle-content-tutorial.php in your favorite text editor.
Customize the plugin headers to your liking. Here are what mine will look like:
* Plugin Name: WP Cycle Content Tutorial
* Plugin URI: http://www.ericfuller.net
* Description: A plugin that will dynamically cycle content in a modal.
* Version: 1.0.0
* Author: Eric Fuller
* Author URI: http://www.ericfuller.net
* License: GPL-3.0+
Activate the Plugin
At this point, you should be able to into the WordPress admin and activate the plugin.
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.
webpack folder of our plugin, locate the file named
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:
// Browsersync is a better option when working in a WordPress environment.
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:
background: goldenrod !important;
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.
Now that we have the plugin all setup and ready to go, we will get into writing some code in the next part!