I was fortunate to attend the meetup #4 titled ‘Meta boxes and Short Codes for Theme Development’. This event was organised by the WordPress Colombo Meetup group and held on 21 July 2016 at JKCS Auditorium, Colombo.

Dasun Edirisinghe, who also conducted a previous meetup on WordPress theme development began the presentation with the significance of WordPress as a CMS – for every four websites you visit, one of them is likely a WP site!

He then continued with a a brief intro to WordPress themes, to familiarize those of us new to WordPress. A WP theme is the clothes one wears if the website was a person. A theme can be built on top of a parent theme or from the ground up with the help of the starter theme, Underscores, which gives you a head-start and can save you a bunch of work (yes, you can start from scratch but it is rather painful).

You can also make use of front-end frameworks such as Foundation or Materialize to get the benefits of good stuff like Responsiveness  and Mobile First design. I use Bootstrap since I am used to their classes and grid system.

Shortcodes

Introduced with version 2.5, Shortcodes can be thought of as ‘a WordPress specific code that lets you do nifty things with very little effort.’. It allows you to embed files or create objects on a single line – which would otherwise require lots of complicated ugly code.

In short,
Shortcode = Shortcut 🙂

They help us by simplifying a lot of HTML to one line. For example, Revolution Slider, a popular premium plugin used to create sliders makes use of Shortcodes. You would create the slider you want to on the Admin panel and simply copy the Shortcode to where you want the slider to appear:

[rev_slider alias="front-slider"]

WordPress has some Built-In shortcodes baked into their software such as [audio], [gallery], [caption] and few more. For instance, using the [gallery] shortcode will give you an image gallery which would otherwise be hard to do with the HTML markup for it and keeping it in sync with uploaded images. By using a shortcode, the markup for the gallery will be created dynamically and automatically. Nifty indeed.

Using the [gallery] Shortcode as a slideshow.

That’s all good. How do I create a Shortcode? The Shortcode API allows us to do this. It is essentially a simple set of functions for creating WordPress shortcodes to be used in posts and pages. This is how plugin developers (like Themepunch who developed RevSlider) add their own versions of Shortcodes.

Shortcodes come in two flavors: [self-closing] and [enclosing] content here [/enclosing] – just like the two types of HTML tags.

Creating a shortcode is a two-step process:

1. Write a function which returns an HTML
2. Call add_shortcode with parameters as short code name, function name

Write the above code in functions.php or another php file and call it from functions.php

For more information, here is a complete guide to Shortcodes.

Meta Boxes

A meta box is the draggable box that is show on the editing screen of a post. It allows us to enter in information into the post that is in addition to the main content of that post. You can think of them as custom fields.

For example, for post type ‘Events’ we can have meta boxes with event title, event date, event location and even an event image.

We can see that Meta Boxes can be extremely useful, especially when the end user (client) is a non-technical users – which is almost always. Thus, it is safe to say that meta boxes are more user friendly than Shortcodes.

In case you are interested in learning how to create Custom Meta Boxes, do take a look at this post by Smashing Magazine.

However, an easier way exists to create custom meta boxes. Advanced Custom Fields is a great plugin which allows us to create custom fields very useful which can then be embedded to a page or post. You can download it here,

Meta Box is another plugin which allows you to do that. However it requires more work than ACF and I am yet to try this out myself.

Conclusion

Some of the examples demonstrated were from the following projects mfi-insights and nine-19-options. 

Overall, this meetup was excellent and I took home a lot of useful information. Dasun did a great job of explaining the topics. Looking forward to more events with WordPress Colombo – and for the time being, let’s try to implement some Shortcodes and Meta Boxes in our WP themes.