![]() ** Add a helpful description for users */ We will be using essentially the same code, except that this time we have another parameter for color and we are offering users to select from blue, orange, or green buttons. Now that our shortcode is ready, the next step is to register shortcode UI. You can use this CSS in your theme’s stylesheet. Since our shortcode will be showing buttons in different colors so we will need to update our CSS too. It is nearly the same shortcode, except that it now excepts user input for color.Īdd_shortcode( 'mybutton', 'my_button_shortcode' ) Let’s add a shortcode that allows users to choose a button color.įirst we will add the shortcode. Now lets make it a little more complicated and a lot more useful. ![]() In the first example, we used a very basic shortcode. ![]() Clicking on it will show you a button to insert your code.Ĭlicking on the thumbnail containing the lightbulb icon and your shortcake label will show you the shortcode UI. This will bring up the media uploader where you will notice a new item ‘Insert Post Element’ in the left hand column. Simply click on the Add Media button above a post editor. That’s all, you can now see the shortcode user interface in action by editing a post. ** You can select which post types will show shortcode UI */ ** Now we will define UI for the URL field */ 'description' => 'Please enter the button text', Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. ** This is the actual attr used in the code used for shortcode */ ** This label will appear in user interface */ * Lets first define the UI for title field. * Our shortcode accepts two parameters or attributes, title and URL * Each attribute that accepts user input will have its own array defined like this 'listItemImage' => 'dashicons-lightbulb', ** Icon or an image attachment for shortcode. ** Label for your shortcode user interface. You can paste this in your theme’s functions file or in a site-specific plugin. We have tried to explain each step with inline comments. Here is a sample code snippet we will use to register our shortcode’s UI. You will need to describe what attributes your shortcode accepts, input field types, and which post types will show the shortcode UI. Shortcake API allows you to register your shortcode’s user interface. Registering Your Shortcode User Interface with Shortcake Now that we have a shortcode that accepts parameters, let’s create a UI for it. This is how a user will use the shortcode in their posts and pages: You will also need to add some CSS to style your button. Here is the sample code for our shortcode, and you can use this by adding it to your theme’s functions file or in a site-specific plugin.Īdd_shortcode( 'cta-button', 'cta_button_shortcode' ) If you need a little refresher, here is how to add a shortcode in WordPress.įor the sake of this tutorial we will be using a simple shortcode that allows users to insert a button into their WordPress posts or pages. You will now need a shortcode that accepts a few parameters of user input. Beginner level users who like to tweak their WordPress themes would also find this tutorial helpful.įirst thing you need to do is install and activate the Shortcake (Shortcode UI) plugin. This tutorial is aimed for users who are new to WordPress development. This will make shortcodes a lot easier to use. It aims to solve this problem by providing a user interface to enter these values. Shortcake is a WordPress plugin and a proposed future WordPress feature. However, sometimes these shortcodes can become complicated when a user needs to enter parameters for customization.įor example, in a typical WordPress theme if there is a shortcode to enter a button, then the user will probably need to add atleast two to five parameters. Many WordPress themes and plugins allow users to add additional functionality using shortcodes. WordPress offers an easier way to add executeable code inside posts and pages by using shortcodes. In this article, we will show you how to add a user interface for shortcodes in WordPress with Shortcake. Shortcake provides a solution by adding a user interface for shortcodes. The problem is that many beginners don’t know how to add shortcodes and if there are complex parameters involved, then it’s even more difficult. If you are developing a WordPress site for a client, then it’s likely that you will have shortcodes for your clients to use.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |