How to write a WordPress Plugin part 2 – Static HTML/CSS/JavaScript

When you write a WordPress plugin, you are essentially inserting HTML and JavaScript code into a webpage. The first thing you do is write a static HTML page with the effect you have in mind first.
While there are several kinds of plugins available for WordPress, we’ll only concern ourselves with adding a feature to the site as described above.

The first thing I did was fire up my favorite editor.
I used Visual Studio Code https://code.visualstudio.com/. You can use any editor you wish such as Sublime, Brackets, Notepad++, Atom.
I like VS Code since it integrates EMMET https://emmet.io/, has built in IntelliSense https://en.wikipedia.org/wiki/Intelligent_code_completion#IntelliSense, and supports several plugins that make it very useful.

If you follow the link https://github.com/roadkillon101/HTML-example-of-MoveToTop, you can download the source files.

The first file I’d like you to look at is the index.htm file.
If you open it up in a web browser, you will see a bunch of lorem ipsum text. You scroll down the page, the “move-to-top” button will show up at the lower right hand corner of the web page. You press the button and the page will scroll to the top of the page.
Open up this index.htm file in the editor and I’d like you to notice the following:

<script type="text/javascript" src="./js/lib/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
<link rel="stylesheet" type="text/css" href="./css/fontawesome-all.css"/>
<link rel="stylesheet" type="text/css" href="./css/custom.css"/>

To make the button appear, we need the following:

JQuery – for the animation effects.

FontAwesome – for the up angles in the button.

custom.js – for the JavaScript code.

custom.css – for the styling of the button.

We also have the button itself with the FontAwesome fonts in the HTML.

<button onclick="topFunction()" id="toTop" title="Go to top"><i class="fas fa-angle-double-up fa-2x"></i></button> 
</button>

This code has to first work in a static HTML page before you make it work anywhere else.
I tweeked the code until it looked right and behaved as I expected it to here before making it work as a plugin in WordPress.

I won’t go into detail about how to write JavaScript or write CSS styling. You can examine the code and see how it works.

What I want you to notice is where the snippets of code are placed in the HTML. This is where the snippets need to be placed in the WordPress dynamically generated pages.

In this case, the code is in the header of the HTML and the body.

The next article will describe how to turn it into a WordPress plugin.

 

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>