Shortcodes »Snapguide

Snapguide is a website and iOS app for people to create and share step-by-step how-to guides. The service provides easy to understand instructions for a wide array of topics including cooking, do-it-yourself projects, fashion tips, life hacks, tech tips, and more.

Embedding with a URL

To quickly embed a guide from Snapguide, simply copy the guide’s URL from your web browser’s address bar while viewing the guide


and paste it on a line by itself.


We take care of the rest! It will show up like this:

↑ Table of Contents ↑

Embedding with a Shortcode

If you’d like to specify a particular size or highlight color for the guide, you’ll want to create a shortcode.

To do so, copy the URL from your web browser’s address bar while viewing the guide:


Create the shortcode on a new post or page using one of the following formats. Be sure to replace the URL listed here with the URL of your guide:

[snapguide url="http://snapguide.com/guides/make-a-fantastic-blue-cheese-stuffed-burger/"]

To change the width and height, for example to 500×280, you would use the following shortcode:

[snapguide url="http://snapguide.com/guides/make-a-fantastic-blue-cheese-stuffed-burger/" width="500" height="280"]

To change the guide’s highlight color to a color in particular, find and insert the color’s RGB hexadecimal representation, like the following shortcode, making sure to use the “#” like below:

[snapguide url="http://snapguide.com/guides/make-a-fantastic-blue-cheese-stuffed-burger/" width="500" height="280" color="#a30a54"]

Which produces a guide that looks like this:

Check out this guide on Snapguide

↑ Table of Contents ↑


1) Make sure the Snapguide link is not hyperlinked. If the URL is shown in your theme’s link color (as the second line in the screenshot below), then it is hyperlinked. Simply select the whole URL and click the “Unlink” icon on your Visual Editor toolbar. Once the URL is unlinked, you will see the link text in black.


2) Make sure to place the Snapguide URL or shortcode on its own line. This means there should be no character or whitespace before or after the URL/shortcode.

Not quite what you're looking for?

Get Help