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 OOP
  • JavaScript, we’ll use jQuery and Ajax
  • WordPress development as 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 an 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:

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

Step 2: Setup our plugin and its architecture

WordPress plugin 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.

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

We are doing a few things here:

  • Declaring our plugin using the header comments
  • Defining a few handy constants to be able to find the plugin’s URL and PATH easily
  • Declaring our plugin class that will contain everything we need in this plugin. We just need a constructor method for now

You should already see the plugin in your Plugins page, even though it’s not doing anything yet:

Step 3: Create our admin page

For this part, we will add a new Feedier admin page to our WordPress site and dynamically fetch our surveys from the Feedier’s API.

In our class’ constructor let’s register three new actions which are required to add an admin page on WordPress:

  • addAdminMenu will add a new page in the WordPress left menu. There will be also a callback to another method containing the page’s content.
  • storeAdminData will be called whenever the user clicks the “Save settings” button.
  • addAdminScripts will register a new JavaScript file to our WordPress admin in order to save the form’s data. But also exchanges some variables between the PHP side and JavaScript side.

The first one is very easy, we just register the page:

As you can see we use WordPress localization functions for all strings. Note that the:

Is where we call another method containing the page’s content. The form needs to be adapted to your web app.

Here, we first need to get the public and private Feedier API keys. Once saved, we are going to use the private key to dynamically retrieve our surveys. Whenever we get the surveys and not an API error, we display some new options to configure the widget.

At the beginning of this method you can see that we are first getting the saved data with:

And getting the surveys from the Feedier API:

So let’s declare the first one:

This function just reads our plugin’s option and gives us an array back so we can save multiple values in the same option.

Obviously, to get the second method working, we need the Feedier private key, which thus depends on the first one to access this key saved in the option:

The Feedier API is documented here, so you can see what you will get in the response:

https://feedier.docs.apiary.io/#reference/0/carrier-collection/get-a-list-of-carriers

At this moment, we have a complete new Admin page but nothing happens when we click on the save button because there is no saving mechanism, yet.

Good enough, let’s save our data!

As mentioned before, we will save our data using AJAX. Therefore, we need to register a new JavaScript file and exchange data using the wp_localize_script() function:

We also need to add a new file /assets/js/admin.js. That will simply make an Ajax call, WordPress will automatically route correctly the request to the right method (already done in the constructor). You can read more about how WordPress smartly handles AJAX requests here.

At this very moment, we can click the save button and the above script will make an HTTP POST request to WordPress. We also append an action parameter containing: store_admin_data. Which we declared at the beginning at this part in the constructor:

The method storeAdminData will receive the POST request and save the values we need in our WordPress option.

A few notes on the above method:

  • We use a “WordPress nonce” to handle the security and make sure this is coming from the website and not a hacker faking the request.
  • We identify the fields we need to save using a “feedier_” prefix. Once received, we loop through all the $_POST data and only save those fields. We also remove the prefix before saving every field.

That’s it for the saving process, when we click the save process we can see a POST request and our data is being saved on the database within the wp_options table.

Perfect, we are done with the admin page.

Step 4: Insert the dynamic code automatically into our pages

Now that we have our options saved, we can create a dynamic widget that will depend on the options set by the user though our admin page. We already now what the web app expect from us.

Something like:

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:

Now, we just need to call this function on every page load to add it at the bottom of the page. To do this, we’ll hook our method to the wp_footer action. By registering a new action into our class’ constructor:

That’s it! 👍

Any question, feedback, idea? Let me know in the comment!

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

Note that this is first version of the plugin, many things can be improved. Open to suggestions and improvements.

 

Share

Written by

2F

Lead developer at Alkaweb.

Leave a Reply

Your email address will not be published.Required

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

You May Also Like to Read