latest version

Tasks & Examples & Hints


Test your knowledge of shortcodes by creating the following shortcodes in your project. Unyson way.

1. Simple Button

Create a simple button shortcode which allows you to:
  • Enter a title,
  • Enter a link,
  • Select button size ( small or large ),
  • Select button style ( white or dark ),
  • Enter additional css classes.

The shortcode should look like this in the backend Visual Composer editor:


And should render an HTML like below, depending on options chosen:

<!-- Example one -->

<a href="" class="btn btn-large bth-white example_custom_class">title_example</a>

<!-- Example two. -->

<a href="#" class="btn btn-small btn-dark example_custom_class_2">title_example_2</a>

<!-- Example three. No link entered in options. No custom class entered. -->

<a class="btn btn-small btn-dark">title_example_2</a>
Helpful reading:


1. Background Color & Image

Create a simple customizer section which will allow users to:
  • Select between background color and background image,
  • Pick a background color (visible only when background color is selected),
  • Upload a background image (visible only when background image is selected),
  • Section should appear above all others Customizer options
  • Implement basic HTML for preview
Helpful reading: