METHOD 1: USING SHORTCODES

Shortcodes are special text snippets, which you can paste into almost all places where you can enter text like the WordPress page and post editor. They will then automatically be replaced with the appropriate content on your front-end pages. Shortcodes are one of the most commonly used methods of inserting contents to your site. A lot of 3rd party plugins (e.g. page builders in themes) can also accept LayerSlider shortcodes to add sliders to your pages.

Each slider has a unique shortcode. You can hover over a slider in your list and click on the  icon to reveal slider actions, then select the  Embed Slider option to see its shortcode. You can also find the shortcode of a slider at the bottom of the Slider Builder page next to the save button.

For advanced customization, you can add a filters attribute to your shortcode to control on which pages the slider should appear. Read the Using filters section to learn more. Example shortcode: [layerslider id="1" filters="homepage"]

There is also a way to override the "Starting slide" option with the shortcode. Using the firstslide shortcode parameter you can force embeded sliders to start with the specified slide, even if the slider has different settings. This is particularly useful when you want to embed the same slider in multiple times showing different slides. In the following example we're forcing the slider to start with the second slide: [layerslider id="1" firstslide="2"]

You can override most slider settings. Please read the Overriding settings section for more information.

Classic Editor helper utility

We've also added a small utility to the WordPress Classic Editor toolbar. It will display a modal window with your most recent sliders to choose from. After selecting the sliders and changing the embed options as desired, press the "Insert into post" button to put the corresponding shortcodes into the editor. See the illustrations below.

METHOD 2: GUTENBERG

Recent WordPress releases are now shipped with their new page editor called Gutenberg. It's aimed to be an alternative for popular page builder solutions and offers WYSIWYG visual editing.

LayerSlider now includes a dedicated Gutenberg block, which you can use to easily insert sliders into posts and pages. If you aren't familiar with Gutenberg yet, here's a quick tutorial:

1. Click the + sign, then select the LayerSlider block from the Widgets category. You can also use the search feature to quickly find any block.
2. The LayerSlider block is now automatically added to your post / page. You can select the block and move it around with the handle on the left side.
3. At this point the block is only a placeholder showing where the slider would be displayed. Click on the Slider Library button and select the slider you want to insert into your post / page.
4. That's it! You can now press the editor Publish / Update button to save your changes and the slider will be at the right place on your front-end pages.

Additional details:

• To change the slider, you just need to select the LayerSlider block, then click on the "tiles" toolbar button located above the block.
• You can customize your LayerSlider block with extra options available at the right sidebar. If the sidebar isn't visible, just press the cog icon at the top right corner of the editor page.
• You can also quickly edit the embedded slider by pressing the "pencil" toolbar icon.

Here's a quick video showing Gutenberg and the LayerSlider block in action:

How-to: Using the LayerSlider Gutenberg block

This video helps you get started using the new
Gutenberg editor with the LayerSlider block.

METHOD 3: WORDPRESS WIDGET

LayerSlider supports widgets, so you can add sliders to your front-end pages with just a drag n' drop action. To do that, navigate to the Appearance menu on your left sidebar and select "Widgets". Grab the LayerSlider WP widget and drop it into one of your widget areas.

Please note that some themes may not support a widget area that you're looking for. In this case, you can create a new widget area by editing your theme files. Here is the official documentation about widgetizing your theme. However, this requires web development knowledge and we don't recommend it for users without experience.

For more customization, you can enter custom filters in your widget settings to control on which pages the slider should appear. Read the Using filters section to learn more.

By entering a custom value into the "Override starting slide" option field, you can force embeded sliders to start with the specified slide, even if the slider has different settings. This is particularly useful when you want to embed the same slider in multiple times showing different slides.

METHOD 4: ELEMENTOR

Elementor is a free page builder that became very popular in recent years and is loved by millions for its simplicity. We highly recommend to give Elementor a try as it can easily be your best and smoothest experience. LayerSlider has a dedicated Elementor widget, which comes all the features you would expect and more. For example – in Elementor's fashion – embedded sliders are live and you can see a real-time preview of your site. You can also quick edit sliders without ever leaving Elementor. Changes made in sliders are reflected in real-time.

If you aren't familiar with Elementor yet, here's a quick tutorial:

