<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

Shortcodes for the Shortsighted: A WordPress Solution for Extra Markup

Software Development, Software Solutions

Ok… that title was a little meaner that it was intended. When a designer chooses to use a CMS, the intention is for other people to be able to maintain the content. If a static site is used, no one but the designer or whoever had a bit of HTML knowledge is able to make any changes and then, if it happens to be Marketing-driven for example, that is a headache for that person to maintain content that’s ever-changing. A CMS is supposed to minimize that effort leaving the content in the hands of a content owner, like Marketing. Making a page behave differently than the rest is a different story.
WordPress, by default, uses a third-party Visual editor called TinyMCE. In my opinion, TinyMCE is the best CMS editor out there. Alone, TinyMCE won’t allow you to add HTML elements other than the basic content markup controlled by the editor. So, Wordpress has included a "Text" editor to supplement the Visual editor.
The issue with this is TinyMCE takes control. You can toss some HTML elements in the Text editor and it will work great. However, A Marketing person might want to change the copy, or even just a typo. Once they start using the Visual editor, TinyMCE will remove all or a lot of the HTML markup causing a designer to decide to outsource overseas out-of-pocket just to support Marketing changes.
That kinda digs into the shortsighted part, but I do want to say that it’s not Marketing or the content owner's fault. They’re supposed to make the page work accurately with their efforts, not know how to maintain code… the purpose of the CMS.
One solution is to create new content type (like Pages or Posts). Another is to try your luck with templates and custom fields… Or you can just use shortcodes.
Say you need the ability to add a catchy call-to-action element with some specifiable alignment class and a link inside pages with a structure like this:
[html]<div class="cta bottom"><a href=“/solutions">Call to Action</a></div>[/html]
(You’d need “bottom”, “/solutions”, and "Call to Action” to be able to be changed.)
Inside functions.php add this:
function cta_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'href' => '',
'align' => ''
), $atts ) );
return '<div class="cta ' . esc_attr($align) . '"><a href="' . esc_attr($href) . '">' . do_shortcode($content) . '</a></div>';
add_shortcode( 'cta', 'cta_shortcode' );
(of course surrounded by <?php … ?>)
Then, all you gotta do is put this in your Visual editor:
[html][cta href=“/solutions" align="bottom"]Call to Action[/cta][/html]
It stays there switching between the Visual and Text editors. Yeah, you’re going to have to explain it to your content owner or ask that person to avoid it, but you can generally document it and forget about it.
If you’re constantly making custom shortcodes for those people who are anti-consistency check this out.

TAGS: Software Development, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts

Blog Archives

See all