How to Use Shortcodes & Grids

Here is a tutorial on how to use WordPress shortcodes.

Shortcodes are little code snippets that let you add features like buttons, audio players, FAQ toggle, and more. View live examples.

Shortcode Icons

When you click the shortcode button, the shortcode code will be added to your post. When you view the page live, you see the final result of the shortcode.

Available Shortcodes

MP3 Player

Upload an MP3 file to your server through WordPress. Copy the MP3 file URL location and push the MP3 player button. Paste the MP3 file location and click “OK.”

[mp3 url=http://youraddress.com/wp-content/uploads/XXXXXXXXXX.mp3]

Quote

Select the text that you want to appear as a quote and then click the quote button.

[quote]Lorem ipsum dolor sit amet. [/quote]

Buttons

Color Options: Red, Yellow, Green, Blue and Black. Size Options: Normal, Medium, Big, Huge and Toohuge. Download: Text file with button shortcodes here.

YouTube Video

Go to YouTube and copy the unique ID number at the end of the video URL.

Example URL: http://www.youtube.com/watch?v=G851EtiN0-o

[youtube value="Z2-B9j8MG38" ]

Vimeo Video

Go to Vimeo and copy the unique ID number at the end of the video URL.

Example URL: http://vimeo.com/49760839

[vimeo value="49760839"]

Website Snapshot

Use the shortcode below.

[snapshot url="http://hiphopmakers.com" alt="Website" w="550" h="350"]

Alerts

Write out the text that you would like to appear in an alert message, select the text, click the alert button, and type in the color of the alert. 5 Color Options: Red, Yellow, Green, Blue, and Grey. Download: Text file with alerts shortcodes here.

Google Maps

Go to Google Maps and type in the location you want. Once the location is found, click the link button and copy the URL. Click the Google Map button in WordPress and paste in the URL. Click “OK.”

[googlemap src="https://maps.google.com/maps?q=Guitar+Center&hl=en&ll=34.101056,-118.35067&spn=0.01075,0.026157&cid=8054102878333580747&gl=US&t=m&z=16&iwloc=A"]

Text Highlight

Select the text you would like to see highlighted, type the color you want and click “OK.”

[highlight]Default text is red.[/highlight]

[highlight color=blue] Color is blue.[/highlight]

[highlight color=green] Color is green.[/highlight]

[highlight color=yellow] Color is yellow.[/highlight]

[highlight color=black] Color is black.[/highlight]

Tooltip

Select text that you would like to have a tooltip. Click the tooltip button and type the text that you would like to appear in the tooltip. Click “OK.”

[tooltip text="This is a message box with important information you should read." ] Tool Tip Example. Hover over me[/tooltip] Fusce arcu nulla, sagittis in sollicitudin non, viverra sit amet nisl. Duis pretium condimentum accumsan.

FAQ Toggle

When creating a FAQ question to toggle, you must write out the answer first. Select the answer and click the FAQ Toggle button. This will give you an input field. Here you will enter what the question is, and click “OK.”

Download: Text file with FAQ shortcodes here.

How to Use Grid Shortcodes

The grid shortcodes allow you to put your content into columns when using the full width page template. The grids shortcode has been added in the 2.10 update.

Available Columns:

• Full Width (1/1 )
• Half ( 1/2 ) – Two columns
• One Third ( 1/3 ) – Three columns
• Two Thirds ( 2/3 )
• One Fourth ( 1/4 ) – Four columns
• One Fifth ( 1/5 ) – Five columns

Grid Layout Preview – Demo Site Link.

Grid Example Code:
To create content with 3 columns, you would use the shortcodes like this:

[column-group]

[one-third]Column 1 [/one-third]

[one-third]Column 2 [/one-third]

[one-third]Column 3 [/one-third]

[column-group]

[column-group]

[column-group]

[column-group]

[column-group]

[column-group]

[column-group]