Category: WordPress

Creating the WordPress Plugin

Ok, you just created the Javascript/HTML/CSS code you want to use for your WordPress site on an HTML page. How the heck you get this into your WordPress page? Well, with the magic of plugins.

What are plugins?

Plugins are a file and directory structure used by WordPress to add code to your WordPress site. Here is an example of the directory structure .

public_html/wp-content/plugins/
public_html/wp-content/plugins/movetotop/movetotop.php
public_html/wp-content/plugins/movetotop/assets
public_html/wp-content/plugins/movetotop/css
public_html/wp-content/plugins/movetotop/js
public_html/wp-content/plugins/movetotop/README.md

The main file that tells WordPress plugin how to run is movetotop.php

The other directories and files are:

README.md – Markdown readme file.
assets – image files and fonts used by plugin. Fontawesome is used here.
css – Cascading Stylesheet used by plugin. The stylesheet totop.css lives here
js – JavaScript files used by plugin. The JavaScript totop.js file code is here.

Creating the plugin.

Chop it up.

First things first, we will “chop” up the HTML and JavaScript code and place it where it needs to go.

To make the file naming consistant with the plugin name, I renamed the custom.css file to totop.css and custom.js to totop.js. Otherwise, there is no change to the content of the files or code enclosed.

I also separated the fontawesome files into assets/fontawesome-5 directory so to better organize these assets.

Movetotop.php and how it’s organized.

The real magic of WordPress plugin is found in the movetotop.php file.

There are three sections found in a plugin file:

Header. This is commented header enclosed is /* */

add_action/add_filter – this tells WordPress to execute scripts to add the CSS/HTML/JavaScript files into the HTML generated by WordPress sent to the web browser.

Function(s). This is the scripts that injects the CSS, HTML or JavaScript files when called by add_action/add_filter.

Well, let’s go into how this file is created and what is used.

Header File

Header file contains the following:

/*
Plugin Name:
Plugin URI:
Description:
Author:
Version:
Author URI:
*/

This is self explanatory. Without this information, the plugin will not show up in the WordPress plugin dashboard.

The hook function

The hook functions add_action/add_filter – This adds the CSS/HTML and JavaScript file into WordPress hooks. Generally, hooks are the location of the content.

Here are the five hooks used by this plugin:

add_action(‘wp_head’,’AddFontAwesomeCSS’);
add_action(‘wp_head’,’AddMoveToTopCSS’);
add_filter(‘the_content’,’AddMoveToTopButton’);
add_action(‘wp_footer’,’LoadJQuery’);
add_action(‘wp_footer’,’AddMoveToTopScript’);

Basically, the format is:

(Location of content(hook), Function content to be applied).

There are MORE hooks than what we’re using here (over 1,000+ hooks, see this link for a comprehensive list) which do a variety of things. For this example we’re just sticking to the basic ones.

Function

The function that injects the content inside the HTML.

Here is an example:

function AddMoveToTopCSS() {
$cssurl=plugins_url(‘/css/totop.css’,__FILE__);?>
<link rel=”stylesheet” href=”<?php echo $cssurl; ?>”>
<?php }

This function injects the css/totop.css file name and location and outputs it as a text HTML reference. This is then called by the hook function and injected in the location (hook) specified.

Wrap up.

That’s how you develop a basic WordPress plugin. We didn’t cover other stuff like an admin backend interface with configurable parameters. That we may do another time.

In the meantime, have a good day.

Roy

 

 

 

 

You may wonder how you go about modifying your WordPress site just adding a piece of JavaScript code.

Perhaps you are handy with writing some HTML, CSS, and JavaScript but you don’t know where to begin with converting it into a plugin for WordPress.

I will show you how you can do this with the MoveToTop example plugin that I have created and placed on GitHub.

You don’t have to write a whole blown out plugin if you just want to add a simple code snipped or tweak to your site, plus you can use it in ANY of your sites you need this snippet.

This plugin which I use on this site, creates a button on the lower right corner of the web page. When you click on it, it moves the web page to the top of the page (Get it…move to top…) You can customize it’s behavior and appearance by modifying the CSS and JavaScript code.

To get this magic to work, the first thing you need to do is to write a basic HTML page with the plugin in question. The script (totop.js) has to be working along with the HTML (found in movetotop.php), CSS (totop.css) appropriate libraries such as J Query, Font Awesome.

I wrote a static HTML page and made this page work first.

In the next article, I will show you how I developed the test code.