Creating Custom Shortcodes in WordPress Themes

Posted on 16th June 2023

In WordPress, shortcodes are little bits of code that allow you to do various things with your content. For example, the shortcode allows you to display a grid of images in your post.

Shortcodes are very versatile and can be used to create all sorts of custom content for your WordPress site. In this article, we will show you how to create custom shortcodes in WordPress themes.

What is a Shortcode?

A shortcode is a simple piece of code that you can insert into a post or page on your WordPress site. This code is replaced with some other content when the post or page is viewed on the front-end of your site.

For example, the shortcode will be replaced with a grid of images when the post is viewed on the front-end.

Shortcodes were introduced in WordPress 2.5 and they have since become an essential part of the WordPress ecosystem.

Creating Custom Shortcodes in WordPress

Creating custom shortcodes in WordPress is very easy. All you need to do is add a few lines of code to your theme’s functions.php file.

In your functions.php file, you need to use the add_shortcode() function. This function takes two parameters. The first parameter is the name of the shortcode, and the second parameter is the function that will be executed when the shortcode is found.

For example, let’s say we want to create a shortcode that displays a button. We can do that by adding this code to our functions.php file:

<?php
function button_shortcode() {
return 'Click me!‘;
}
add_shortcode( ‘button’, ‘button_shortcode’ );
?>

In the code above, we are creating a function called button_shortcode(). This function will return a string of HTML code that displays a button.

We are then using the add_shortcode() function to register our shortcode. The first parameter is the name of the shortcode (button), and the second parameter is the name of the function that will be executed (button_shortcode).

Now that our shortcode is registered, we can use it in our posts and pages. To use the shortcode, we simply need to type [button] in the post editor.

This will be replaced with a button when the post is viewed on the front-end of your site.

Shortcode Parameters

Shortcodes can also accept parameters. These parameters can be used to customize the output of the shortcode.

For example, let’s say we want to create a shortcode that displays a button. We can do that by adding this code to our functions.php file:

function button_shortcode( $atts ) {
extract( shortcode_atts( array(
‘type’ => ‘primary’,
‘text’ => ‘Click me!’,
), $atts ) );

return ‘‘ . $text . ‘‘;
}
add_shortcode( ‘button’, ‘button_shortcode’ );

In the code above, we are using the shortcode_atts() function to extract the parameters from the shortcode. We are then using those parameters to customize the output of the button.

Now we can use our shortcode like this:

[button type=”secondary” text=”Hover me!”]

This will output a button that says “Hover me!” when the user hovers over it.

Nested Shortcodes

Shortcodes can also be nested inside each other. This allows you to create more complex content with shortcodes.

For example, let’s say we want to create a shortcode that wraps other content in a div element. We can do that by adding this code to our functions.php file:

function div_shortcode( $atts, $content = null ) {
return ‘

‘;
}
add_shortcode( ‘div’, ‘div_shortcode’ );

In the code above, we are creating a function called div_shortcode(). This function will return a string of HTML code that wraps the content in a div element.

We are then using the add_shortcode() function to register our shortcode. The first parameter is the name of the shortcode (div), and the second parameter is the name of the function that will be executed (div_shortcode).

Now we can use our shortcode like this:

[div]
Here is some content that will be wrapped in a div element.
[/div]

This will output a div element that contains the content “Here is some content that will be wrapped in a div element.”

Conclusion

Shortcodes are a powerful tool that can be used to create custom content for your WordPress site. In this article, we showed you how to create custom shortcodes in WordPress themes.

If you have any questions, please leave a comment below.

Creating Custom Shortcodes in WordPress Themes
Adding shortcodes to your WordPress theme is a great way to add extra functionality to your site without having to write a lot of code. Shortcodes can be used to insert contact forms, buttons, galleries, and more.

In this article, we will show you how to create custom shortcodes in WordPress.

What is a WordPress Shortcode?
A WordPress shortcode is a small piece of code that allows you to do various things with little effort. These shortcodes are enclosed in square brackets [], so a shortcode to insert a contact form would look like this:

[contact-form]

When you add a shortcode to a post or page, WordPress will parse the shortcode and run the corresponding code.

Creating a Custom Shortcode
We will start by creating a simple shortcode that displays a button. This button will link to the WordPress codex.

First, you will need to open your theme’s functions.php file and add the following code:

function wp_codex_button() {
return ‘Visit Codex‘;
}
add_shortcode( ‘codex’, ‘wp_codex_button’ );
In the code above, we created a function called wp_codex_button(). This function returns a string of HTML code for the button.

We then used the add_shortcode() function to register our shortcode. The first parameter is the name of the shortcode, which in this case is “codex”. The second parameter is the name of our function.

Now that our shortcode is registered, we can use it in any post or page on our WordPress site.

If we add the following shortcode to a post:

[codex]
WordPress will replace it with our button HTML.

Shortcode Attributes
Shortcodes can also have attributes. These attributes allow you to customize the output of the shortcode.

For example, let’s say we want to create a shortcode for inserting images into our posts. We can use the following code:

function wp_insert_image() {
return ‘‘;
}
add_shortcode( ‘wp-image’, ‘wp_insert_image’ );
In the code above, we created a function called wp_insert_image(). This function returns the HTML for an image. We are using the esc_url() function to escape the URL of the image so that it is properly formatted.

We then registered our shortcode using the add_shortcode() function. The first parameter is the name of the shortcode, which in this case is “wp-image”. The second parameter is the name of our function.

This shortcode will output the following HTML:

You can also use shortcode attributes to change the output of the shortcode. For example, let’s say we want to add the ability to change the URL of the image. We can do that by adding an attribute to our shortcode:

function wp_insert_image( $atts ) {
extract( shortcode_atts(
array(
‘url’ => get_template_directory_uri() . ‘/images/wordpress.png’,
), $atts )
);
return ‘‘;
}
add_shortcode( ‘wp-image’, ‘wp_insert_image’ );
In the code above, we first created a function called wp_insert_image(). This function accepts an array of attributes ( $atts ) and then extracts those attributes into variables.

We are using the shortcode_atts() function to set a default value for the “url” attribute. If the “url” attribute is not set, then the default value will be used.

We are then returning the HTML for an image. We are using the esc_url() function to escape the URL of the image so that it is properly formatted.

Finally, we registered our shortcode using the add_shortcode() function. The first parameter is the name of the shortcode, which in this case is “wp-image”. The second parameter is the name of our function.

This shortcode will output the following HTML:

You can now use the following shortcode to change the URL of the image:

[wp-image url=”https://example.com/wp-content/uploads/2017/01/wordpress.png”]
WordPress will output the following HTML:

Shortcodes in Widgets
You can also use shortcodes in WordPress widgets. To do that, you will need to add the following code to your theme’s functions.php file:

add_filter( ‘widget_text’, ‘do_shortcode’ );
With this code in place, any shortcodes you add to a WordPress widget will be parsed and executed.

Creating a Shortcode Generator Plugin
If you want to create a shortcode generator plugin, then you will need to use the WordPress Plugin API. We will not be covering that in this article, but you can read more about it in the WordPress codex.

Conclusion
In this article, we showed you how to create custom shortcodes in WordPress. Shortcodes are a great way to add extra functionality to your website without having to write a lot of code.

We hope this article helped you learn how to create custom shortcodes in WordPress. You may also want to check out our guide on how to create custom fields in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.