Custom ‘Content Widgets’ in WordPress

Of all the WYSIWYG editors out there, I must confess that I like TinyMCE the most. Now, don’t get me wrong, I don’t like wissywig. I don’t like it one bit, but clients do. Our industry is cursed with the misnomer that Web content should be (and therefore is) easy for anyone to manage.

It might not be that I like TinyMCE itself the best, but WordPress’ very customized implementation is quite well done which speaks really well for TinyMCE. While there are a number of things I don’t like about the default implementation, there are plugins like TinyMCE Advanced that help me make it my own and in doing so help out my clients. Personally, I don’t use it to add functionality, but the opposite, I remove a whole bunch. Personally I prefer it when a client is partially ‘locked into’ the established design guidelines of a comp and can’t at their will have the option to center, giganticize, and make red all of the text that needs to pop so those buttons are removed completely from the toolbar.

In a perfect world everyone would learn basic HTML and be able to edit a simple naked textarea if they wanted to manage the content of a website. In a parallel perfect world, Markdown would be even more prevalent and acceptable to the Average Joe when it comes to editing Web content. The world, however, is anything but perfect, so we’ve got WYSIWYG.

Advanced content management for clients

Formatting text and inserting pictures is one thing, but recently I’ve been working on a number of client sites that required an even higher level of control. Nothing too extravagant, but nothing “easy” to provide given standard WYSIWYG conventions.

The goal was to provide the client with a simple graphic that would link to an additional page of the site. No big deal, and totally possible with a default WYSIWYG editor. Just insert an image, when it’s included select it and apply a link to a page. Not an amazing achievement but not totally apparent to someone editing their first website.

The first problem is uploading an image, it’s sometimes a bit difficult for extremely new content managers. The next level of difficulty is adding the link to the image itself. Usually, this process is as expected: first click the image to ‘select’ it, and then choose the toolbar button to add a link. The content editor would then need to go out to the live version of their website, copy the link from the URL bar, and paste it into the link entry bit of the editor. I’m not sure about your clients, but mine have often become frustrated at that level of interaction required to getting something to link somewhere.

As I went through the scenario in my head I thought that there must be a better way. There is: shortcodes.

Shortcodes are my key to success

Shortcodes were born in WordPress 2.5 and can be thought of basically as text-triggered macros that your clients can use when editing content in the TinyMCE editor of WordPress. The beauty of the Shortcodes API is that it’s an API; you can create your own shortcodes and do with them anything you’d like.

Out of the box, WordPress uses shortcodes for things like multi-image galleries. Plugins use shortcodes all the time to provide the exact functionality they were designed to provide. There’s no reason your themes can’t have that level of flexibility as well.

As per the API spec, implementing your own shortcodes is really straightforward and easy:

// [bartag foo="foo-value"]
function bartag_func($atts) {
  extract(shortcode_atts(array(
    'foo' => 'something',
    'bar' => 'something else',
  ), $atts));

  return "foo = {$foo}";
}
add_shortcode('bartag', 'bartag_func');

Using that snippet alone will open lots of doors with shortcodes for use in your designs and therefore your themes.

As the client project that inspired this solution continued on, I used shortcodes in a number of other places to include a client-positionable widget including the (formatted by me) team members name, their job title, and conditionally a link to a video interview with them using data stored in a Pod. It was a simple parameter-less shortcode along the lines of [flag_team_member_data] and would automatically include the appropriate information. The information was styled exactly as per the designed comp, it was floated right and there was just the right amount of padding surrounding the element.

Why I like shortcodes as a solution

For me, shortcodes provide an ideal balance between client satisfaction and my satisfaction. I’m happy if the client is able to move a variable piece of content like that from place to place and get what they expect to see the first time they try to move it. I’m much less comfortable should they want to change the design on a level of aesthetics and can do that with a simple click of a WYSIWYG toolbar.

This is all instead of including the HTML in the editor’s HTML view and hoping your client doesn’t decide one day to replace all of the content in the editor by selecting all and hitting delete. It’s also instead of having to explain that “on this page there’s a bit more going on under the hood so be careful editing” or something along those lines.

I also like that what we’ve discussed is just the start as far as possibilities with shortcodes are concerned.

You could go so far as to build your own shortcode integration framework that provides additional TinyMCE toolbar buttons for your clients to interact with. Shortcodes could be used in variable ways to interact with other data from the website, especially Pods. That’s a real benefit to shortcodes themselves, they can easily be a simple reference to an image, or they can return extremely detailed and well-formatted bits of custom data exactly how you want.

Shortcodes are an API done really well. They’re super easy to implement and you can take them extremely far when it comes to customization. Content widgets are just one aspect of shortcodes, but I hope at some point they help you to accomplish something in a new way and in doing so giving your clients an additional, acceptable amount of freedom.