Source: Pexel

For a little bit of context, I have been rebuilding a website lately. I started off with some sketches and wireframes for how I wanted the website and its pages to look. Once that was checked off, I began my search for a template that could fulfil my needs. Now I’ll be the first to admit, I only had a brief look, but I couldn’t find the perfect template. So I jumped at the opportunity to make one instead! It was a great chance to expand my knowledge of prominent technologies and gave me the flexibility to create a website that fit my designs and not one that is restricted by the tools I have. So context rant over, how does the plugin fit into all of this?
The more I worked on this template, the more I learned about WordPress’ flexibility, and the more I wanted this template to be reusable and not a one trick pony. So I started creating templates, asides, widgets, template-parts, and anything else I could manage with my limited knowledge. Maybe I missed something, but this allowed me to develop code easily on the source code side, but not on the admin side. I want any average Joe to be able to create an amazing site with minimal effort. And then it happened… Shortcodes.
For anyone unfamiliar with shortcodes, it is a way of creating a block of source code and being able to call it from the admin screen when you’re writing a post or making a page. On the back end you may have something like this:
//Short Codes
//[foobar]
function foobar_function() {
   //Do some fun, really cleaver code here.
}
add_shortcode('foobar', 'foobar_function');

And when you write a post you can just use [foobar] to execute that code in place. So this is great! You can build pages and posts using code with endless functionality without cluttering your page or overwhelming your users. But what happens when you don’t want the same output every time you call [foobar]? What if you want to be able to define the image used, or the pages you want to be displayed, or the colour of the text? Well, you can do all that by passing variables to your shortcodes: [foobar size=”large”] content of the function [/foobar]. This starts to get very messy very quickly, which is a payoff that I can really do without. So I dug around and stumbled across a plugin called Shortcodes Ultimate by Vladimir Anokhin. This plugin adds a whole bunch of shortcodes for doing all sorts of fun stuff like adding interactive maps, forms, etc. But this isn’t what I’m here for. I’m here for the UI. Shortcodes ultimate adds a UI to your posts and pages editor. This allows you to select from a list of shortcodes, then use a fill-in-the-boxes panel to customise your shortcodes fields.
But, I’m not here for the default shortcodes provided by the plugin, so how do I add my own custom codes to the UI? This is the point where things stop being free. The plugin has an addon called Shortcodes Ultimate – Maker. This provides a section in your admin panel to create your own shortcodes! So I copy pasted my first shortcode into the box and it worked! Now we’re on a roll! So I copy the next block and preview my page and… it crashes. Turns out I lucked out on the first shortcode. It was purely HTML with a few variables dotted in, added to the ‘HTML mode’ editor. Talk about beginners luck!
So here’s the first thing you should know about the plugin. The modes do different things! HTML mode is purely for HTML. This is great for basic components, but not suitable for shortcodes that loop through pages or use any PHP. For that, you have to use PHP echo mode. This will, however, require you to convert all your HTML lines to echo and also get rid of all your PHP tags.

<h2> <?php the_title() ?> </h2>

will become

echo "<h2>" . the_title() . "</h2>";

So there it is. A fantastic plugin to streamline your shortcodes and make your site more usable and flexible for your users.
From hard data to fluid design – Scott