Not using wordpress shortcodes in your theme? Do it efficient and easy.

Using wordpress shortcodes is a nice way to make your them or plugin developemnt much mor efficient. Shortcodes help us to show easier dynamic content in different areas of our website, as well as they help us to write less scripts and styles, as soon as everything is being wrapped in one place.

We are going to unserstand in this tutorial together how to use them correctly in any are of your plugin or website, as well as you will be getting deep knowlwdger how Shortcode API works in wordpress.

The history and nature of shortcodes

We see shortcodes first time in use in 1988 by BBCode for supporting the users to put tags eassier. But is was very simple in usage and couldn’t work with dynamic content and that was the reason why we did not see any using of wordpress shortcodes until 2008.

Using wordpress shortcodes was made possibe due to Shortcode API which helps the content created in your back end to appear in front-end.

using wordpress shortcodes
using wordpress shortcodes

Image above shows how API functions It connects your shortcode to pages, which insures that your data is displayed correctly on front-end. Before Shortcode API there were security issues which were preventin usage of shortcodes in wordpress.

What are types of shortcodes?

There are two types of shortcodes in WordPress. The first type of shortcode is called self-closing shortcodes which does not content any avlue between the tags and enclosing shortcodes have content inside the tags.

using wordpress shortcodes
using wordpress shortcodes

All the ways of using wordpress shortcodes

Before using any shortcodes created by you you can also use shortcodes which are available in WordPress by default.

For example if you want to showcase your gallery you don’t need to write a long html code to showcase you images. You can simply use gallery shortcode where you have total control of what and how to show.

Here is the full list of shortcodes availabe for using in WordPress by default:

  1. Video – Showcase your videos. It supports MP4 and other popular video formats
  2. Playlist – You can showcase as many audios and videos using this shortcode as you want
  3. Caption – Use it to add captions for images, but can be used for other THML elements as well
  4. Audio – Any audio elements
  5. Gallery – Showcase your images with total control
  6. Embed – Can be used for multiple purposes. Follow instructions in the link

Creating your own custom shortcodes according to your needs

Let’s see an example of creation of the shortcode(using add_shortcode function).

//Examole of using wordpress shortcodes
add_shortcode('button', 'et_button');
function et_button($atts, $content = null) {
				"link" => "#",
				"color" => "blue",
				"type" => "small",
				"icon" => "download",
				"newwindow" => "no",
				"id" => '',
				"class" => '',
				"br" => 'no'
			), $atts, 'button'));

	$output = '';
	$target = ($newwindow === 'yes') ? ' target="_blank"' : '';

	$content = et_content_helper($content);

	$id = ($id !== '') ? " id='" . esc_attr( $id ) . "'" : '';

	if ($type === 'small')
		$output .= "<a{$id} href='" . esc_url( $link ) . "' class='" . esc_attr( "small-button small{$color}{$class}" ) . "'{$target}>{$content}</a>";

	if ($type === 'big')
		$output .= "<a{$id} href='" . esc_url( $link ) . "' class='" . esc_attr( "big-button big{$color}{$class}" ) . "'{$target}>{$content}</a>";

	if ($type === 'icon')
		$output .= "<a{$id} href='" . esc_url( $link ) . "' class='" . esc_attr( "icon-button {$icon}-icon{$class}" ) . "'{$target}>{$content}<span class='et-icon'></span></a>";

	if ( $br === 'yes' ) $output .= '<br class="clear"/>';

	return $output;

In the above example you can see how we have created a shortcode which also has attributes. First of all we see $attr variable which is gives value to all attributes which we are going to use you can see them stored in the associative array.

Our second variable $content defines if out shortcode is self closing or no. So if you would like to have enclosing shorcode ypu just need to use $content variable in your function.

Of course ypu don’t just need to use only functins with multiple parameters. our shortcode may contain also HTML or any static value as well.

After we have created our shortcode we can put it in use in multiple ways. I am going to share with you 2 options of using it. First with code seconf in gutemberg editor.

THe second opton of using wordpress shortcodes is simply adding them using PHP code using do_shortcode() function. Here is an exmple.

echo do_shortcode('[Here comes your shortcode name]');

Want more resourses or you would like a video format?

Do you want to watch more explanations in video format? Here is the link to my youtube video in my channel. You can also see more artivles in my website.

Katen Doe

Hovhannes Verdyan

Hello, I’m a developer who loves WordPress and loves helping peopls let me know if you have any question by leaving your question in comments in one of my youtube videos. Click here to go to my channel.