What is a WordPress Shortcode?

A shortcode is a code specific to WordPress designed to allow you to insert longer pieces of text or code by using a tag. It is basically a shortcut to writing code or terms that you use over and over. WordPress has a few default shortcodes such as [youtube] so you can embed a YouTube video without having to place all the code inside, or [googleapps], allowing you to embed a ment from Google Apps. Some even work with your basic Wordpress data, such as [archives], which displays an archive list of your blog posts. But the nice thing is, you can create your own shortcodes to use within your active theme.

How to create your own shortcode

In order to save time, you can create simple shortcodes to embed terms or chunks of text you use often. Perhaps you type your home URL often within your posts. You can create the shortcode [home] to insert your domain's url in the body of a page or post. Adding a shortcode is done by modifying the functions.php file for each theme you want to use the shortcode with. Follow along below as we guide you on how to create your own shortcodes in WordPress.

  1. Log into your WordPress admin dashboard.
  2. Look to the left hand sidebar and click on the Appearance option.
  3. Under the Appearance options, select the Editor. This will open up the theme editing section.
  4. theme-editorNow that you are in the theme editor, look to the right hand menu and find the Theme Functions option. Click on that to open up the functions.php file in the edit area.
  5. From within the functions.php editor, scroll down to the bottom of the file. This is where you will add the code for your shortcode. The shortcode will be made with two parts. The first part is the function and the second part is the 'hook' that calls the function to insert your code. Below is a sample of the function that will generate your URL code. Shortcode functions like this are very simple so you should have no problem with them.

    function homeURL() {
        return 'http://wordpress.inmotiontesting.com/';
    }

    An important point to remember is the naming of your function. You want it to be unique. In this case, we named it 'homeURL'. The actual URL you want to print out is in the return statement. In our example, we are going to print out http://wordpress.inmotiontesting.com. Of course, you will enter your own URL in that spot.
  6. codeNext, we will create the hook code to call that code when we enter our shortcode. The code below demonstrates the proper code:

    add_shortcode('home', 'homeURL');

    The two pieces of code in quotes are where you will enter your specific code for your custom shortcode. The first parameter is for the name of the shortcode. In our example the name is 'home' and will be entered in the post or page as [home]. As long as it is unique, you can name the shortcode anything you want. The second parameter is the name of the function you created in the last step, 'homeURL'. This tells WordPress to use that function whenever it runs across the [home] shortcode.
  7. Click the Update File button found underneath the editor to save the changes and activate the shortcode.
  8. Now, all you need to do when working with a post in View Mode is to use "[home]" whenever you want to use your URL. Below is a screenshot of the editor in Vew Mode showing the code and the post displaying the output.
    EditorOutput
    shortcode in the editor shortcode output in post
Continued Education in Course WordPress
You are viewing Section 26: 325: How to create your own shortcodes in WordPress
Section 25: 324: Finding your database name in WordPress
Section 27: 326: How to change your site URL in your WordPress admin dashboard
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-02-27 5:38 pm

Great blog covering Worpress Shortcuts, however I'm trying to use a short cut as follows.

[ca_audio url_mp3="[myshortcut]" css_class="codeart-google-mp3-player" autoplay="false" download="false" html5="false"]

But it doesn't work. I know someone will ask, why would you want to do that? To hide the location of the MP3 file.

Staff
17,716 Points
2014-02-27 11:00 pm
Hello Dianna,

I don't believe that the shortcode can actually do what you're trying to do, but there are other solutions available that could meet your need. Check out: WordPress Plugin: MP3 Jplayer. This plugin allows you to hide the URL. This may be more along the lines of what you're trying to accomplish.

Regards,
Arnel C.
n/a Points
2014-03-11 2:10 pm

Thank you ARN, that is exactly what I was looking for!

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

3 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!