Previously we mentioned the Text and Visual tabs at the top of the Text Area box.
When you insert a shortcode your content area should be set to Text (not Visual).
You will see some html code in this view – try not to change any html code unless you are sure you know what you are doing. If you enter shortcodes in Visual mode the code will like pick up other tags and may make them not function as they should.
Overview
Most content styling shortcodes are surrounded by and opening tag and a closing /tag like this:
[tag1] your content [/tag1]
Some shortcodes like a Divider (horizontal rule) don’t have any content therefore don’t have a closing tag.
Also, you can put a shortcode inside a shortcode but the tags from one shortcode must completely wrap around the tags from the other shortcode as per below:
[tag2] [tag1] your content [/tag1] [/tag2]
Exercise 1 – Divider
Let’s begin with a simple Divider (horizontal rule) shortcode which you would use to separate blocks of content.
- Open a page OR post.
- Place your curser in the desired position in your text box (the place you wish to insert the shortcode) then select the Insert Shortcode button.
- Select the Divider Shortcode and the shortcode options as desired
- Click the Insert Shortcode button
- Now you should see the shortcode as shown.
- When you view this on your website it should look like the rule below
Exercise 2 – Alert Box
Ok let’s do a more complicated shortcode – the Alert Box:
- Open a page OR post.
- Place your curser in the desired position in your text box (the place you wish to insert the shortcode) then select the Insert Shortcode button.
- Select Alert Box and your desired options and click Insert Shortcode
- You should now see the below shortcode on your page
- You can see your settings the such as align=”left” which you could edit right here if desired and change to “right” or the color which you could change to a HEX color.
- Replace the Lorem ipsum text with your real text
- And on your website you should be seeing something like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu lectus elit.
Excercise 3 – Columns
- Open a page OR post.
- Place your curser in the desired position in your text box (the place you wish to insert the shortcode) then select the Insert Shortcode button.
- Select Columns and the 50 / 50 box (i.e. two columns) and click Insert Shortcode
- The shortcode should look like this where the 50 is the column % i.e. halves):
- For three equal columns it would look like this where the 33 is the colums % (i.e. thirds):
- ‘Your Content’ refers to what is actually going to be in that column (text and images, or other shortcodes)
- Replace the words ‘Your content’ with your actual content. Have a play – you’ll soon get the hang of it.
- Now on your site your should be able to see something like this:
Watch the Video
Now it’s your turn – have a play and put some shortcodes inside shortcodes!