Shortcodes: the complete list of shortcodes available

Our themes come with many shortcodes that will help you to format your content the way you want. A shortcode is a code between brackets that create more features or content without the need of web development knowledge. You can use shortcodes in any posts or pages. We have created many custom shortcodes that can only be used in our themes. This is a tutorial that list all shortcodes available for our themes.

We plan to add new shortcodes in the future. If you have any suggestions, please contact us, we are always looking for new ways to improve our themes.

1. The Rating module shortcode

The rating module can be really useful for travel blogs, fashion blogs, food blogs or any type of blogs that present places or items.

You need to have a title and features to rate. Each feature can be rated from one star to five stars including half star.

Code:
[rating_container title="This is the title"]
[rating_feature name="Pool" rating="one"]
[rating_feature name="Breakfast" rating="onehalf"]
[rating_feature name="View" rating="two"]
[rating_feature name="Cleanliness" rating="twohalf"]
[rating_feature name="Price" rating="three"]
[rating_feature name="Internet speed" rating="threehalf"]
[rating_feature name="Dinner" rating="four"]
[rating_feature name="TV Channels" rating="fourhalf"]
[rating_feature name="Comfort of the bed" rating="five"]
[/rating_container]
Explanation:

To build the Rating module you need two shortcodes, one main shortcode: rating_container which is the container around the features and the other one is rating_feature to list all features or “options that are being rated”.

The shortcode rating_container has one parameter which is title. The title is at the top of the rating module so for example, if you are rating a hotel in Barcelona, the title could be Hotel 36 Barcelona.

The shortcode rating_feature has two parameter, the name and the rating. The name could be Cleanliness if we keep the same hotel example as above. The rating is the number of stars you give to that feature.

Here are all the ratings available:
– one
– onehalf
– two
– twohalf
– three
– threehalf
– four
– fourhalf
– five

Example:

This is the title

Pool
Breakfast
View
Cleanliness
Price
Internet speed
Dinner
TV Channels
Comfort of the bed

2. Image with title

This shortcode let you display an image with a title at the top and a legend below the image. This shortcode is responsive and will take the full width of the post or the page so be sure to have an image large enough.

Code:
[img_title title="This is the title of my image" legend="This is the legend of my image" imgsrc="http://hookthemes.com/wp-content/uploads/2017/02/image-example.jpg"]
Explanation:

This shortcode name is img_title and has three parameters: title, legend, imgsrc. The parameter imgsrc is the URL of your image, it can be hosted on your website or somewhere else, even if we recommend to host your images on your website.

Example:
This is the title of my image

3. Responsive Youtube embed

This shortcode displays a responsive Youtube embed. By default Youtube embed are not responsive, it means that when your website is being seen on a mobile device, the video will be larger than the mobile screen. With this shortcode the Youtube video will always fit the screen.

Code:
[youtube_embed id="xOOWk5yCMMs"]
Explanation:

The shortcode name is youtube_embed and the only parameter is id.

To make it work, you need the ID of the Youtube video. The ID is the part after www.youtube.com/watch?v= in a Youtube URL. It’s unique to every video. In this example: www.youtube.com/watch?v=xOOWk5yCMMs the ID is xOOWk5yCMMs.

Example:

4. Responsive Vimeo embed

The Vimeo embed shortcode works the exact same way as the Youtube embed shortcode.

Code:
[vimeo_embed id="95384593"]
Explanation:

The shortcode name is vimeo_embed and the only parameter is id.

As the Youtube embed shortcode, you need the ID of the video which is the string of numbers after vimeo.com/ for example vimeo.com/95384593 the ID is 95384593.

Example:

5. Responsive Google Map

This Shortcode lets you add a responsive Google Map on your site. By default to add a Google Map to your website, you need specify the size of the map which cannot work on a responsive website.

Code:
[maps_responsive]<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83327.54691286775!2d-123.19394296535293!3d49.25771428186153!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548673f143a94fb3%3A0xbb9196ea9b81f38b!2sVancouver%2C+BC!5e0!3m2!1sfr!2sca!4v1484548698157" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>[/maps_responsive]
Explanation:

The shortcode name is maps_responsive. To make this shortcode works, you need to insert the iframe code generated by Google Maps inside our shortcode and it will resize to the width of your page. Do not forget to close the shortcode.

Example:

6. The gap shortcode

This has nothing to do with the clothing retailer. This shortcode lets you add a blank space of any height wherever you want. For example, you want to add two videos in your blog post but would like a bigger space between those videos, add the gap shortcode and specify the height you want.

Code:
[gap height="150px"]
Explanation:

The shortcode name is gap and the only parameter is height. You can put any value to the height parameter. It’s important to not forget px at the number for example: 20px, 50px, 150px.

Example:

There is a gap of 150 pixels below this line of text.


There is a gap of 150 pixels above this line of text.

7. The section and column shortcodes

The section and column shortcodes are two shortcodes that work together. The section shortcode is used to specify all the settings needed for the group of columns and the column shortcode is used to display the content in the appropriate column. The column shortcode needs to be inside the section shortcode otherwise it will not work. See an example below.

Code:
[section]
[full_width]
Content of the full width column
[/full_width]
[/section]

[section]
[one_half]
Content of the first half column
[/one_half][one_half]
Content of the second half column
[/one_half]
[/section]

[section paddingtop="30px" paddingbottom="10px" margintop="50px" marginbottom="100px" bgcolor="#f54c10" color="white"]
[one_third]
Content of the first one/third column
[/one_third][one_third]
Content of the second one/third column
[/one_third][one_third]
Content of the third one/third column
[/one_third]
[/section]

[section]
[one_fourth]
Content of the first one/fourth column
[/one_fourth][one_fourth]
Content of the second one/fourth column
[/one_fourth][one_fourth]
Content of the third one/fourth column
[/one_fourth][one_fourth]
Content of the fourth one/fourth column
[/one_fourth]
[/section]
Explanation:

The first shortcode is named section. This shortcode goes around the columns and needs to be closed. There are many parameters to the section shortcode. To see an example of how to add those parameter, see the third code example above. Here is the list:

Parameter Explanation and Values
paddingtop To add padding top to the column section. It’s only useful if you are using a background color. The value needs to include px e.g. 50px.
paddingbottom To add padding bottom to the column section. It’s only useful if you are using a background color. The value needs to include px e.g. 50px.
margintop To add margin top to the column section. The value needs to include px e.g. 50px.
marginbottom To add margin bottom to the column section. The value needs to include px e.g. 50px.
bgcolor Color of the background. You can use any hexadecimal color starting with # e.g.#4630d8 or are color name like red
color Color of the text. As the bgcolor parameter you can use any html colors.

The column shortcode is different for every size of the column. There are four different sizes:

  • full_width
  • one_half
  • one_third
  • one_fourth

Any combinations that get a full column are possible. For example, one_fourth + one_half + one_fourth would give a full column. See the example below.

Example:

Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus, ne eum ut praepotens acueret in fiduciam exitiosa coeptantem. verum navata est opera diligens hocque dilato Eusebius praepositus cubiculi missus est Cabillona aurum secum perferens.

Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus, ne eum ut praepotens acueret in fiduciam exitiosa coeptantem. verum navata est opera diligens hocque dilato Eusebius praepositus cubiculi missus est Cabillona aurum secum perferens.

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates. Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates. Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates. Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates.