Inserting Shortcodes into Sliders

LayerSlider and Revolution Slider are two premium plugins that come bundled n with our theme. These plugins are extremely powerful and allow you to create different types of sliders. One of the most frequently asked questions is about inserting shortcodes into sliders.

In this article, we’ll explain how to add a button shortcode into the LayerSlider and Revolution slider.


Adding the Button Shortcode

At first, we’ll need to add the shortcode into a page to be able to get the shortcode or generated HTML codes. Revolution Slider accepts both Jupiter shortcodes and HTML codes but LayerSlider only accepts HTML codes.

To add the button shortcode:

1Create an empty page.
2Add the button shortcode in Visual Composer and configure the button settings as you need.

Inserting shortcodes into sliders - button shortcode

3In the Button Settings pop-up, add a unique class in the Extra Class Name setting field. In this example, we’ll add the jupiter-slider-button.

Inserting shortcodes into sliders - button settings

4Click on the Save Changes button and publish the page.

Inserting the Button in LayerSlider

LayerSlider does not accept the Jupiter shortcodes so we’ll need to get the generated HTML from the front-end of the website.

Getting the Generated HTML Code

To get the HTML code of the button:

1Open the page you created in the previous steps, right-click on the button, and then select Inspect Element. A new window will open. We are using the Chrome browser to inspect the element but it’s possible to use other browsers.

Inserting shortcodes into sliders - button inspect

2In the new window, find the div tag which has the jupiter-slider-button class.

Inserting shortcodes into sliders - button HTML code

3Right-click on the div tag and select Copy Element. It will copy the HTML codes for the button shortcode to your clipboard. We’ll need this in the next sections.

<div id="mk-button-2" class="mk-button-container _ relative inline left jupiter-slider-button"><a class="mk-button js-smooth-scroll mk-button--dimension-three mk-button--size-small mk-button--corner-pointed text-color-light _ relative text-center font-weight-700 no-backface letter-spacing-1 inline" href="#" target="_self"><span class="mk-button--text">Button</span></a></div>

Adding the Codes into the Slider

Now that we have the HTML codes of the button, we can add it as an element in the slider. We assume that you are already familiar with creating a basic slider so we’ll explain how to add the codes.

To add the codes:

1Click on the + Add New the in Layers section.

Inserting shortcodes into sliders - add new layer button

2Select Dynamic Content from Posts in the Content section and insert the codes you copied in previous section. Note that you may not see the button with the correct styling, but when you check the slider on the front-end of your website, it will be displayed correctly.

Inserting shortcodes into sliders - HTML code in slider

3Position the button in the slider and click on the Save Changes button.

Inserting the Button into the Revolution Slider

Revolution Slider accepts the Jupiter shortcodes so you can add the shortcodes directly into the slides.

Getting the Shortcode Code

To get the button shortcode:

1In the page you have created in the previous section, click on the Classic Mode button.

Inserting shortcodes into sliders - classic mode

2Then select the Text tab.

Inserting shortcodes into sliders - shortcode text

3Take a note of the button shortcode, you will need it in the next sections.

[mk_button el_class="jupiter-slider-button"]Button[/mk_button]

Adding the Codes into the Slider

Now that you have the button shortcode, you can insert it as an element into the slider. We assume that you are already familiar with creating a basic slider so we’ll only explain how to add the codes.

To add the shortcode:

1Add a Text/HTML layer from the slide builder.

Inserting shortcodes into sliders - add layer button

2Paste the shortcode you noted from step 3 of the Getting the Shortcode section. Note that you won’t be able to see the actual button in the slide builder but when you check the slider from the front-end, it will be displayed correctly.

Inserting shortcodes into sliders - revslider shortcode text

3Position the button in the slider and click on Save Slide.

Premium Sliders

The Jupiter theme is compatible with several premium sliders. These sliders are extremely powerful and allow you to create any type of slideshow.

The sliders are bundled in with Jupiter and so there is no need to buy them separately. It is worth it to mention that if you want to register the plugins to access the extra goodies (provided by the plugins), you’ll need to purchase a separate license for each of the plugins.

LayerSlider

Premium sliders - LayerSlider

LayerSlider is a premium multi-purpose animation platform. Sliders, image galleries, slideshows with mind-blowing effects, landing pages, animated page blocks, or even a full website can be created using LayerSlider. It comes with following features:

  • More than 200 pre-defined slide transitions,
  • Parallax, even in 3D & the Ken Burns effect,
  • Hover, loop & multi-step animations
  • PlayByScroll & timelines,
  • Filters & layer masks,
  • Random & cycle properties,
  • Animated colors & common CSS properties
  • Static layers & pop-out-of-slider effects

To learn more about the plugin, visit the LayerSlider official website.

Slider Revolution

Premium sliders - slider revolution

Slider Revolution is an innovative, responsive WordPress Slider Plugin that displays your content in a beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, the visual, drag & drop editor will let you tell your own stories in no time! It comes with following features:

  • Free Object Library
  • Free Add-Ons
  • 3D Parallax Effects
  • Front Page Designer
  • Drag & Drop Visual Slider Building
  • Fully Responsive Solution
  • True Multi-Media Content

To learn more about the plugin, visit the Revolution Slider official website.

Master Slider

Premium sliders - master slider

Everything you have ever wanted in an animated content and image slider, all packaged up into one awesome plugin! Build touch friendly, cross-browser and animated content sliders with Master Slider, available now for WordPress and jQuery. Learn how this feature rich plugin is just waiting to amp up your website.

To learn more about the plugin, visit the Master Slider official website.