Skip to Main Content

How to use and manage shortcodes WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Most beginners are confused as to the true meaning of the shortcodes. Translated, this term means Short Code or shortcut », In short a code that we use to display / execute a feature quickly.

I said quickly, because these features can be displayed / executed differently, by changing the source code, but it obviously takes a lot of time.

Whether you are a developer or just a WordPress user, you need to learn how to use shortcodes. These are in most cases added by plugins / themes, but others are available by default.

These shortcodes are generally used on the visual editor or in some widgets.

How is the shortcodes

The shortcode is usually preceded by an open bracket " [ "And generally ends after a closed hook" ] ».

The shortcodes are of two types:

  • Simple shortcodes, they only consist of an opening and closing hook in this style: "[shortcode]".
  • Paired shortcodes are two shortcodes that are slightly different in their form but which remain independent from each other. They are generally used to capture very large data. They usually come in this form: [Shortoce_paire] content to capture [/ Shortcode_paire]

The code shortcodes exceptionally accept parameters. This is additional information added to a shortcode. They come in this form " parameter = 'value' ". Here is an example of a shortcode with parameter:

« [parameter shortcode = 'value'] ».

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Remark : Paired shortcodes also accept parameters.

How to use the shortcodes available by default

These are the shortcodes provided with WordPress after its installation. It is more precisely:

For videos: [video]

This shortcode takes as parameters the following attributes:

  • « src To indicate the source of the video, for example: [video src = 'http: //example.com/video.mp4']
  • « mp4 To tell some browsers that the file is in mp4 format.
  • « mauve To tell some browsers that the file is in mov format.
  • « ogv To tell some browsers that the file is in ogv format.
  • « height "," width To set the height and width of the image.
  • « autoplay To enable auto play. Take a value « on " or " off ».
  • « preload To enable the anticipated loading of the video. Take a value « on " or " off ».
  • « loop For a reading in the shop. Take a value « on " or " off ».

For audio files: [Audio]

This shortcode allows you to add an audio player to your blog. It takes the same parameters of the video shortcode, except the parameters " height "And" width ».

For galleries: [gallery]

This shorcode allows you to create a photo gallery on WordPress. However, you must provide the identifier of the different images of your blog to the "ids" parameter, so as to have a shortcode identical to this one.

« [gallery ids = '1,200,434,50'] »

For more information, I invite you to consult this documentation available on WordPress.org.

Some plugins specializing in displaying web elements

Some WordPress plugins add functionality that allows you to display web elements. You therefore no longer necessarily need to master HTML / CSS to personalize your pages.

As plugins, I can cite:

Ultimate Shotcodes

Shortcodes-Ultimate

By adding this plugin to your blog, you will notice a new button insert the shortcode »Available on visual editor. In fact, this plugin adds new functionality to your blog. It's the case :

  • the lightbox
  • Audio files, video (Youtube video, Vimeo)
  • Documents
  • Articles
  • user
  • Templates (themes)
  • Paintings
  • tabs
  • Accordions
  • And many more functions

There are a number of things this plugin offers, and I'm sure it will make your life a lot easier.

Easy Bootstrap shortcode

Here is a rather interesting plugin, it adds new graphic features to your blog.

easy-bootstrap-shortcode plugin-de shortcodes

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

When I talk about graphics I am referring to the different components of the Bootstrap framework, that is to say panels, accordions, sliders, tables, images, galleries in short, a panoply of very interesting features to create a good " landing page ».

easy-bootstrap-shortcuts

That's it for this tip on WordPress shortcodes. Feel free to share this tutorial on your favorite social networks.

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
1 shares
Share1
tweet
Save