Creating your own WordPress shortcodes

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. Now 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.
   
   

   Editor	Output