How To Create a WordPress Plugin For Your Web App

23

Feb 2018
WOffice

How To Create a WordPress Plugin For Your Web App

Today, we are going to see how to create a very simple WordPress plugin for any web app that needs to insert a piece of code to your site.

To follow this tutorial, you need basics:


  • PHP and Object Oriented Programming
  • JavaScript, we’ll use jQuery and Ajax
  • WordPress development, most functions are from the WordPress core.


You can find a working result of this tutorial on this Github repository.


These web apps could be CrazyEgg, Freshbook, Google Analytic, Facebook Pixel or Feedier.


Why?


They all need to inject some HTML / JavaScript code to your site for various purposes.


This “code” is always parametrized with variables and usually is a pain for the site owner because he needs to edit the theme’s templates. So, how about we create a plugin to do that for us?


Okay, let’s do it!


Step 1: Find Your Web App – Feedier Example


The goal of this tutorial is to create a WordPress plugin that adds a WordPress admin page.


Plus, some settings  to configure the app’s in-site widget and inject the HTML / Js code in our web page automatically. Nothing fancy, just something that works fine.


So, we do need a web application for this tutorial. We will use for this example Feedier.


However, if you do have the other web application to apply this tutorial, please do. Just rename the “feedier” with your app and adapt the settings to what this app needs. 


Most of them will give you a snippet to add to your site in order to work.


Quick briefing of Feedier if you never heard of it:


  • It’s a feedback collector tool, using surveys to understand your users
  • It’s very flexible
  • It’s free! 
  • Has a good API (very important here)
  • Has an in-site widget (very important here)
  • Lets you reward your customers
  • Lets you create conditional questions
  • Has a complete analytic report dashboard
  • Lets you manage feedback individually


Here is the widget we want to add automatically:


Feedier Widget Preview


If you signed up to Feedier, then you can simply find the code in the Share tab of your survey:


Feedier Preview Sharing Method


Step 2: Setup Our Plugin and Its Architecture


WordPress plugins are by design very simple. Our plugin will only need two files.


  • feedier.php: main plugin’s PHP file.
  • assets/js/admin.js: JavaScript script to save the options using Ajax.


You can create a new “feedier” directory (or name of your web app) in your wp-content/plugins/ folder.


Directory Architecture


The most important file will be the plugin’s feedier.php class. Here is its structure:





 

 

 

 


 

"/>

 

/>

 

Please fill up your API keys to see the widget options.

 


Thus, the first thing we want to do is to create a new method to our plugin that will print this code depending on the variables set by the user. While using the architecture we already set up in the last part:


/**
 * Add the web app code to the page's footer
 *
 * This contains the widget markup used by the web app and the widget API call on the frontend
 * We use the options saved from the admin page
 *
 * @return void
 */
public function addFooterCode()
{
   $data = $this->getData();
   // Only if the survey id is selected and saved
   if(empty($data) || !isset($data['widget_carrier_id']))
      return;
   ?>