October 25, 2014

How to Create Your Own WordPress Shortcodes Using a Plugin

I recently wrote a couple other tutorials about WordPress Shortcodes, what they are and how to use them in Widgets. This WordPress tutorial will show you how to create your own Shortcodes. The traditional method of creating Shortcodes includes hand coding them inside your theme’s functions.php file.

I’m going to show you an easier way to create Shortcodes without the need to know how to write PHP code. We’ll accomplish this with the help of a plugin named Post Snippets. In short, the Post Snippets plugin allows you to create content and then makes that content available to you in a Shortcode. You can then insert this Shortcode into your posts as needed. Here’s the description from the plugin author:

This admin plugin stores snippets of HTML code or reoccurring text that you often use in your posts. You can use predefined variables to replace parts of the snippet on insert. All snippets are available in the post editor with a TinyMCE button. The snippet can be inserted as defined, or as a shortcode to keep flexibility for updating the snippet.

After activating the plugin, you’ll find a new item named Post Snippets under the Settings tab in your WordPress backend.

How to use the WordPress post snippets plugin

Post Snippets

Clicking on the Post Snippets link takes you to the snippets creation and management screen. You’ll also see some handy explanations and directions from the plugin author. A nice usability touch.

How to create and manage post snippets shortcodes for WordPress

Post Snippet Shortcode Creation and Management

To create your first Post Snippet (and resulting Shortcode) just click Add New Snippet. You’ll see some input fields to fill out.

Creating a post snippet WordPress Shortcode

Creating a post snippet WordPress Shortcode

The Title field is simply the title of your snippet and therefore your Shortcode, try to be brief. Let’s ignore the Variables field for now. Next comes the Snippet field. This is where you’ll enter the text and/or HTML code you would like this Shortcode to display.

Important Note:
I think it would be much more user-friendly if this plugin were to integrate the visual editor, or at least the HTML editor when creating content for the Snippet input field. As it is now, you will have to write HTML code directly in this field. Of course, you could always write your content in a draft post using the visual editor, then switch to HTML mode and then copy/paste that into your Snippet field.

You will also see two checkboxes on the far right. One that says “SC” and one that says “QT”. “SC” stands for Shortcode and “QT” stands for Quicktag. By checking these you are telling the plugin to make this snippet available to be used as a Shortcode and also to make a Quicktag button available in the Visual editor.

Using WordPress Post Snippets to Create Shortcodes

Using WordPress Post Snippets to Create Shortcodes

Now let’s create a post and see what this plugin can do. When creating a new post, you’ll see a new button in the Visual editor that looks like a yellow scrap of note paper.

WordPress Post Snippet Shortcode in Visual Editor

WordPress Post Snippet Shortcode Button in Visual Editor

Clicking that button will bring up all the post snippets you’ve created and allow you to chose which one to use. Once you’ve made your choice, the Shortcode for that post snippet is inserted into your post wherever your cursor is positioned.

Select the Post Snippet you would like to insert

You will now see the Shortcode named FirstShortcode in your post.

Let’s have a look at this same post on the frontend to see the output of that Shortcode.

As you can see, it pretty easy to create reusable content to include in your posts using your own Shortcodes created with the Post Snippets plugin for WordPress.

I can think of a lot of ways to use these post snippets and Shortcodes. How would you use them for your own site?

I hope you enjoyed this WordPress tutorial, and if you found it helpful please share it with the world on your preferred social network. I sure would appreciate it!

Want to learn WordPress on the go?

The WP Modder App provides you with WordPress plugin and WordPress theme reviews to help you make informed decisions when building your WordPress websites, either for yourself or your clients.Download the WP Modder App now!

Learn more about WordPress anywhere with the WP Modder App for iPhone, iPod Touch, and iPad. You'll have access to all of my past and future written and video tutorials as well as reviews of the latest plugins and themes, all from the comfort of your mobile device!

How many times have you have you wished you could run through a WordPress tutorial while in the bathroom? C'mon, you know you Facebook in there anyway. Why not learn something while you're at it? It's the ultimate in time management. But seriously...

You'll also gain the ability to gain access to free image and link promotion back to your own WordPress powered site! See more details and get the WP Modder App now.

WP Modder runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

It's so damn good, I've redesigned all of my sites using Genesis and can confidently recommended it to you here.

Want an Awesome Host? We Recommend HostGator

HostGator for WordPress

Since its establishment in 2002, HostGator has been a world-leading provider of web hosting service. Although their office is in Houston, Texas, they provide top-notch service to clients and developers from over 200 countries internationally with a staff of over 600 employees. They offer Shared, Reseller, VPS, and Dedicated server packages for both beginners and professionals alike.

Each of their shared Web Hosting plans includes 24/7/365 support, a 99.9% uptime guarantee, and a 45-day money-back guarantee. If you would like to learn more, please visit their company page.

I use HostGator for the majority of my own sites and I continually recommend them to my clients. Learn more about HostGator now!

Get our FREE WP Topics Newsletter

The WP Topics newsletter is delivered twice monthly and it's jam packed with information on our WordPress People interviews, WordPress tutorials, new and useful plugins, themes, marketing techniques, and more.

We Respect Your Privacy.

tutorials delivered by email
* indicates required

About Adam W. Warner

I’m a web development consultant and instructor specializing in the use of WordPress and WordPress Multisite.My development philosophy focuses on solutions, education, empowerment, and support for my clients. I will provide you the tools to achieve your project goals, and I will show you how to use those tools.

Comments

  1. Wow, brand new post ( still Nov 25 here… ) and was what I searched for !! Step right up and say, THANKS !!

  2. I was working on making custom shortcode input boxes in my theme options page all morning, then came across your post.

    Why not use a plugin to do the same thing. So far its working great.

    Thanks for the quick overview and bringing it to our attention.

    James Tryon
    Easily Amused, Inc.

  3. hmmm I like this for what it does but I was looking for a shortcode creator that also made a way to input text after you insert the code like:

    [tabs]
    [tab title="Tab no. 1"] text here [/tab]
    [tab title="Tab no. 2"] text here [/tab]
    [tab title="Tab no. 3"] text here [/tab]
    [/tabs]

    can someone direct me to a tutorial on this or a plug-in ???
    Thanks for your great tutorial! I just need a little more :) you rock

Speak Your Mind

*