Blog

In this article, we’ll see How to Create Your Own WordPress Shortcodes.

WordPress shortcodes are a powerful feature that allows developers and content creators to add dynamic and interactive elements to their websites with ease. With the ability to create custom shortcodes, you can unlock a world of possibilities and provide users with unique functionality.

We’ll walk you through the process of creating your own WordPress shortcodes, empowering you to enhance your website’s functionality and provide a seamless user experience.

WordPress Shortcodes are tools that can be used to automate various tasks without writing too many lines of code. The function of shortcodes is also to create dynamic content using the functions built into WordPress. They have always been a great way to let your visitors have more control over their website. With shortcodes, you can do so much more than simply inserting posts’ media or links into pages or posts.

For example, It’s not easy to embed a video in WordPress, there are several ways for it. However, to make the task easier for WordPress users, the developers offer an excellent feature called Shortcode.

WordPress shortcodes

A WordPress shortcode is a custom tag that you can use to insert dynamic content into your posts and pages. Shortcodes are enclosed in square brackets, like this:

[shortcode]

When WordPress encounters a shortcode, it will look for a corresponding function to process it. This function will then be responsible for generating the output that will be displayed on the front end of your website.

How to create a WordPress shortcode

To create a WordPress shortcode, you will need to create a function that will process the shortcode. This function should be named shortcode_name(), where shortcode_name is the name of your shortcode.

The shortcode_name() function should take two arguments:

• $atts: This is an array of attributes that were passed to the shortcode.
• $content: This is the content that was enclosed in the shortcode.

The shortcode_name() function should then return the output that you want to be displayed on the front end of your website.

For example, the following code defines a shortcode that will display a list of images:

function shortcode_images() {
// Get the attributes that were passed to the shortcode.
$atts = shortcode_atts(
array(
'src' => '',
'class' => ''
),
$atts
);

// Get the images that match the attributes.
$images = get_images(array(
'src' => $atts['src'],
'class' => $atts['class']
));

// Return the output.
return $images;
}

Simple Shortcodes:

Shortcode functions can be added to plugin code or your theme’s functions.php file. If it’s the latter, I’d recommend creating a separate shortcodes.php file, then adding include('shortcodes.php'); to functions.php.

Here’s a basic “Hello World” example:

 function HelloWorldShortcode() { return '<p>Hello World!</p>'; } add_shortcode('helloworld', 'HelloWorldShortcode'); 

Enter [helloworld] somewhere within a page or post to output the result of the HelloWorldShortcode() function.

Parameterized Shortcodes:

The following wordrpess shortcode function generates a page hierarchy sitemap. Three optional parameters can be passed: a title, the ID of the resulting ul list, and a depth value indicating the number of page navigation levels.

 function GenerateSitemap($params = array()) { // default parameters extract(shortcode_atts(array( 'title' => 'Site map', 'id' => 'sitemap', 'depth' => 2 ), $params)); // create sitemap $sitemap = wp_list_pages("title_li=&depth=$depth&sort_column=menu_order&echo=0"); if ($sitemap != '') { $sitemap = ($title == '' ? '' : "<h2>$title</h2>") . '<ul' . ($id == '' ? '' : " id="$id"") . ">$sitemap</ul>"; } return $sitemap; } add_shortcode('mysitemap', 'GenerateSitemap'); 

A custom sitemap can be added to any page using a shortcode such as [mysitemap id='deepmap',depth=5].

BB code Shortcode

The final way to add shortcodes uses [bbcode]BB code syntax[/bbcode]:

 function StyleText($params, $content = null) { // default parameters extract(shortcode_atts(array( 'style' => '' ), $params)); return '<span' . ($style == '' ? '' : " style="$style"") . ">$content</span>"; } add_shortcode('format','StyleText'); 

This function allows the author to embed CSS styles within their article, e.g. [format style="font-size:1.5em;color:#f00;">Important![/format].

Creating custom WordPress shortcodes empowers you to add unique and dynamic functionality to your website with ease. By following the steps outlined in this guide, you can harness the power of shortcodes, enhance user experiences, and unlock new possibilities for your WordPress projects.

Embrace the creative freedom that custom shortcodes provide and elevate your website’s functionality to new heights. Happy coding with WordPress shortcodes!

Hope this article helps!