How to create shortcode in WordPress for image, anchor and buttons

A shortcode is a popular tag in WordPress.  A special tag which you can insert into a post that gets replaced with a HTML content when actually viewing the post on the website.

how to create shortcode in wordpress

Have you ever had a time when you use a shortcode on your WordPress website. Most of the time plugins are used to add a shortcode for a particular task. If you have ever embedded a WordPress gallery on your blog, then you’ve already used the default shortcode.

For instance, the shortcode given below (in the page/post content) would add a photo gallery into the page:

[ gallery ]

Here we’ll learn how to create a shortcode in WordPress.

In this tutorial we’ll learn how to create shortcodes anchor, images, buttons, how to use is outside the content of page/post and widget area.

1. Create a simple shortcode in WordPress with text.

Add  this function below in functions.php file.

function se_myshortcode_func($atts){
return "SmallEnvelop: For more WordPress blog visit https://smallenvelop.com/";
}

add_shortcode("seshortcode, "se_myshortcode_func");

To use  this shortcode you may insert this shortcode below inside the content on your post or page.

[seshortcode]

The shortcode will automatically execute when you view your post, it would show “SmallEnvelop: a weblog enveloped, For more WordPress blog visit https://smallenvelop.com/ text on your post.

shortcode_smallenvelop

2. Create a custom WordPress shortcode with attributes.

In this section, we will create an anchor shortcode that has an attribute for URL. Add  this function on your functions.php file.

function anchortag_shortcode($atts, $content = null) {
 extract(shortcode_atts(array("url" => ''), $atts));
 return '<a href="' . $url . '">' . do_shortcode($content) . '</a>';
}
add_shortcode('anchor', 'anchortag_shortcode');

To use this shortcode insert the following shortcode inside the content on your post or page or where ever you have enabled shortcode.

[anchor url="http://example.com/"] Your anchor text [/anchor]

This  shortcode will automatically be executed when you view your post, it would show Your anchor text  on your post.

3. How to create a shortcode in WordPress that has a content

Add this function on your functions.php file.

function se_myshortcode_func($atts,$content=null){
return do_shortcode($content);
}

add_shortcode("seshortcode", "se_myshortcode_func");

To use this shortcode you may insert this shortcode below inside the content on your post or page.

[seshortcode] My Content [/seshortcode]

The shortcode will automatically be executed when you view your post, it would show “My Content” text on your post.

4. How to create a button shortcode in WordPress with HTML tags.

The following code will output an HTML tag that a class. Make a button by adding some CSS.

function smallbrown_shortcode($atts, $content = null) {
    extract(shortcode_atts(array("url" => ''), $atts));
    return '<a href="' . $url . '" class="button2 brown">' . do_shortcode($content) . '<span></span></a>';
}

add_shortcode('smallbrown', 'smallbrown_shortcode');

To output your button just use the following shortcode.

[smallbrown url="http://example.com"] Buy Now [/smallbrown]

5. Create a shortcode for image tag in WordPress

Add the following function to  your function.php file.

function img_shortcode($atts, $content = null) {
    extract(shortcode_atts(array("src" => ''), $atts));
    return '<img src="' . $src . '" alt="'. do_shortcode($content) .'" />';
}
add_shortcode('img', 'img_shortcode');

To use output an image use the following shortcode:

[img src="https://example.com/image.jpg"] an example image [/img]

Here the text between tags is used as the alt attribute in the image.

How to use your shortcode anywhere in your WordPress theme.

By default, WordPress has limited the use of shortcodes only in the content of the page, post and widgets. Sometimes you need to use the shortcodes outside the content area. What would you do when you want your shortcode to output in the sections other than page, posts and widgets.

WordPress has provided a way to use these shortcodes outside the content and widgets. Use do_shortcode function.

<?php echo do_shortcode( $content ) ?>

For example you want, if you want to output a gallery shortcode you just need to paste the following code:

<?php echo do_shortcode( '[ gallery ]' );

If you have any query please do comment.

1 thought on “How to create shortcode in WordPress for image, anchor and buttons”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.