wordpress slider insert add include slider to home page

How to insert, add or incorporate Slider in WordPress

Davor 01/09/2020

This is a beginner level guide on how to insert, add or incorporate Slider on the Home page of the WordPress powered websites.

The article covers the basic installation of Slider plugin, adding the slider via shortcode or inside PHP templates, and customization. So, let’s get started. 🙂

Choosing the appropriate Slider plugin

There are many Slider plugin’s for WordPress these days, both free and premium. We will cover some of the Free and Premium Slider plugin’s available for you to choose from.

The other important thing about the choice of the Slider plugin is the desired features and functionality you need. If you need just a simple slider, then you can also consider custom coding or some free.

If you, on the other hand, wanna have fully-featured animation’s video background, particles or any other ‘fancy effects’, there are a couple of powerful HTML5 premium sliders.

MetaSlider [FREE PLUGIN]

This free plugin offers many useful features and it’s easy to use. You can visit the plugin page here to get more details about it, here: https://wordpress.org/plugins/ml-slider/


Install MetaSlider

You can easily install this plugin by navigating to your WordPress Admin area -> Plugins -> Add new. Now, just access the search form on the right side and type “MetaSlider” inside and wait for the results. See this image:

install metaslider

Then click install and activate the plugin.

Create Slider

Now, access the MetaSlider from the left side menu. Then click on Create new slider and start by adding some images.
The slider comes with a couple of different jQuery Slider scripts to choose from, that’s why we might say it’s pretty powerful for a free plugin.
You should be able to learn how to create a simple slider within the minutes as the interface is pretty simple.

 

Insert or incorporate MetaSlider using shortcode

Once you finish creating your Slider you should access the How to use widget section on the right side. Copy the shortcode from the field and save it for later use.

metaslider shortcode

Now, access your page editor and paste this shortcode inside the appropriate position on the page.

Note that inserting the shortcode will work in all page builders including WPBakery, Divi, Visual Composer, Beaver, etc.

If you are using the Gutenberg editor, you will be able to insert the Gutenberg Slider block at the desired position. The MetaSlider plugin is a simple but very efficient and capable plugin, that can also be used inside posts for representing the gallery in slider like the layout.

Inserting Slider shortcode via PHP

If you want to hardcode the Slider inside the PHP templates, you will need to use different shortcodes. In this case will gonna need to execute the slider directly inside the PHP template. There are different ways to achieve that, but we will use the simplest of all.

Access your WordPress website files using FTP or via cPanel file manager and navigate to wp-content/themes/your_theme_name. Find the file you want to use the shortcode on, for example, header.php or some specific page template. Open it up for editing and add the shortcode in this format below:

<?php echo do_shortcode('[replace_with_metaslider_shortcode]'); ?>

Now, just replace the example text with the shortcode from the MetaSlider plugin and save changes to your template files.

This procedure can be used to add any other slider or plugin shortcode via Theme’s PHP templates.

Smart Slider 3 [FREE / PRO PLUGIN]

Smart Slider 3 is also a fully capable slider plugin for WP and it comes with the rich Visual builder that can stand side by side with the paid or premium slider plugins builders.

smart slider 3

The free version is very powerful, it allows importing of some of the template files. The visual builder with live editing, support for adding the Slider shortcode using almost any known page builder for WordPress, including Classic and Gutenberg page builders as well.

The free version is more than enough for some average user’s but if you need to build something more complex, check the PRO version.

Smart Slider 3 PRO features:

  • All sample sliders
  • Layer animation builder
  • Live Timeline
  • 9 extra layer types
  • 4 extra slider types
  • All generators for dynamic slides
  • Extra background animations (more than 54)
  • Built-in lightbox
  • Built-in image editor
  • Advanced controls and much more control presets
  • A ton of expert settings
  • Premium support
  • …and more

Creating, customizing and inserting the plugin shortcode is pretty much the same as for the MetaSlider described above.

Slider Revolution [PREMIUM / PRO PLUGIN]

