How to Add Shortcodes to Slider Revolution

This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.

One of the great things about WordPress is that it uses these little things called shortcodes. help users add all the cool stuff to their website. It’s handy, lightweight, easy to use, and extremely essential for any WordPress admin. Today we will talk about how to add shortcodes to Slider Revolution.

What are Shortcodes?

Shortcodes in WordPress small pieces of code that can be placed in the backend of your website to add a specific element, functionality or design feature. Page sections with galleries, videos, layout elements, icons or illustrations, pie charts, counters, etc. They can be used to add infographics such as Of course they can also be used for sliders. Premium WordPress themes are usually includes a wide variety of custom shortcodes that users can add to their page – or sliders – in just a few clicks.

Why Add Shortcodes to Slider Revolution?

Slider Revolution has almost endless creative possibilities. Still, sometimes it’s easier to copy a pre-styled shortcode to your slider than to create layers entirely from scratch. Think about it: when you want to create a complex element in Slider Revolution, you can do so by using multiple layers that overlap and combine to create that element. But this also means: Even if you want them all to have the same animation, you have to animate each layer separately.. On the other hand, if you use a previously stylized shortcode and add it as a layer on the slider, you won’t have to deal with all this hassle. It’s clear that this method is a huge time saver, so let’s check out how to add a shortcode to Slider Revolution.

How to Add Shortcodes to Your Slider

Before we start, frankly, select the shortcode you want to use and test, just to make sure it fits your needs. Access the shortcode in your backend and add it to a random test page. You can then copy and paste it into your slider using the Text editor mode – but more on that later.

Our Goodwish theme can be a good example of using shortcodes in sliders. Specifically, the Ecology House as seen below:

Such things can certainly be created using on-page shortcodes without using the plugin, but we wanted to spice it up and found Slider Revolution to be perfect for that.

We can see that on the left side of the slider there is some text and a CTA button (adding a button to Slider Revolution is another simple operation). On the other side, we have an infographic element with an animated counter. This was added using our custom Pie Chart shortcode, combined with some text on it and a rectangular shape for the background. An element like this can be created layer by layer in Slider Revolution using one layer for the thin circle, another for the thick one, one for the percent, and one for the header text below.

So not only do we have to add four different layers, but we also have to animate them one by one. However, the Pie Chart shortcode has its own animations, so when you add the shortcode to the slider working framework, you have all the functionality with it. It comes with basic/general options like Central text type you can choose between percentage and title; below that we have a field for the percentage value and the third is for setting the title below the circle. If you don’t want to keep the predefined style, you can choose your own title tag. There is also the option to add text, but in our example the slider did not use any.

The Pie Charts shortcode has a separate “Design Options” tab. this is where you can choose preferred colors for element. You can also change the dimensions and margin below the table if you don’t like the default settings.

After that you have defined all the elements of your shortcode and also i checked on live page, you can copy the code by switching to text editing mode. In our case, the code [edgtf_pie_chart type_of_central_text=”percent” percent=”90″ title=”Raised So Far” active_color=”#ffffff” inactive_color=”#f6cd7d” title_color=”#ffffff” percent_color=”#ffffff”].

Now it’s time to add the shortcode to the slider. Simply paste into a text layer in Slider Revolution and set the layer options as you would any other layer.

And that’s pretty much all. The shortcode on the text layer becomes the infographic element in our example in the Goodwish theme, and any other shortcodes you decide to use will do the same.

As a result

Adding shortcodes to Slider Revolution sliders can be extremely helpful in situations like the ones we’re discussing today. As we can see, it saves you the time you would otherwise spend creating separate layers, plus you have full control over styling and customization. All you have to do is find a shortcode that works for you and tweak it a bit to suit your needs.