1. About plugin

Everslider WordPress Plugin will help you create nice-looking, responsive and mobile friendly carousel slider from any post type to showcase your popular works in portfolio or display recent blog posts. Ability to switch among different carousel item templates will make it possible to seamlessly integrate Everslider carousel in almost any site design. Among other features this plugin utilizes hardware-accelerated CSS3 transitions, is retina ready, has mousewheel and keyboard support, recognizes touchswipe and works on variety of mobile devices and tablets.

2. Installation

To install Everslider you need to perform few simple steps. First login to Admin area of your WordPress installation. Next click Plugins in menu and then click Add New. When page loads, select Upload and choose everslider.zip file that you will find in ZIP package downloaded from Codecanyon. Click Install Now. When Wordpress will finish installing plugin, click Activate Plugin to activate it. As soon as plugin has been activated, Everslider menu would appear at the bottom of WordPress menu. If you prefer manual installation using FTP client please check this guide

3. Upgrading

If you are going to upgrade Everslider from any older version and preserve all your settings you should do this using FTP method. First step is to unzip everslider.zip file. Then using any FTP client upload everslider/ folder to wp-content/plugins/ directory in your WordPress installation what will override existing files. Keep in mind that reinstalling plugin from WP Admin will delete all your settings from database!

4. Creating carousel

In WordPress Admin click Everslider menu. You will be taken to the All Sliders page. Enter name for your new slider in text field below and click Add New. When page reloads your slider will appear in list. Now you can duplicate, remove, switch template, edit and finally preview your carousel slider.

On this screen you can also enable special Everslider Slide post type that you can use to create carousel items. Click "Enable Slides post type" checkbox and wait until page reloads. Now you should see Slides item in left menu. Click it and you will be taken to the following page

Here you can create slides (carousel items) and organize them into groups, which then can be then linked to separate carousel sliders.

5. Selecting template

Template defines HTML markup and style for carousel item. To select template you should click Template button next to the carousel slider and in popup window choose one of four templates - Default, Basic, Photo and Custom. Template will be highlighted and you may close popup window. After that you can click Preview button to see new template in action. Default, Basic and Photo templates are build-in and don't allow modifications. Custom template however will allow you to define html and styles for carousel slide on your own (see Custom template).

6. Configuring carousel

Selecting template is the first step in configuring carousel slider. However there are other things that you can control, like selecting source for slides or changing various animations properties. These options are located on Edit page that you can open by clicking slider name in list or Edit button. When page loads you can see it is split into two columns - main column with the options to select source for carousel slides, group/tags filters and sorting; and a sidebar with plugin settings like carousel modes, navigation controls and animations. After you made the changes don't forget to click Save Changes at the bottom of the page.

7. Custom template

This section will guide you through the process of defying your own Custom template for carousel items.

First off you should switch template to Custom for carousel slider. To do this click Template button next to the slider and in popup window select Custom template. Then click Edit and you will be taken to slider options page. At the bottom you will find two text boxes called Custom Slide Template and Custom Template Style.

Let's look on each separately. The first text box - Custom Slide Template is where you should add HTML markup that will be used for carousel slides. To pull actual information from WordPress you should use placeholders in your markup. What they do is they return actual information from Post (or any custom post type) that was used to generate particular carousel slide. You can use following placeholders

%id%, %author%, %content%, %title%, %excerpt%, %comments_number%, %comments_link%, %date%, %date_modified%, %permalink%, %slug%, %image%, %image_src%, %image_title%, %image_alt%, %image_caption%, %image_description%, %groups%, %tags%, %{taxonomy}% and %meta_{key}%

Almost every placeholder is self-explanatory, except maybe few. %image% placeholder will return post's featured image as <img> element. %image_src% will return URL to post's featured image. %image_alt%, %image_caption%, %image_title% and so on return post's featured image meta info. Now, %groups% placeholder corresponds to all hierarchical taxonomies for post type (like Categories) and will be replaced with comma-separated list of terms for particular Post. %tags% placeholder is identical to %groups% except that it corresponds to all non-hierarchical taxonomies (like Tags). Also you can use %{taxonomy}% placeholder to target specific post taxonomy, like %post_tag% to get Tags. And finally %meta_{key}% placeholder will allow you to get post custom fields by their keys. For example if you have added custom field with name "link" you can get it with %meta_link% placeholder.

Now, when markup is ready you'll need to add some styles to make it look cool! All your custom styles you add in second text box - Custom Template Style. Please note that to target specific slider on page, every CSS declaration you should start with %slider% placeholder, e.g.

%slider% .my-element p { 
	font-size: 12px; 
	color: lightblue; 
}

%slider% will be replace with correct CSS selector to target carousel by its "id" attribute. Also you can use %plugin_url% placeholder to get URL of everslider plugin directory. This can be useful if you want to use some graphic/images for building custom carousel slides and these images will reside in wp-content/plugins/everslider directory.

8. Adding carousel to the site

When you have finished configuring carousel slider it's time to place it somewhere on your site. To do this you should copy slider shortcode, e.g. [everslider id="slider_one"], that you can find next to each slider in All Sliders list and place it where you want carousel to appear. This can be a page or blog post, or even widget that supports shortcodes.

9. For theme developers

If you are working with theme files you can insert Everslider carousel to the page using following template tag

<?php 
	$slider_id = "slider_one";
	echo get_everslider($slider_id); 
?> 

it accepts one parameter - slider ID and returns HTML for carousel.

To modify output of get_everslider() function you can use following filters

"everslider_class" - filter to modify/add classes to carousel container "everslider_slide" - filter HTML of every carousel item. It accepts 2 arguments: HTML and WP $post object for slide "everslider_markup" - filter HTML of carousel before it will be returned with get_everslider() template tag or [everslider] shortcode "everslider_settings" - filter jQuery plugin settings for Everslider instance. Filter accepts 2 arguments: settings array and slider ID

Thanks for reading!