It’s taken some time to get to know the WordPress interface and what options I have for writing efficient code that makes sense for future expansion or editing. I’m just now getting my head round the CMS and how I can make it work for both me and a client. For example, I have a choice of using a shortcode within my pages to display html I want there, but hadn’t really understood why I would do this over just adding some html into that text field of the page.

I did some research and found these links to help explain:
https://codex.wordpress.org/Shortcode
http://diythemes.com/thesis/wordpress-shortcodes/
http://www.smashingmagazine.com/2009/02/mastering-wordpress-shortcodes/
http://www.webdesignerdepot.com/2013/06/how-to-create-your-own-wordpress-shortcodes/

We can call regularly used pieces of code with this shortcode instead of rewriting the entire html. I can see this coming in handy with things like buttons and to prevent clients from having to edit code. In practice this isn’t really helping a client if they don’t know the basics of html and css. In my own job, we have some simple CMS functionality on our sites so that people who understand the content can edit the content and kick out the middle man. But ultimately I’m the one to edit the content or re-teach the basics of html or css over and over. Shortcodes simplify this mess. They are a more basic, descriptive code for the less html-versed of clients. The client won’t have to worry about classes or correct element use.

So how do we make them?

Here is the example for a shortcode that represents an a tag (taken from the first link):

<a class=”button” href=”#“>Google</a>

would look more like

[button link=”http://google.com”]Go to Google[/button]

To create the example above, we need to use:

1. functions.php
2. style.css

In the functions file we paste:

function sButton($atts, $content = null) {
extract(shortcode_atts(array('link' => '#'), $atts));
return '' . do_shortcode($content) . '';
}
add_shortcode('button', 'sButton');

This tells WP to create a new empty function called sButton. The code following the word ’return’ is where I can define what html is returned when the shortcode is written into a page. add_shortcode(‘button’, ‘sButton’); basically states that the shortcode is named ‘button’ and links to the sButton function. Next I can style the button using the class name I defined in the function there class=”button”.

Something to note is that text widgets do not support shortcodes automatically, but the good news is a bit more code added to the functions.php file can solve this. This is the code, In this order!

add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );

WordPress does offer some shortcodes as default:

1. audio
2. caption
3. embed
4. gallery
5. playlist
6. video

Alas, a useful tool is the shortcode generator here…
http://generatewp.com/shortcodes/

For my Slicks website, the textwidgets now have shortcodes to easily change the picture thumbnail and more icon!

From:

To shortcode or not to shortcode