Simon Ugorji
My Very First WordPress Plugin - Coding Blocks

My Very First WordPress Plugin - Coding Blocks

Simon Ugorji's photo
Simon Ugorji
·

4 min read

ABOUT

Well, this plugin can be seen as an extension of google prettify made available for WordPress driven sites.

Google prettify is a small library that helps to add syntax colors on your code snippets, and supports a wide variety of languages.

Let's say you have a blog where you post code snippets, whatever the programming language might be, you can't use a default text editor to show users the code snippet, hence the need for google prettify.

You can learn more about it and how to install it on your site here.

WHAT ABOUT CODING BLOCKS?

It's been close to 4 months that I launched the WordPress plugin Coding Blocks.

The plugin is built with PHP for server side processing and storing of code snippets and then JavaScript for frontend rendering.

BUILD PROCESS

What made you a Developer if you never visited Stack Overflow?

BACKEND

Before a User saves a code snippet to the database, it will be parsed as a normal text, taking note of html tags and converting them to their respective HTML Entities.

I used the code from Stack Overflow here to convert all code snippets to HTML entities.

FRONTEND

You need to query those code snippets based on their respective saved titles and save them in a hidden html element, with an ID attached to it, then wait for the web page to load completely.

The code below illustrates how the code snippet would look like, when it is queried.

<p id="cb-console-log" style="display:none">
&lt; script &gt;
    console.log('Hello');
&lt; /script &gt;
</p>

Once the page is fully loaded, I used the createElement() method to create the HTML elements required for the structure of the code snippets.

var code = document.createElement("div");
code.setAttribute("class", "code");

document.body.appendChild(code);

The code above will create an HTML element and place it as the last Element in the body tag.

Then to convert the code snippets back to something HTML can understand, I used this code from Stack Overflow to decode it.

Decoding the code above will yield something like;

<p id="cb-console-log" style="display:none">
<script>
    console.log('Hello');
</script>
</p>

You see that it has converted the HTML entities (< and >) to their respective values.

Even this editor does it too.

PRETTIFY COLOR THEMES

There are two sources I used for the styling.

Now after importing the prettify styles, I queried the code snippet saved on a hidden html element, stored it in a variable;

var codeSnippet = document.querySelector('#cb-console-log').innerHTML;

Then moved the code to my code box, and I initiated the prettify JS to handle the rest.

When the code structure has been created completely, the JavaScript that handled its creation will delete itself.

Crazy right?

<script id="cb-create-code-structure">
    var code = document.createElement("div");
    code.setAttribute("class", "code");

    document.body.appendChild(code);
    //Destroy Self
    document.querySelector('#cb-create-code-structure').remove();
</script>

FEATURES

  • Instant preview of your code snippets before you save them.
  • You can also use the preview page to checkout the themes before you select one for your snippets.
  • You may enable Line numbers.
  • You may enable Copy button.
  • You may update all your code snippets to reflect your recent changes ( e.g if you recently enabled line numbers ).

IMAGES

So here are some images from the plugin interface

INSERT PAGE

image.png

PREVIEW PAGE

image.png

The Plugin in a WordPress post

firegist.com.ng_how-to-set-and-retrieve-cookie-values-using-javascript_(Surface Duo).png

You may look up on the full source code here on GitHub.

You may also download the Plugin Directly from WordPress.

TIPS

  • When building your first WordPress plugin, take input sanitization very seriously because this can delay you when you've submitted your plugin for approval.
  • Did you use any external library? Make sure to properly document why you used it, adding official links to the library and make sure that it is open source, or you have a right to use it. This will help prevent copyright laws.

Those tips above helped me build and launch Coding Blocks and I hope they help you too.

Thanks !

PHPWordPressJavaScript