Z – Randomizing Shortcodes | Jérémie Mercier

In some themes you can choose random orders for a few things. In ours, we give you shortcodes to randomize anything! From simple random number generators, to the ability to randomly choose a bit of text, to randomizing the order of an entire gallery! Remember to refresh the page and watch the changes.

Random Number

This simplest randomizing shortcode is the ability to simply output random numbers. Choose a minimum, choose a maximum and get your result. For example, here will show a random number from 1 to 20: 20

12

Random Values

After random numbers, the next important thing is random values. You create a list of values and choose to output one (or any number or them) in a random order. For example the following is a random selection from a list of shapes: square

circle

Random List

Just outputting random values everywhere isn’t enough. Sometimes you need to randomize the orders of things, and then use the values in random order in multiple places. For that we have the random lists. In this examples we’ll put a list of colors in random order:

Color One: red
Color Two: yellow
Color Three: orange
Color Four: purple
Color Five: blue
Color Five: green

Color One: yellow
Color Two: green
Color Three: purple
Color Four: blue
Color Five: orange
Color Five: red

Random Content

Last but not least is the most powerful of them all, random sets of content (which includes containing other shortcode content). This allows you to not only choose a random bit of content to show, but also to randomize the order of sets of content as well. For example, here’s an example of an accordion with it’s values in random order:

Orange

Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor.

Green

Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor.

Purple

Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor.

Blue

Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor.

[raw]
[/raw]
[raw]
Orange
[/raw] Lorem ipsum... [raw]
[/raw][raw]
Purple
[/raw] Lorem ipsum... [raw]
[/raw][raw]
Blue
[/raw] Lorem ipsum... [raw]
[/raw][raw]
Green
[/raw] Lorem ipsum... [raw]
[/raw]
[raw][/raw]