• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter

Email [email protected]

  • Home
  • About
  • Services
  • Portfolio
  • Blog
  • Contact
You are here: Home / WordPress / What is a WordPress Shortcode, and How Are They Useful?

What is a WordPress Shortcode, and How Are They Useful?

February 19, 2015 By Claire Brotherton 2 Comments

This is Day 17 in the 30 Day Blogging Challenge. You can read Day 16’s post here.

What is a shortcode?

A WordPress shortcode – not to be confused with shortbread – is a shorthand version of a piece of code. They’re written to allow users to add functions to WordPress sites in a quick way, without the user needing to write the code.

Shortcodes are written within square brackets []. They may be self-contained:

[shortcode]

or open and close:

[shortcode][/shortcode]

How do I use one?

Shortcodes are usually added to posts or pages.

For example, the

[gallery]

shortcode adds a gallery to your post.

computer hacker
Man holding an error message: Please contact support

Shortcodes may also be added to text widgets in widget areas.

Where will I find shortcodes?

Many plugins use shortcodes.

Some examples are:

Contact Form 7

This plugin generates a contact form, which is displayed by using a shortcode.

[contact-form-7 id="28"]

See this contact form on my contact page.

Download Contact Form 7.

Events Manager

This is a powerful and extendible events management plugin. You can add events and display them in multiple ways e.g. by date, location or category.

The shortcode below shows a list of 5 events in a specific category over 2 pages.

[events_list scope="future" limit=5 pagination=1 category=58]

See the result at the Events Manager demo page.

Download Events Manager.

Testimonials Widget

When you download the plugin, you need to create some testimonials in the same way that you would add posts.

When you insert this shortcode in a page, it will list all testimonials, newest first.

[testimonials]

Testimonials displayed with a shortcode

Download Testimonials Widget

Plugins with multiple shortcodes

Shortcodes Ultimate

I love this plugin. It provides a large number of shortcodes for many purposes. Here’s the list of things you can generate.

Shortcodes Ultimate shortcodes to insert

Here’s an example of a two column layout with boxes:

Shortcodes Ultimate 2 boxes in 2 columns

The best part is that you don’t need to write the code – you use a WYSIWYG interface, which generates it all for you based on the options you select.

Download Shortcodes Ultimate.

How do I create my own shortcode?

Here is a simple example, which creates a shortcode called [pink-tick] which can be used to replace the bullet in an unordered list.

Add this function to functions.php of your child theme:

 function pink_tick_shortcode( $atts, $content = null ) {
  return '' . $content . '';
}
add_shortcode( 'pink-tick', 'pink_tick_shortcode' );

You also need this CSS, plus the pink-tick.png file in an /images/folder in your theme.

span.pink-tick ul {
list-style-image:url('images/pink-tick.png');
margin-bottom: 5px;
}

Using the code:

[pink-tick]
    • List item
    • List item
    • List item
    [/pink-tick]

    The result:

    List items with pink ticks as bullets

    The WordPress Codex will teach you more about creating your own shortcodes. There are certain characters you should not use in your shortcodes, i.e. – & <> & ‘”.

     

    I hope this has given you a basic introduction into the power of WordPress shortcodes and what they can do. If you liked this post, please leave a comment.

    Related

    Share this post:

    Facebook Twitter Linkedin Pinterest E-mail

    Filed Under: WordPress Tagged With: 30 day blogging challenge, shortcode

    About Claire Brotherton

    Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

    Reader Interactions

    Comments

    1. Jolanda Hulstein says

      June 20, 2018 at 11:07 am

      Thanks Claire for this manual!
      It was very helpful and helped me with the image alignment issues, even in WP 4.9.6.
      I installed the plugin shortcode Ultimate as you mentioned in your article, which will also be a big help. I will surely come back for more ideas.

      Greetings from the Netherlands, Jo

      Reply
      • Claire Brotherton says

        June 22, 2018 at 12:47 pm

        Thanks Jo, I’m glad the post helped.

        Hope to see you back here soon!

        Claire 🙂

        Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

    Recent Posts

    • Focus On Beaver Builder Accessibility – Is the End Product Accessible?
    • A Deep Dive Into The WordPress Twenty Twenty Theme
    • Accessibility Scotland 2019: A Focus On Accessibility And Ethics
    • Can You Really Make An Accessible Slider For WordPress?
    • 50+ Regular WordPress Maintenance Tasks For A Healthy Site

    Top Posts

    • A Deep Dive Into The WordPress Twenty Twenty Theme
    • How To Set Up And Customize Twenty Nineteen Theme
    • How To Solve WordPress Image Alignment And Text-Wrap Problems
    • Focus On Beaver Builder Accessibility - Is the End Product Accessible?

    Categories

    • Accessibility
    • Blogging & Content Marketing
    • Business
    • Software & Tech
    • Websites
    • WordPress

    Archives

    • December 2019
    • November 2019
    • October 2019
    • September 2019
    • August 2019
    • July 2019
    • June 2019
    • May 2019
    • April 2019
    • February 2019
    • January 2019
    • December 2018
    • November 2018
    • October 2018
    • September 2018
    • August 2018
    • July 2018
    • June 2018
    • May 2018
    • April 2018
    • March 2018
    • February 2018
    • January 2018
    • December 2017
    • November 2017
    • October 2017
    • September 2017
    • August 2017
    • July 2017
    • June 2017
    • May 2017
    • April 2017
    • March 2017
    • February 2017
    • January 2017
    • December 2016
    • November 2016
    • October 2016
    • September 2016
    • August 2016
    • July 2016
    • June 2016
    • May 2016
    • April 2016
    • March 2016
    • February 2016
    • January 2016
    • December 2015
    • November 2015
    • October 2015
    • September 2015
    • August 2015
    • July 2015
    • June 2015
    • May 2015
    • April 2015
    • March 2015
    • February 2015
    • January 2015
    • December 2014
    • November 2014
    • October 2014
    • August 2014
    • July 2014
    • June 2014
    • May 2014
    • April 2014
    • March 2014
    • February 2014
    • January 2014

    Subscribe – RSS

    RSS Feed RSS - Posts

    RSS Feed RSS - Comments

    Footer

    Recent Posts

    • Focus On Beaver Builder Accessibility – Is the End Product Accessible?
    • A Deep Dive Into The WordPress Twenty Twenty Theme
    • Accessibility Scotland 2019: A Focus On Accessibility And Ethics
    • Can You Really Make An Accessible Slider For WordPress?
    • 50+ Regular WordPress Maintenance Tasks For A Healthy Site

    Tags

    30 day blogging challenge accessibility-ready assistive technology block editor blog blogging Brad Sugars branding business business coaching child theme content marketing CSS customizer disability freelance GDPR Genesis google analytics Gutenberg hosting images Linkedin marketing mobile friendly design plugin plugins post editor quiz responsive REST API sales security SEO social media theme themes twenty fifteen Twitter user experience web design web development website wordcamp wordpress.com

    Top Posts

    • A Deep Dive Into The WordPress Twenty Twenty Theme
      A Deep Dive Into The WordPress Twenty Twenty Theme
    • How To Set Up And Customize Twenty Nineteen Theme
      How To Set Up And Customize Twenty Nineteen Theme
    • How To Solve WordPress Image Alignment And Text-Wrap Problems
      How To Solve WordPress Image Alignment And Text-Wrap Problems

    [footer_backtotop]

    Copyright © 2019 A Bright Clear Web

    • Privacy and cookies policy
    • Sitemap