Add Slider to Web Page

This article is now outdated!

Please click here to view how this can be done with version 5.0+.
And if you prefer a video tutorial, check out our friends Webtegrity over on YouTube.

After creating a slider, there are multiple options available to add it to your web pages

 

  1. Shortcode
  2. Visual Composer
  3. Widget
  4. PHP
  5. Theme Specific

 

1. The Shortcode Method

From the WordPress menu, select “Pages” and then “Edit” for the page you want to add the slider to.  Then follow the steps shown shown in the screenshot below:

shortcode

 

 

2. With Visual Composer

If you happen to have Visual Composer installed, Revolution Slider can be added from one of Visual Composer’s content options.

vc
select-sr
choose-rs
vc-rev-added

 

 

3. The Widget Method

Your theme will have to support widgets in order for this to work.  Often widgets are reserved for “Sidebar” content, but your theme may also use widgets for predefined areas of a page, such as “Homepage Slider”.  To use the widget method, from the WordPress main menu, hover your mouse over the “Appearance” menu item and then select “Widgets”.  In your list of “Available Widgets”, you’ll see one of the options is “Revolution Slider” as shown in the screenshot below:

widgets

 

Click and drag the Revolution Slider into one of your predefined available widget content areas:

widget_drag

 

Then open the “Revolution Slider” tab and choose your options:

widget_options

 

As shown in the screenshot above, if you just want the slider to be included in your homepage, check the “Home Page Only” box.  Otherwise, you’ll need to list the ID(s) of the page(s) where you want the slider to appear.  To get a page’s ID, from the WordPress main menu, under “Appearance”, choose “Pages”, and then “Edit” for the page in question.  After you’ve done this, the ID will be included in the url of the browser’s address bar:

page_id

 

In the above example, the page’s “ID” is “546”.

 

 

4. The PHP Method

The Shortcode and Widget methods will work fine for most themes, but depending on how your theme was built, you may need to add the slider directly to one of your theme’s php files.  This method is for advanced users only, and you’ll need to be comfortable editing a php file before you begin.

 

To start, first visit this page to learn how your slider’s php code can be written.  In the following example example, we’ll use the “homepage” example code with a slider’s “alias” name of “slider1”.  You can get your slider’s “alias” name by visiting the main settings of your slider:

slider_alias

 

Next, decide where you want the slider to appear within your theme.  Usually this will be somewhere inside your theme’s “page.php” file.  To edit this file, from the main WordPress menu, hover your mouse over the “Appearance” menu item and select “Editor”.  Then select “page.php” from the files listed on the right side of the page.

Inside you’re theme’s “page.php” file, you should see something called “The Loop”:

the_loop

 

“The Loop” is where the page’s main content will get added to the page.  So for this example, we’ll add the slider directly above the page’s main content, hence: before “The Loop”.

put_rev_slider

 

Because we passed in “homepage” as the second argument, even though the slider is now embedded into the “page.php” file directly, it will only appear on the homepage you’ve designated for your site. Here are some more code examples:

http://www.themepunch.com/home/plugins/wordpress-plugins/revolution-slider-wordpress/how-to-add-a-slider-without-using-a-shortcode/

 

 

5. The “Theme Specific” Method

If the slider was included with a theme you purchased, the theme’s author may have added a special “Slider Option” as one of the theme’s page options.  For example, your theme may have a menu item named “Theme Options”, and inside this admin there may be an option named “Homepage Slider”.  Refer to your theme’s documentation to see if your theme has included this type of option and how it can be used.