May 11th, 2020

Part 3: WordPress Plugin Adding Short-codes

Recently, I’ve been working on a proof of concept project which integrates our JPDF2HTML5 web service with the popular blogging platform WordPress. You can see the project on our Github repository. This series of articles is a writeup on various features I have used to create the plugin.

I demonstrated how to use WordPress to upload media as well as PHP’s SoapClient to access a web service. Now that the content has been converted, I’ll look at the final integral step to the plugin: embedding the content.

To embed the content I’ll be using a feature of WordPress known as shortcodes. If you’ve used WordPress plugins before, there’s a likely chance you’ve encountered them the basic form of a shortcode is a keyword between square brackets. You can also include other attribute tags which you can process alongside the shortcode. For this example we’ll be getting the shortcode [pdf id=”awjune2003″] to link our previously converted PDF into a web page. The screenshot below is a new post which will display our converted PDF once we’re done.

shortcode1
Note that the first shortcode link is surrounded in double brackets. Just like using a backslash to escape characters in certain languages, this displays the shortcode as is and not the actual content it links to.

The code to register a shortcode uses the add_shortcode() method, specifying the identifier for your short code (in this case we’re using “pdf”) and the method which processes the short code. For now let’s get it to change the shortcode to “Hello World!”.

Which changes the page to:

shortcode2

 

Now we know that the shortcode works, we can now change it to output an iframe containing our converted document. Notice in the code how I used a span to change the color, the code returned is HTML.

The next code sample does a few things;

First of all $atts is added as a method parameter, this is an array which contains all the attributes in the shortcode. In our case this is just “id”, which is the name of the pdf.

Secondly we use the WordPress function shortcode_atts() to get an array with only the attributes we want. If no value is found for ‘id’ it will have the default value -1. We also check that ID is valid and move on, if it isn’t valid we return an empty string.

Finally we create the URL for the document and an iframe to contain it. Then the string value of the iframe is returned and gets displayed on the page.

Which gives us:

shortcode3

 

I hope you’ve found this post useful. Remember, if you want to check out a more fully-featured version of this plugin, check it out on our Github repository (it has some nice extra features like a preview window and a cleaner UI for the admin panel).

panel

Hopefully you have found this series of articles on the word press plugin useful.

Collected

Leave a Reply

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

recent post

Part 3: WordPress…

Recently, I’ve been working on a proof of concept project which int...

 759 Views
Part 2: WordPress…

Uploading Files The goal of the plugin is to convert a PDF in WordPre...

 832 Views
Part 1: WordPress…

WordPress is one of the most popular content management systems on the...

 778 Views
CSS Hacks For Every Web Developer
CSS Browser-Specific Hacks

What is this? Browser hacks is an extensive list of brow...

 1132 Views
What are Operators…

Operators are symbols or keywords that tell the JavaScript engine to...

 2246 Views
CSS3 Visual Formatting…

The CSS3 visual formatting model is the algorithm that is used to pro...

 458 Views
Animatable Properties in CSS3
Animatable Properties in…

The following section contains a complete list of animatable propert...

 477 Views
Custom Permalinks in…

Do you want to create custom permalinks in WordPress for posts, page...

 434 Views
HTML5 Tag Reference

HTML5 has many new tags included and many others deprecated from the...

 448 Views
Resize and Make…

Have you ever tried resizing a image to make it larger? This usually...

 461 Views