shortcode Archives » Page Builder Sandwich

Tag: shortcode

Shortcode Mapping: How PBS Will Support 800+ Plugins & 2,000+ Shortcodes
When I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

These past few weeks, the PBS team has added in a map element, and a tabs element as well.

Now, it’d come off as a pretty easy and plain routine for us to stick to adding in a new element every couple of days.

But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

Well, the simple answer is yes. Yes it is.

And we’ve managed to achieve this feat through shortcode mapping.

What is Shortcode Mapping?

Shortcode mapping makes building shortcodes more friendly.

Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

The benefits of a system like this are quite hefty:

1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

5.) Overall faster page building time!

Shortcode mapping isn’t new though, and a bunch of page builders already have them. What makes ours different, though?

How Shortcode Mapping Works in Other Page Builders

Each person/site does their own shortcode mapping.

Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

In this scenario, the burden of shortcode mapping is then left to you, the user. If you want all your shortcodes mapped completely with all the attributes (and with the pretty colorpickers and other stuff), you’ll have to make sure to input every single detail of each and every shortcode.

What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

How Shortcode Mapping Works in Page Builder Sandwich

Shortcode mappings are shared across all users.

Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

This gives us a lot of sweet benefits:
1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!
In case you’re interested in reading into how we made all of this possible, we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

Sign up to Our Newsletter!

You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!
August 8, 2016
The Unspoken Problem of Shortcodes

Shortcodes are one of the pinnacles of wordpress. Shortcodes are the bridge between developers and site creators, allowing people to place elaborate pieces of content almost anywhere they wish. Plugin creators love shortcodes since this allows more flexibility in the way how and where their users display their content.

If you don’t know what shortcodes are and what they look like, they’re those archaic code-like text wrapped in square brackets. They look something like this:

This specific one is called the embed shortcode and is built-in by default in WordPress. This specific one embeds the video from the URL into your content. Just copy and paste the above shortcode in your site if you want to give it a spin.

Behind the scenes, what happens is that when WordPress encounters a shortcode in your content, it gets processed and converted into something else. In our case above, whenever an

shortcode is detected, WordPress takes the URL in the shortcode and checks it against a number of content providers that it has. When it finds one, it then gets the appropriate iframe embed code and displays that instead.

So what’s the problem here? It sounds easy enough, you just enter a short text with brackets and you’re done.

Enter the Shortcode API..

Shortcodes Galore

The Shortcode API opens up the creation of shortcodes to developers. Because of this, developers can add their very own shortcodes inside their plugins.

This is great, now with just a short code-like snippet (hence the name “shortcode”), beginners and advanced users alike can put virtually any type of content they wish anywhere.

WordPress by default only has a handful of shortcodes. It’s easy to type them out from memory because there’re just a few of them. But if you install a few plugins, the number of shortcodes quickly jump up to a dozen or more, and in some cases more than a hundred. Each shortcode has their own set of attributes and instructions on how to use them. Each plugin most likely has some sort of documentation on how all of their shortcodes work and lists all of the parameters available in each one. But you’d be nuts if you try and memorize all of the shortcodes and their attributes.

The problem is that there is no centralized area on which you can find out all the shortcodes available on your site and how to use them.

Some Try and solve the problem

Some plugins try and solve this problem by presenting all of their own shortcodes in a easy to access drop down. Then clicking on one would print out the shortcode, complete with all the possible attributes for it. There’s no more need to memorize it, which is a good thing.

Some go farther and add in a settings popup form that has checkboxes and color pickers to populate the shortcode’s attributes.

This solution sort of works. However, each plugin only enumerates their own shortcodes. So if each plugin creates their own form of shortcode picker, you’re bound to run into times when you have multiple shortcode pickers on your screen (This has happened to me before).

In other words, each plugin does their own does their own thing and implements their own solution for their own shortcodes. Some plugins add either a new button beside the “Add Media” button, or a new one inside TinyMCE.

So now you might be thinking, “Why not just also gather the shortcodes of other plugins and include that in your dropdown / shortcode picker too?” Well, that’s exactly what I thought. But, this is easier said than done. I’ll explain why in a bit, but first let’s look at what an ideal solution would look like.

The Ideal Solution

The perfect plan would be to create a plugin that gathers all of the available shortcodes in your site, then presents you with the list and also help you fill up all the attributes. And every time you install a new plugin, all of those newly introduced shortcodes would be presented to you as well.

Imagine a central place where all your shortcodes would be placed for easy access. Each shortcode would describe what they do and what plugin they belong to. Then for each available attribute, imagine each of those would have a label, a proper way to select a value for them and a description. You’ll be shown drop downs, color pickers, radio buttons, toggles and whatnot.

Something like this would make our lives as website and content creators easier. No more checking different documentations, or different parts of your admin just to copy a generated shortcode for a slider that you want to use.

The Caveat

Unfortunately, it’s quite difficult to do something like that right now. There is no sure-fire way to know all the details of a shortcode. You can get a list of all shortcodes, but only their actual tags/names, you can’t get any additional details about them such as a kist of attributes, what they do and their types – like a string, a color or a number. Nor can you get a semblance of a description for each attribute.

Note to the developers out there: yes there’s a newly added third argument for the shortcode_atts function, but it’s not a required argument. So unless every plugin developer in the world implements it, then we still won’t have a sure way to determine all of a shortcode’s attributes.

The Shortcode API doesn’t provide any facility for adding shortcode descriptions, type casting attributes or attribute descriptions. And unless WordPress itself adds a central area for accessing shortcodes, I doubt this facility would be created.

Conclusion

Right now the task of organizing shortcodes is left to each developer. Unless a central method is developed within WordPress, expect to continue to see multiple “Add Shortcode” buttons in your backend. Whether something like this should be added into the WordPress Core or not is another huge discussion in itself.

An Alternative

There are page builder plugins that address this differently. Instead of programmatically detecting shortcodes, they have shortcode mappers where users can manually input every detail of a shortcode. Once done, it would then become available within the page builder. While this works, those are only available in your own site.

We here at Page Builder Sandwich are creating something that can hopefully solve this shortcode conundrum. Subscribe to our newsletter below to get notified on our progress.

June 29, 2016