1. Home
  2. Inserting Shortcodes into Sliders

Inserting Shortcodes into Sliders

Updated on October 11, 2017

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.
Did this answer your question?