Skip to Main Content

How to add a shortcode interface to WordPress

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

If you are developing a WordPress site for a client, then chances are you have shortcodes for the client. The problem is that many newbies don't know how to add a shortcode and if there are any parameters added it gets even more complicated. Shortcake provides users with an easy solution to add shortcodes to WordPress.

In this tutorial, I will show you how to add a shortcode interface on WordPress to simplify adding on posts and pages.

What is Shortcake?

WordPress offers a feature that allows you to add executable code in posts and pages via shortcodes. Several WordPress themes and plugins allow users to add functionality to their blogs using shortcodes. However, these shortcodes can become very difficult to use, which makes customization difficult.

For example, with a basic WordPress theme, if there is a shortcode to insert a button, then the user will probably need to fill in around five parameters for the shortcode as follows:

[url button = "http://example.com" title = "Learn more" color = "purple" target = "newwindow"]

This is where Shortcake comes in, in that it allows you to better manage your shortcodes.

shortcake-bakery-plugin

First steps

This tutorial is for users who are new to WordPress development. Users who like to customize their themes will also find this tutorial interesting.

What you need to do first is install and activate the extension Shortcace (Shortcode IU).

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

You should now have a shortcode that accepts a few parameters. For this tutorial, we are going to create a simple shortcode that allows users to add buttons in their WordPress posts and pages. This is a simple example for our shortcode, and you can add this code in your plugin or in the functions.php file of your child theme.

add_shortcode ('cta-button', 'cta_button_shortcode'); function cta_button_shortcode ($ atts) {extract (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); return ' '. $ title. ' '; }

You will probably also need some CSS code for the button.

.cta-button {padding: 10px; font-size: 18px; border: solid 1px #FFF; border-radius: 7px; color: #FFF; background-color: #50A7EC; }

This is how to display the button in question, the user must type the following shortcode:

[cta-button title = »Download Now» url = »http://example.com»]

Now you have a shortcode that accepts the parameters, we will now create an interface for it.

How to register an interface to a shortcode with ShortCacke

Shortcake API allows you to save shortcodes in the user interface. You need to describe which attributes the shortcode accepts, the type of fields, and what post format will display the UI (user interface).

Here is an example of a piece of code that you can use to register a shortcode in the Shortcake user interface.

shortcode_ui_register_for_shortcode (/ ** Your shortcode * / 'cta-button', / ** The label of your shortcode and its icon * / array (/ ** The label is required. * / 'label' => 'Add Button', / ** Icone. Src or dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Shortcode Attributes * / 'attrs' => array (/ ** * All fields that will accept values users will have their own array defined as follows. * This shortcode accepts two parameters the url and the title * We will define the UI for the title. * / array (/ ** This label will be displayed on the user interface * / 'label' => 'Title', / ** this is the attribute used for the shortcode * / 'attr' => 'title', / ** Define the type of the field, are supported: text , checkbox, textarea, radio, select, email, url, number, and date. * / 'type' => 'text', / ** Add description 'description' => 'Description',), / ** We let's now define a UI for the link field * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'Full URL',),),), / ** The post format in which to display the UI * / 'post_type' => array ('post', 'page' ),));

That's all you need to do to display the shortcode on the UI. You can now start editing an article to be able to use the shortcode. All you need to do is click on the add media button. You will see a new section titled " Insert Element Post". By clicking on it, you will be able to see the different shortcodes that you have created.

insertpostelement

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

By clicking on the icon, you will see the UI which allows you to customize the shortcode.

shortcodeui

How to add a shortcode with several fields

In the first example, we used a pretty basic shortcode. Now we will make things a little more complicated and more useful. We will add a shortcode that allows users to choose the color of the button.

We will first add the shortcode. It's essentially the same code as the one above, the only exception is that we are going to add a field for the color.

add_shortcode ('mybutton', 'my_button_shortcode'); function my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); return ' '. $ title. ' '; }

Since our shortcode displays buttons of different colors, we will need to update our CSS code as well.

.mybutton {padding: 10px; font-size: 18px; border: solid 1px #FFF; border-radius: 7px; color: #FFF; } .blue-button {background-color: #50A7EC; } .orange-button {background-color: #FF7B00; } .green-button {background-color: #29B577; }

Here is what this button will look like.

colorful-buttons-shortcode

Now that our shortcode is ready, the next step is to register it on Shortcake. We are going to use the same code, the difference here is that we are going to provide an additional parameter to display a color field.

shortcode_ui_register_for_shortcode (/ ** Your shortcode handle * / 'mybutton', / ** Your Shortcode label and icon * / array (/ ** Label for your shortcode user interface. This part is required. * / 'label' => 'Add a colorful button ', / ** Icon or an image attachment for shortcode. Optional. src or dashicons- $ icon. * /' listItemImage '=>' dashicons-flag ', / ** Shortcode Attributes * /' attrs' => array (/ ** * Each attribute that accepts user input will have its own array defined like this * Our shortcode accepts two parameters or attributes, title and URL * Lets first define the UI for title field. * / array (/ ** This label will appear in user interface * / 'label' => 'Title', / ** This is the actual attr used in the code used for shortcode * / 'attr' => 'title', / ** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. * / 'Type' => 'text', / ** Add a helpful description for users * / 'description' => ' Please enter the button text ',), / ** Now we will define UI for the URL field * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Finally we will define the UI for Color Selection * / array ('label' => 'Color', 'attr' => 'color', / ** We will use select field instead of text * / 'type' => 'select', 'options' => array ('blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green',),),), / ** You can select which post types will show UI shortcode * / 'post_type' => array ('post', 'page'),));

That's all ! Now when you edit or write a post, you will be able to see the new shortcode, still in the same section on the media window.

postelements

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

By clicking on the new shortcode, the shortcode customization interface will be displayed and you can specify the values.

colorui

That's it for this tutorial. Hope it helps you create a better interface for your shortcodes on WordPress. Happy New Year to you!

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
7 shares
Share7
tweet
Save