I’m sure if you’ve been working in WordPress for even a few months, you’ve run into (or used) shortcodes and not even known it. This article will give you an introduction to shortcodes – what they are, how they function, and a few you can use yourself.
Shortcode = Shortcut
A shortcode is a shortcut. Everything on your website has code behind the scenes. Your visual editor screen hides that code as you type your blog post, but if you click on the “text” view, you’d see the html. Some functions are complicated tasks. For example, if you wanted to add advertisements into your posts, or if you wanted to insert an email subscription link in the middle of an article. That requires more complicated coding. A shortcode makes it easy for you to remember and insert that function.
How does a Shortcode work?
There are two common ways shortcodes work.
1. The code for the shortcode (usually written in PHP) is in your functions file and then whenever you paste the shortcode, the software knows what to do by referencing that code.
2. Plugins. Many plugins do the work for you. For example, the contact form plugin writes in the PHP code, then tells you to put the shortcut [[contact-form]] wherever you want it to show.
How do I know what shortcodes I have available to me?
WordPress has many built-in shortcodes available. The full list of shortcodes are listed here, though you need to know that some of these only work for .com users, not self-hosted. Some trial and error might be needed. If you are a beginner, I’ll list a few here that may be useful to you.
Embedding a subscription sign up form into my post
If you use a mail service like Feedburner, you can get the HTML code from them and insert it into the text area of your post screen. But if you jetpack (which is what WordPress comes with), you simply need to add the following shortcode:
[jetpack_subscription_form]
Embedding a youtube video into a post
If you want to display a video and control how wide the screen is, use the following shortcode:
[[youtube=http://www.youtube.com/watchthevideoyouwant&w=320]]
Add the URL and then a &w= and specify pixel size for the screen.
Creating an archive list of posts
Some bloggers want a page with all the posts they’ve ever written. This is simple to do with a shortcode. Simply create a new page, and then put the shortcode in the page:
[[archives]]
I’ve created an archive page here. Archives
I also have a post teaching blogspot users how to create an archive page.
Showing off code
Let’s say you want to display some HTML, CSS, or other code on your blog, without the computer turning it into what you want! You can use a shortcode like this after installing the syntax plugin here.
Notice this shortcode has two rules…the opening tag and the closing. It’s slightly more complex than just one rule, but still doable. Don’t forget to change html to css or php if you are using a different language.
[html]<a href=”https://www.fabulousblogging.com”>FabulousBlogging</a>[/html]
Check out the Jetpack shortcode embeds widget
If you use jetpack, there is a shortcode widget that allows you to embed all sorts of media. Simply click on the link for more instructions on how to use each shortcode.
Advanced Shortcode?
Let’s say you want to only display certain content to subscribed users. A shortcode would work in this situation. Here’s how:
1. Make sure you have a registration system on your blog first. WordPress has a built in user function, so people can become “members” of your site. To check your settings, go to settings and general to see if you have registrations turned on. You may want to download a captcha plugin so you don’t get a lot of spam users. You’ll also want to set it to “subscriber” as the default membership.
2. Once you’ve done that, you’ll need to edit your functions file. If you are running a framework like Genesis, it is easy to modify the file without worrying about updates overriding your customization. Go to appearance, editor, and click on functions.php.
3. Insert the following code into the bottom of your functions file (you can search for code online that does VIRTUALLY anything):
add_shortcode( 'member', 'member_check_shortcode' );
function member_check_shortcode( $atts, $content = null ) {
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
return $content;
return '';
}
4. Now the shortcode is enabled. When you are typing your post, you’ll need to insert the shortcode where ever you want to hide the member only content. The shortcode is as follows:
[member] this text only displays for logged in users [/members]
Conclusion
WordPress allows you to create shortcodes, download them in the form of plugins, or write it directly into the php file of your blog. The possibilities are endless.
Are you following me on Twitter? You should! I’m going to use a shortcode to display my timeline. Tweet me if you liked this post!
[twitter-timeline id=334637172852391936 username=jdeneen4]
