Basics of WordPress Short Codes & How To Create & Use Them

Recently i switched one of my blogs to a new theme which includes built in shortcodes.

I’ll show you in more detail all the great functions you can insert into your posts and pages later on in this article by using this list of short codes.

• Buttons
• Info Boxes
• Related Posts
• Social Media Buttons
• Qoutes
• Icon Links
• Custom Links
• Typography
• Tab Layouts
• Content Toggle

What Are Short codes?

Short codes are short bits of code which you add to your HTML editor.

They are used for adding custom functions to the content of your posts and pages without the need for writing a script everytime you need to do this.

Short codes are like html tags but use square brackets rather than angled brackets.

Below is an example of what a shortcode looks like when you insert it into your editor.

[shortcode]

This theme already includes a great list of built in shortcodes (Example above) which you can learn more about later on in this tutorial.

Shortcodes can be created and added manually, by installing a plugin or using a theme which already includes these features.

Benefits of Using Short Codes

Shortcodes save heaps of time because you don’t need to write a script of php code every time you want to create a function in your posts.

Inserting the shortcode in a post references the code you have added in your functions.php file and creates the function.

Once you have added the php script to your file then you simply add a shortcode into the HTML editor of your post/page and the function is added.

But what if you’re using another theme or don’t want to buy a plugin for adding short codes?

You can add the code manually to your functions.php file and insert the small short code tag when needed.

Plugin and Theme Shortcodes

Some WordPress themes and shortcode plugins will automatically display an icon in your editor’s toolbar so you simply click the icon and choose the shortcode for simple insertion into your posts and pages.

No need to create the functions or type the tag in manually.

How To Create a Shortcode

Caution: Always take backup of your files before editing .php files.

Creating a shortcode is different depending on which theme you are using.

In this tutorial i’ll explain how to create short codes for use in every theme which has a functions.php file.

Some themes like Thesis & Genesis use a custom_functions.php file editor however you can still use this code by adding it into the functions.php which every WordPress installation contains.

Creating shortcodes manually requires 2 steps:

1. Create the primary PHP function)
2. Create the add_shortcode which connects the primary PHP function to WordPress (Create the shortcode for the PHP function and insert it into your HTML editor)

Once you insert the [shortcode] into your editor, WordPress will connect to your themes functions.php file and dynamically replace it with the function you created.

If you have created many different functions then all you need to do is insert the unique shortcode associated with that function everytime you want to use it in your editor. No need to create the function again in your functions.php file.

Step 1 – Open your Theme Functions (functions.php) at this location: /wp-content/themes/yourtheme/functions.php

function ThankYouShortcode() {
	return '<p>Thank You For Reading My Blog Post!</p>';
}
add_shortcode('thankyou', 'ThankYouShortcode');

Step 2 – Next step is to place the shortcode tag into the WordPress editor [thankyou]

The result will look like this is the page you have added the shortcode to

Thank You For Reading My Blog Post!

That’s it!

You have now created your first shortcode manually.

WordPress shortcodes and what some of them look like using this theme.

If you like the features these shortcodes create but don’t want to write the code then i suggest you take a look at this styles with shortcodes plugin or Demo a Woo Theme for 14 days free.

Note: Not all shortcodes will look the same depending on which theme or plugin you are using.