WordPress School: Shortcodes

WordPress shortcodes are abbreviated code placed into the WordPress Visual or Text Editors that expands into a larger code structure. As we continue with Lorelle’s WordPress School free online course, it’s time to explore the basics of WordPress shortcodes.

The following is the embed code for a Google Map, pointing to one of my favorite local museums, The Rice Northwest Rocks and Minerals Museum in Hillsboro, Oregon:

<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2792.809130780463!2d-122.94987648443889!3d45.57427677910247!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54950456e76e254b%3A0xdfad5d11bde5b6cc!2s26385+NW+Groveland+Dr%2C+Hillsboro%2C+OR+97124!5e0!3m2!1sen!2sus!4v1502560000052">https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2792.809130780463!2d-122.94987648443889!3d45.57427677910247!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54950456e76e254b%3A0xdfad5d11bde5b6cc!2s26385+NW+Groveland+Dr%2C+Hillsboro%2C+OR+97124!5e0!3m2!1sen!2sus!4v1502560000052</a>

When the post or Page is saved, WordPress.com automatically converts it to the embed code for Google Maps like this:

[googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2792.809130780463!2d-122.94987648443889!3d45.57427677910247!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54950456e76e254b%3A0xdfad5d11bde5b6cc!2s26385+NW+Groveland+Dr%2C+Hillsboro%2C+OR+97124!5e0!3m2!1sen!2sus!4v1502560000052&w=600&h=450]

This is what you see in your Visual or Text/HTML editors. Doesn’t look like a map, yet, does it?

When the post is previewed or published, you will see the map like this:

The map is not a screenshot. It is interactive. Zoom in and out and move around on the map. The Google Maps shortcode taps into the Google Maps API allowing a live section of the map to be embedded on your site to help people find locations and directions.

Google Maps are a great way of providing instructions to the location of a store or company on a Contact web page. They are also fun to embed in a post about a favorite park, hike, fishing hole, vacation spot, or even create a custom map that charts your travels, hikes, or a specific route for shopping or exploring.

NOTE: Google Map embeds are tricky. You need to search for the exact address and use that embed code. If you search for a business name, you may get an invalid server request from Google Maps. Also note that WordPress.com has made it easier to use shortcodes by skipping the extra code and converting links and embed codes automatically to shortcodes. This may require saving your post as a draft twice before you can see the results on the front end preview of the post or Page.

Shortcodes allow the user to add content and functionality to a WordPress site without knowing extensive code or digging into the programming of a WordPress Theme or Plugin. With the shortcut of a shortcode, WordPress users may add all sorts of customization features to their site.

There are a variety of shortcodes in the core of WordPress. WordPress Themes have the ability to enable or disable these, and add more, as do WordPress Plugins.

Let’s experiment with the Archives Shortcode.

Add a New Page to your site. Title it “Site Map” or “Archives.”
Type in [archives].
Preview, then publish the post when ready to see a listing of all of the published posts on your site in a list.

Check out my site map as an example of what’s possible.

What You Need to Know About WordPress Shortcodes

Shortcodes come with WordPress out of the box, and also with WordPress Themes and Plugins. These snippets of code allow the user to add functionality to their site without touching the code.

The PHP code that enables the functionality, and adds the ability to use the abbreviated code to generate that functionality on the site, is called a function.

At its core, this is the function found to generate all WordPress Shortcodes:

//[foobar]
function foobar_func( $atts ){
	return "foo and bar";
}
add_shortcode( 'foobar', 'foobar_func' );

The attributes, represented in this abbreviated version by $atts, are the instructions as to what the shortcode is to do.

In the expanded form with functionality, I’ve called the shortcode “elephant” and set up two attribute values, “trumpet loudly” and “stomp.”

// [elephant foo="foo-value"]
function elephant_func( $atts ) {
    $a = shortcode_atts( array(
        'foo' => 'trumpet loudly',
        'bar' => 'stomp',
    ), $atts );

    return "foo = {$a['foo']}";
}
add_shortcode( 'elephant', 'elephant_func' );

Depending upon what “foo” and “bar” represent, the results would be “trumpet loudly” and “stomp.” What these represent are HTML code, modifications to HTML code, and initiates the programming such as generating a list of all the posts you’ve published as an archive list.

Right now, you aren’t at the stage where you can program shortcodes and add them to WordPress Themes or create WordPress Plugins, so I’m not going to dive into these much deeper. You need to learn how these work and how to use them on your site, and the more you use them, the better feel you will have for what a shortcode can do on your site.

WordPress.com offers a wide range of shortcodes to add functionality to your site. To learn about how to use these, see Shortcodes — Support.

Here are some examples of shortcodes to experiment with on WordPress.com.

More Information on WordPress Shortcodes

Assignment

Lorelle's WordPress School Assignment Badge. Your assignment in these WordPress School exercises is to experiment with WordPress shortcodes, specifically the ones available on WordPress.com.

I’ve listed some examples of shortcodes on WordPress.com above, and you may find more in the WordPress.com list of Shortcodes.

Your assignment is to use shortcodes to add features to your site.

Create a Page called “Site Map” or “Archives” and add an archive list shortcode.
Add a Google Map to a post or Page using the Google Maps shortcode.
Add a gallery to a post or Page with the gallery shortcode, testing the various options (parameters) to get the look and feel you like best.
Add a recipe to a post using the recipe shortcode.
Find another shortcode with a variety of features to experiment with. See how many ways you can change the look and feel of the content. If you wish, blog about your discoveries with screenshots or examples in the post. Let us know about it in the comments below so we can come inspect your work.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see: