3.3: Shortcodes

3.3 Shortcodes

• A Shortcode is a WordPress-specific piece of code that lets you embed different types of files or create objects inside of post and pages that would normally take a large amount of programming. There are 6 types of base short codes pre programmed into WordPress:

• [audio] - allows you to add a audio clip to your website

  • [audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

• [caption] - this will allow you to put a caption in at any point in the post or page

  • [caption id="idincss" align="alignright" width="300"]<img src="http://imagepath.com/image.jpg"/> The Great Wave[/caption]

• [embed] - this shortcode allows you to embed a page or other source direclty into your page.

  • [embed width="123" height="456"]...[/embed]

• [gallery] - This shortcode is used to add a photo gallery easy to your web page. This is created normally by using the add media button and selecting gallery. But you can add images to the gallery by the id of the picture.

  • [gallery ids="729,732,731,720"]

• [playlist] - This displays a list of audio or video using a defualt PHP array.

  • [playlist ids="123,456,789"] (audio)

  • [playlist type="video" ids="123,456,789" style="dark"] (video)

• [video] - Allows you to display and play video files.

  • [video src="video-source.mp4"]

• Plugins also commonly use shortcodes in many instances. A common plug we will use in this lesson called Contact Form 7 uses short codes to place pre created contact forms in posts and pages. Shortcodes also are used with different custom field plugins as well.

Figure 3.c.1

• Here is a example of Contact form 7 shortcode. As you can see above the code is generated from the contact from 7 plug.

Figure 3.c.2

• This is what the code generates on the frontend of the website. As you can see this is a very powerful piece of code with minimal work.

• All of these shortcodes are easily used by adding any of the directly to any post or page inside of WordPress.