Customize your site with WordPress shortcodes

WordPress themes are great: pick a design, plug in some content and your logo, and boom, you’ve got a functioning website in under an hour. It might even look good. 

That is, until you realize you picked the same theme as 3 million other people, and your portfolio looks a lot like this fashion blog and this local food directory and this save-the-date.

How do you break the mould and add customized content to your site without hiring a programmer or diving into a black hole of code yourself?

Say hello to the Shortcode API, one of the coolest and most accessible features of WordPress.

What are shortcodes?

Shortcode autocorrects to shortcake, which is apt, since shortcodes make code a piece of cake.

Whether you understand it or not, code makes up everything on your website. If you navigate to the “text” view of a post, you’ll see things like <a> tags (which define hyperlinks) and <p> tags (which create paragraphs). This HTML mark-up tells your website how to present your content.

What if you want to add a button or an advertisement to a post? That generally requires more complex coding. Shortcodes, however, allow you to distill large sections of convoluted, ugly code into a single line, tidily bookended by square brackets, to the same effect.

Shortcodes in action

WordPress lets you use shortcodes from its existing library, download them in the form of plugins, or write and register your very own shortcodes. Whether you’re a .com user or self-hosted, there are dozens of shortcodes available to you. Here are a few beginner-friendly codes to get you started.

To display a video and control screen width, insert this shortcode with the URL and desired pixel size:

[youtube=http://www.youtube.com/sneezingbabypanda&w=360]

To embed an Instagram image, simply wrap the URL in shortcode like so:

[instagram url=http://www.instagram.com/sepiatonedholidaysnap]

To create an archive page of all your previous posts, create a new page and insert:

[archives]

Piece of cake, right?

Shortcode plugins

The implementations above are both useful and intuitive. They do, however, require you to remember the shortcode itself. Shortcode plugins make life even easier, adding icons to the visual editor so you can add specialized elements like columns, toggles, pricing tables, image effects, and more.

We’re partial to ZillaShortcodes, but lately there’s been an explosion of great shortcode plugins that will have you adding style and functionality-enhancing elements to your site in no time.

Writing your own shortcodes

While a lot of people use basic WordPress shortcodes and plugins to add specialized content to their posts, comparably few venture into the theme functions.php file to create shortcodes of their own.

If you find yourself doing a lot of repetitive tasks in the post editor, or if you frequently require a specific format, it might be worth your while to make a shortcode for it. It’s not hard — you just need to create your function, register the shortcode by setting a unique name, and tie the two together.

The fine folks at Smashing Magazine put together a first-rate tutorial on creating custom shortcodes, so if you’re ready to get your hands dirty, head over right now and start streamlining your code.

PSA: As of Sept. 29, 2017, you can no longer purchase themes from this website. We will continue to provide limited support, including bug fixes and security updates, until March 31, 2018. Thank you for everything. We'll miss you dearly.
+×