{"id":2073,"date":"2017-11-07T13:44:36","date_gmt":"2017-11-07T08:44:36","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=2073"},"modified":"2017-11-13T21:12:32","modified_gmt":"2017-11-13T16:12:32","slug":"create-custom-wordpress-shortcodes","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/create-custom-wordpress-shortcodes\/","title":{"rendered":"How to Create Custom WordPress Shortcodes?"},"content":{"rendered":"

While learning WordPress plugin development, you come across the\u00a0<\/span>shortcodes API<\/a><\/strong>. As a beginner, this is something which I also found quite interesting. It allows me to create small yet nifty plugins quickly. <\/span><\/p>\n

In this post, I will be explaining what are WordPress shortcodes and how you can utilize the shortcodes API in plugin development. <\/span><\/p>\n

\"\"<\/div>\n

Shortcodes<\/span><\/h2>\n

Shortcodes are used to insert dynamic content<\/strong> into WordPress posts<\/em> and pages<\/em>.\u00a0<\/span>Shortcodes are enclosed in the square brackets [ ]<\/code>. Based upon the text inside the brackets, it is replaced by the content generated by a PHP function, defined at the back-end.\u00a0<\/span><\/p>\n

Shortcodes are pretty simple to create and use. Let’s create a shortcode that will display the WPCouple logo. Let’s name it wpc-logo and its shortcode would look like this<\/span>:<\/span><\/p>\n

[wpc-logo]<\/div><\/div>\n

It\u2019s the simplest sort of the shortcode that you\u2019ll ever encounter, i.e. shortcode name in the square brackets. <\/span><\/p>\n

There are advanced forms of shortcodes as well, where you can specify the parameters and even add some content. A self-closing shortcode with parameters might look like this:<\/span><\/p>\n

[wpc-logo size=”120″]<\/div><\/div>\n

Where 120<\/code> specifies the width of the logo in pixels. <\/span><\/p>\n

You can go ahead and even add some text preceding the logo:<\/span><\/p>\n

[wpc-logo size=”300″]WPCoulple Logo[\/wpc-logo]<\/div><\/div>\n

Creating a Shortcode<\/span><\/h2>\n

To create a shortcode, you need to do the following three things:<\/span><\/p>\n

    \n
  1. Write a PHP function that will be invoked when the shortcode is called.<\/span><\/li>\n
  2. Add the shortcode to WordPress using a unique identifier.<\/span><\/li>\n
  3. Hook the function into WordPress.<\/span><\/li>\n<\/ol>\n

    Simple Shortcodes<\/span><\/h2>\n

    In this part, you\u2019ll learn about creating a simple shortcode like [wpc-logo]<\/code> using\u00a0a WordPress plugin.<\/span><\/p>\n

    Let\u2019s say the main file of the plugin is named as wpc-logo<\/code>.php<\/code>\u00a0Now, follow the steps to create the shortcode.<\/span><\/p>\n

    Writing A PHP Function<\/span><\/h3>\n

    In your main PHP file, define a function which returns the WPCouple logo.<\/span><\/p>\n