As a web developer, I often find that once clients get used to the idea that they can edit their own site many are likely to think about cool design & interactive they have seen on other websites, and think to themselves “Can I do that in WordPress?”
The answer, of course, is “Of course,” but depending on the feature being requested that can involve some work. Perhaps on the part of the web developer to enable a function or add a javascript library to their WordPress header; but most certainly on the part of the site owner to learn how to employ that new feature. This can mean acquainting oneself with additional code snippets, or memorizing Shortcodes.
For people who work in code everyday, that seems like meeting the client easily half-way. But even WordPress shortcodes can seem cryptic to average users. Especially where there are multiple optional/required attributes, and especially where the client is an organization and you have no idea who will be asssigned to use the tool you’ve developed. I was recently asked why one needed to write out entire attribute for an optional true/false attribute whose default was false. Example:
[myshortcode] //foo = false
[myshortcode foo="true"] //foo =true
Obviously, part of me was thinking “Come on, it’s not that hard is it?” but I thought I would have a go at finding a workaround so they could merely write:
[myshortcode]// foo = false
[myshortcode foo] //foo =true
So let’s go through a practical example. (If you’ve never worked with shortcodes before, I recommend you check out the docs on this feature, however you can begin by pasting a given code example in your theme’s function.php file.)
function myShortCodeFunction( $atts ){
extract( shortcode_atts( array(
'text' => 'Important Notice!',
'width' => '500',
'height' => '250',
), $atts ) );
return "<div style='width:{$width}px; height:{$height}px; background-color:aliceblue; border:3px solid SkyBlue;'>{$text}</div>";
}
add_shortcode('noticebox', 'myShortCodeFunction');
The code above will allow you to create a styled div element containing the text of your choice, and you may optionally set a width & height (default 500px × 250px), merely by typing [noticebox text="10 points from Gryffindor!"]
This looks pretty good, but what if on certain pages or in certain contexts the border didn’t look good? Well we can obviously adapt the myShortCodeFunction to accept:
[noticebox text="Some text." border="false"]
Which would look something like:
function myShortCodeFunction( $atts ){
extract( shortcode_atts( array(
'text' => 'Important Notice!',
'border' => 'true',
'width' => '500',
'height' => '250',
), $atts ) );
if($border == 'true'){
$borderstyle = 'border:3px solid SkyBlue;';
} else {
$borderstyle = '';
}
return "<div style='width:{$width}px; height:{$height}px; background-color:aliceblue; {$borderstyle}'>{$text}</div>";
}
add_shortcode('noticebox', 'myShortCodeFunction');
In the version above, if the attribute border="false" is NOT detected then the variable $borderstyle is assigned some inline CSS; otherwise it becomes an empty string, which when included in the returned string does nothing.
However if we wanted to simplify the shortcode from:
[noticebox text="Some text." border="false"] // no border
[noticebox text="Some text." noborder] // no border
We could modify the code in this way:
function myShortCodeFunction( $atts ){
extract( shortcode_atts( array(
'text' => 'Important Notice!',
'width' => '500',
'height' => '250',
'noborder' => isset($atts['noborder']),
), $atts ) );
if($noborder){
$borderstyle = '';
} else {
$borderstyle = 'border:3px solid SkyBlue';
}
return "<div style='width:{$width}px; height:{$height}px; background-color:aliceblue; {$borderstyle}'>{$text}</div>";
}
add_shortcode('noticebox', 'myShortCodeFunction');
In this final version we assign the result of PHP’s isset() function (which returns true/false ) to the default value for $noborder, then reverse the logic used to assign the $borderstyle variable.
Neat, huh?
border="false"
