Next Generation Shortcodes for WordPress

The typical shortcodes implementation is cumbersome at best. I've set out to change that with the goal of focusing on enhanced usability for content authors

Here’s a sneak peak at a section of the shortcodes gallery that’s coming in Version 6.5. You can see a live example online here. More to come…

shortcodes.jpg

Here’s a section of the gallery that is not in view in the screenshot above:

shortcodes2.jpg

I will be adding to this list, either on the same panel you see above, or via a tabbed section at the top of the shortcodes gallery. For example, I may have tabs for specific groupings of elements (bullets, pricing tables, buttons, line dividers, etc). For example, here’s a 1 click Pricing Table included in this update:

Pricing Tables!

Good

Description

  • Feature #1
  • Feature #2
  • Feature #3
$27
Buy Now

Better

Most Popular

  • Feature #1
  • Feature #2
  • Feature #3
$47
Buy Now

Best

Description

  • Feature #1
  • Feature #2
  • Feature #3
$77
Buy Now

Pricing Table with Options Index

Options

  • Disk Space
  • Domains
  • Email
  • 800 Number
Cost

Standard

  • 5GB
  • 250
  • 100
  • No
$47
Free Trial

Premium

  • 1TB
  • Unlimited
  • Unlimited
  • No
$77
Free Trial

Ultimate

  • 5TB
  • Unlimited
  • Unlimited
  • Yes
$97
Free Trial

Improving ShortCode Editing Usability

One thing I wanted to improve upon from the existing shortcodes galleries I’ve seen, is that I wanted to include usability enhancements like double-click and larger hit areas.

For example, I find OptimizePress’s shortcodes gallery a bit tedious to work with due to the fact that there’s lots of excess scrolling and you have a tiny hit area to select a shortcode object. In my example, you can see that the hit area for the selected element is very large (the rounded rectangle over the selected item in the screenshots above). These rectangles appear when the mouse is within the hit area of the object.

You can doubleclick the shortcode element in the preview window and the object is instantly inserted into your content.


I also wanted to improve the layout of the shortcode once it appears inside the post editor. For example, I’ve increased the spacing around shortcode elements (inside the editor only) to make it simpler to edit the shortcode elements without creating unwanted effects.

I’ve sprinked this post with a few of the new shortcodes to give you a taste of what’s to come – more examples here. You can see the effects around the headings within this article.ย Check the source code of the page and you’ll find clean, semantic Html5 markup.

Google Maps Shortcode

Shortcode: [googlemap width="550" height="400" src="paste-map-link-here"]

 

Adsense Shortcode

Shortcode: [adsense width="336" height="280"]

The Shortcode graphic elements are Implemented with a single sprite Image that’s less than 15k – They’re as fast to load as they are attractive!

These are just a few of the functional enhancements that have been added to the upcoming version 6.5 release. Please share your thoughts and suggestions in the comments box below!

Click Here Click Here Click Here
Click Here Click Here Click Here

6 Responses to “Next Generation Shortcodes for WordPress”

  1. Taylor Banks says:

    Great stuff, Scott. I’m consistently impressed with the features you manage to implement in each new version, while maintaining the speed and visual appeal of resulting blogs. I’m quickly becoming your biggest fan… ๐Ÿ˜‰

  2. David says:

    Very nice !

    When can I give V 6.5 a try ? ๐Ÿ™‚
    Cant wait !

    • I’m finishing up the shortcodes gallery (adding tabbed panels, buttons and adsense blocks and a few other goodies).

      I hope to release it next week.

      Update: Its available now. Check your downloads page.

  3. snoopy says:

    Wow! Can’t wait!! Thanks Scott!

    • Your more than welcome. I’ve been reluctant to add shortcodes to the software due to the poor implementations I’ve seen. I’m working on making it a much better experience than we’ve been used to.

      More to come!

โ˜ Back to Top