• After installing Elementor, you just need to edit a page as you normally would. You'll notice the added "Edit with Elementor" button, which will launch the Elementor Editor.
• In the Editor, you can search for the LayerSlider Widget with the search box at the top of the sidebar. Just start typing "layerslider".
• Elementor automatically converts WordPress Widgets into Elementor Widgets, so you'll likely see multiple matches. Choose the one with the real LayerSlider logo (three overlapping layers). That's the dedicated and much more feature-rich widget you'd want to use.
• Grab the widget and just drop at any place you see fit in the right side preview area. LayerSlider will immediately prompt you to select a slider you want to embed.
• That's it! You've successfully embedded a slider to your page. Of course, there are customization options you can find on the left sidebar when selecting the LayerSlider widget.

Here's a quick video showing Elementor and the LayerSlider widget in action:

How-to: Using the LayerSlider Elementor widget

This video helps you get started using the
LayerSlider widget made for Elementor.

METHOD 5: VISUAL COMPOSER (WPBAKERY)

Visual Composer, also known as WPBakery Page Builder, is yet another popular page builder solution. Visual Composer comes with its own LayerSlider element out of the box. You can add the LayerSlider element to your site just like you normally would, then you can select the slider you want to embed. Due to the discrepancy between various versions of Visual Composer, we don't have a tutorial video or more specific guide at this time. However, if you are a Visual Composer user the process is the same you've already used to and it's pretty straightforward.

Visual Composer also accepts shortcodes discussed in method 1. You can add a text element and paste the appropriate shortcode into it to embed sliders. The below illustration shows the WPBakery Page Builder, which was the original plugin before they split apart with Visual Composer.

METHOD 6: OTHER PAGE BUILDERS

Most page builders in themes support embedding LayerSlider sliders out of the box. Whether you're using a custom solution or a 3rd party plugin, there is likely a way to use them with LayerSlider.

Either there is a dedicated module/block/widget for LayerSlider, or you can insert shortcodes in the same manner described in the first method.

If you experience any issue, please review the available options your page builder offers. Since each solution differs in design and behavior, there is no universal guide to them. You can also consider just using more conventional methods like shortcodes and widgets described in method 1 and 3 respectively.

METHOD 7: PHP FUNCTION

Because a slider can be an integral part of your site, you may want to insert it dynamically from the template files. There is a PHP function (with additional filtering options) to do just that. For example, you can call it from the header.php file of your theme and it will insert your slider into the corresponding area. By providing filters you can show it on certain pages only depending on your settings. Here is the function definition:

The following examples are all valid:

It is important to check the corresponding slider ID on the LayerSlider WP slider list page. When you remove some sliders, their IDs won't be re-indexed and the sequence you would expect may broke up. This is important for data consistency.

USING FILTERS TO DISPLAY SLIDERS ON SPECIFIC PAGES

Filters can be used to target specific pages where you want a slider to be displayed. This can be extremely helpful if you're inserting sliders in a way that would show them on multiple pages. By using filters you can set custom conditions that would otherwise require programming skills. Our solution is easy to use for anyone and the currently supported filters should cover most use cases.

• Front Page: The special name homepage can be used to display the slider on your site's main page.
• Page ID: Use a page ID to display sliders on a specific page. You can find the page ID in the URL (post=<number>) when you're editing a page/post on the WP admin area.
• Page Slug: A page slug can also achieve the same purpose as page IDs. The page slug is the editable part of the permalink, which you can see when editing a page/post on the admin interface.
• Category: You can also filter for category pages. Providing a category name will display the slider on all pages belonging to that category.

Important: You can set multiple filters. Just provide a comma separated list if you want to display sliders on multiple pages. Mixing the different kinds of filters together or providing multiple IDs/slugs/category names is not a problem.

Example: The filter list homepage,about-us,1234 can be split into three different filters:

• homepage – your site's main/front page
• about-us – a page slug (permalink)
• 1234 – a page ID if you don't use pretty URLs

OVERRIDING SLIDER SETTINGS

Version 6.8.0 and above allows you to override slider settings via the shortcode and the layerslider() PHP function. This can be useful if you want to make small changes in certain situations without duplicating the slider. For example, you might want to change the slider skin on some pages to fit better to a different page style. This can be achieved like so:

• Shortcode:
  [layerslider id="1" skin="borderlessdark"]
• PHP function:

  1	<?php layerslider( 1, '', array( 'skin' => 'borderlessdark' ) ); ?>

Another example could be the starting slide. You might want to insert the same slider on multiple pages with a different opening:

• Shortcode:
  [layerslider id="1" firstslide="3"]
• PHP function:

  1	<?php layerslider( 1, '', array( 'firstslide' => 3 ) ); ?>