WordPress Shortcodes defined:

Wordpress allows the use of a custom tag called a shortcode. This code allows you to insert code or text by inserting a placeholder tag within the View Mode of Posts or Pages. For example, if you wanted to insert a YouTube video, you would use the shortcode [youtube=http://youtube.com/watch?v=wjhrewkerw] instead of inserting or coding all the code actually needed to embed the video.

Shortcodes can also be used as a shortcut to include longer text that you use repeatedly such as a URL, a signature, or any other type of code. In our example below, we will demonstrate how to create a simple code to display your domain's URL.

Creating your own shortcodes

Shortcodes are created by modifying the functions.php file for a particular theme. This means if you create a shortcode to use with your current theme and then change themes, you will need to recreate the code in the new theme as well. Shortcodes also consist of two parts. First there is the function, which actually performs any processing, or in our example below, returns the URL you want to display. Second is the hook code. This is the piece of code where you will name the shortcode and connect, or hook, it to the function you create to display your data. Below is a simple set of instructions to help you create your own simple shortcodes.

  1. First, log into your WordPress admin dashboard.
  2. From within the dashboard, go to the left hand sidebar and click on the Appearance portion of the menu.
  3. Under the Appearance menu options, open up the theme editor section by selecting Editor.
  4. Once in the theme editor, find the Theme Functions option in the right hand sidebar menu. Clicking on it opens up the functions.php file for editing.
  5. Inside the functions.php editor, scroll down until you reach the end of the file. From here, we will be adding the code for your shortcode. We demonstrate a function below that will return our domain's URL.

    function mainDomain() {
    return 'http://wp.example.com/';
    }

    When generating the function, be creative with the function name as it must be unique. In our example this case, we named it mainDomain (this is in the first line of the code). The actual URL you want to print out is in the return statement. You can see our example will print out http://wp.example.com. You would enter your own domain name within the quotes of the return statement to display your site's name.
  6. inserting the function and hookNow that we have finished creating the function, we need to create the hook. This will call that function and display the URL for the shortcode you enter in your post pr page editor. Check out our code demonstration below for the hook.

    add_shortcode('mainURL', 'mainDomain');

    You can see there are two parameters used in the hook. The first parameter is the name of the shortcode we will use, named mainURL. Again, you can name the shortcode anything you want but it must be unique. The second parameter is the name of the function you created in the last step, mainDomain. This code will call the mainDomain function when you use the shortcode named mainURL. To use the shortcode in your pages and post, simply enclose it with square brackets like so: [mainURL]
  7. Once you have finished entering the code, click the Update File button found underneath the file editor. This will save the changes and you will now be able to use the new shortcode.
  8. To use the shortcode, whenever you are editing a page or post in View Mode (it works ONLY in View Mode), simply add the shortcode in place of the text or code you are wanting to display. Below is a sample of the shortcode we created in the post editor and the result on the screen.

    EditorOutput
    shortcode in editor output of the shortcode

 

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!

Did you find this article helpful?

Comments

n/a Points
2016-05-05 3:28 pm

I think there is an error in step 5 when you name your function homeURL. When you call the function, you then use mainDomain. The code in the popup on step 6 is correct.

Staff
12,339 Points
2016-05-06 12:35 am
Hello WebSavvy Studio,

Thank you for contacting us. I tested the article, and you are absolutely correct. I have updated the guide to reflect the correct function name.

Let us know if you see any further issues, or have additional article suggestions for us.

Thank you,
John-Paul

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.

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!
Need More Help?

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

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

Not a Customer?

Get web hosting from a company that is here to help.
}