Learning never exhausts the mind
Home >  Web Design > WordPress > Create Custom WordPress Shortcodes

Published 10th May 2014 by

WordPress Shortcodes are a great way to add dynamic content to posts, even for non-techy editors, and can be as simple or as complex as you require.
Creating Your First Website Series
  1. What are the types of website available
  2. Introduction to Web Hosting
  3. Registering Domain Names and Configuration
  4. Installing Wordpress
  5. Setting Up New WordPress Site
  6. How To Install WordPress Themes and Plugins
  7. Using WordPress Custom Fields
  8. Creating WordPress Themes
  9. Create Custom WordPress Shortcodes
  10. Creating WordPress Widgets
  11. WordPress Security 101
  12. 10 Essential WordPress Plugins for 2018
  13. 12 Best Free SEO Plugins and Tools

I'm going to start off with a very basic WordPress shortcode, one that is very easy to implement. It will display a YouTube video in the post, inline.

This code should go in your functions.php or plugin file.

Shortcodes are added to WordPress by adding an action to the list of shortcodes. This is done using the add_shortcode function in much the same way as you add an action to a hook.

Let's first create the function that will handle our shortcode.

function youtube_shortcode($atts, $content = null)
  extract(shortcode_atts(array('id' => ''), $atts));
  return '<iframe width="640" height="360" src="http://www.youtube.com/embed/'.$id.'?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>';

This function is going to create a string that contains the embed YouTube code (taken from the YouTube site) and it will replace the video ID with the PHP variable $id. The $id variable gets its value from the shortcode attribute id. Shortcodes must always return the value, not echo it.

Now, lets call the add_shortcode function, specifying the parameters that the shortcode we want to create is called "youtube".

add_shortcode('youtube', 'youtube_shortcode');

And that is about it for this basic example. I said it easy! To use this shortcode once it is added to the file, simply create a post (or edit an existing one) and add the shortcode to the content:

[youtube id="{INSERT_ID_HERE}"]

You can get the YouTube video ID from the URL in the address bar. It will look something like this:

How to Add YouTube Videos to Wordpress

How to Add YouTube Videos to Wordpress

When you view the post, this code will be replaced with the HTML in the youtube_shortcode function and you will hopefully see the YouTube video.

You can also add buttons to the shortcode in the editor to make it even easier. There is a great tutorial on WP Tuts+, so I don't think I need to explain it again here.

Tutorial Series

This post is part of the series Creating Your First Website. Use the links below to advance to the next tutorial in the couse, or go back and see the previous in the tutorial series.

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.