Slider Revolution plugin is made by ThemePunch and its one of the most known WordPress Slider plugin around. It has been sold more than 330k times over at CodeCanyon (in time of writing this article!)  and it’s bundled with many premium WordPress themes.

slider revolution 6

Besides the popularity, the plugin comes with all the needed options to build almost any kind of slider. User’s with the Premium plugin license can import many awesome looking pre-designed templates, entire website templates and have access to powerful add-ons.

Slider Revolution Editor

The latest Slider Revolution 6 version brought many changes in the overall UX/UI design which was known to the most users of this plugin thru out the years.

slider revolution 6 ux

There are many new features present in the new Visual Editor, like undo/redo options, multiple layer selection, styling and more.

Slider Revolution Add-ons

One of the key things is the access to the add-ons that are bringing the latest high-end features when it comes to the web design and HTML5 canvas.

slider revolution addons

There is particle add-on, duotone, filters, before&after, coming soon, distortion, filmstrip, panorama and you name it. With all these add-ons listed and accessible from the Slider dashboard, this plugin will give you the tools needed to create the most powerful HTML5 animation. You can check more on the available add-on’s here: https://revolution.themepunch.com/addons/

Creating and inserting the Slider’s made with this plugin is pretty much the same as for the rest of the Slider plugins. The Slider Revolution also supports almost any page builder out theme including WPBakery, Visual Composer, Divi, Gutenberg, Elementor, etc.

If you want to have fully animated slider’s to tell your story this plugin is definitely worth paying for, here is the link to Slider Revolution at CodeCanyon.

Layer Slider [PREMIUM / PRO PLUGIN]

Layer Slider is one of the most stable and long-time running Slider plugin for WordPress. It’s created by KreativaMedia, they’ve recently left the Envato Marketplace and the plugin can be purchased on their website directly.

layer slider wordpress

The Layer Slider WordPress plugin is considered one of the best, fastest and most powerful slider plugins. It’s somewhat the mixture of all the above-mentioned plugins but served in a way of a friendly and intuitive approach to slider creation, customization, and overall performance.

Layer Slider Visual Editor

The plugin’s visual editor works like charm. You should be able to create any kind of rich media content using it.

admin popout editor

Layer Slider Templates & Add-on’s

This plugin also comes with more than enough templates for quick importing. The plugin comes with the special effects plugin and customizable add-ons.

layer slider addons
There is also a ton of features under the hood of a Layer Slider plugin. Some of the key things to consider:

  • more than 200 pre-defined slide transitions,
  • parallax, even in 3D & Ken Burns effect,
  • hover, loop & multi-step animations
  • play by scroll & timelines,
  • filters & layer masks,
  • random & cycle properties,
  • animate colors & common CSS properties
  • static layers & pop-out-of-slider effects
  • drag & drop visual editor with undo/redo
  • group selection, rulers with guides, copy & paste layers options
  • popout editor to edit everything in one place without scrolling
  • image editor powered by Adobe Creative Cloud,
  • timeline with color-coded markers
  • keyboard shortcuts
  • & a lot more…

Layer Slider templates

You can see the available Slider templates and demos here: https://layerslider.kreaturamedia.com/sliders/

Inserting Layer Slider is almost the same as adding any other slider plugin mentioned above. It supports all the latest versions of most popular Page builder plugins and you can also add it via shortcode.

Conclusion

When it comes to the Slider effects and plugins for WordPress, there’s never an end. We have covered only the most popular free and paid plugins in this small guide. The mentioned plugins should be powerful enough to let you express your viable content more attractively.

I’m sure you’ll able to install and incorporate any kind of Slider for WordPress now.

Feel free to give feedback on this article using the comments form below.

Davor Veselinović

I'm Davor, founder of Worda Themes. Working as a Full Stack Developer with more than a decade of experience with WordPress. I build themes and plugins and enjoy writing useful blog posts and share my ideas with others.

Leave a Reply

Your email address will not be published. Required fields are marked *