Developer's Roundtable Notes

Session: Create Your Own Shortcodes and Widgets

Shortcodes, Shortcodes

Shortcodes are very handy. And easy.

They let you place specific content into your posts and pages with just a simple command.

They are most commonly used for forms and sliders. Things you want to create once and then have the freedom to place in your content.

They look like this:


Why do you sometimes hear negative comments about shortcodes?

Because they contain actual content for your site. If they’re created in a theme, when you change themes (and you know you will), that content is gone.

That’s why we’ll be creating them in a plugin.

Problem solved.


Uses for Shortcodes

I use shortcodes to make life easier for my clients.

Some Examples:

Format a company name to always look the same, no matter where it is or who types it in. ( My ComPany® )

Add PayPal buttons in multiple places for different items – without having to create a new button and embed the code.

Add a consistently formatted button inside the content in a page or post.

Shortcode Example #1

For text that you want to be consistent throughout a site, such as a properly formatted company name:

To use this, you simply type [mycompany] into your page, and it prints the company name formatted the way you want.

And the output is: My ComPany®

Shortcode Example #2

Add a button anywhere on your site and have it styled consistent with the rest of your buttons.

 To use this shortcode, add [mybutton text=”Go” link=””] to your page or post.

Shortcode Example #3

Allow your client to add PayPal buttons without having to create the button and copy the code every time.

 To add a PayPal button, just type [ paypal_button amount=”10″ name=”My Item” ] into your page.

Enclosing Shortcode

An easy way to allow clients to use CSS-defined styles or colors in their content.

This assumes, of course, that you have the .blue class in your stylesheet.
In the editor, you would type:  [blue]This is my text.[/blue]

Shortcodes Plugin

We’ve written some functions, now let’s protect them from disappearing.

Simply place them all into a site specific plugin.


Shortcode Reminders

How to remind yourself, and clients, how to use the shortcodes:

Add this function to the bottom of the plugin.

This will add a note at the top of all add and edit pages for posts and pages.

Admittedly, this is not the most elegant solution, but it is much easier than adding custom buttons to the TinyMCE editor.


DIY Widgets


A meetup notice
A special announcement
A testimonial
A welcome message for your users
Anything you want to easily put into a sidebar or widget area

Very Simple (Silly) Widget


Widget with a Custom Title


Testimonial Widget


Display a Widget Anywhere

Did you know? You can display a widget anywhere in a template:

Skip to toolbar