General

Install MetaSlider

If you’re looking for instructions on how to install MetaSlider Pro, see here instead.

To install MetaSlider, go to Plugins > Add New. Search for “MetaSlider” and click the “Install Now” button.

After installation you will see a new item in your WordPress admin menu called “MetaSlider”.

Creating your first slideshow

Click the “+ New” button to create a new slideshow.

A new empty slideshow will be created.

All of your slideshows will be listed as tabs across the top of the page. The slideshow settings are listed on the right hand side of the page, and the slides for each slideshow will be displayed in the main area of the page.

Adding Slides

To add a slide to the slideshow, click the “+ Add Slide” button.

The default Media Library interface will appear where you can upload new slide images or select existing images from your media library. Hold down CTRL to select multiple images.

After clicking ‘Add to slideshow’ the slides will be added to the slideshow. You can drag and drop the slides to reorder them.

Configuring Slides

There are 3 tabs which can be used to configure each slide:

• General – set the slide caption (HTML allowed) and URL
• SEO – set ALT and Title text for the slide image
• Crop – adjust the crop position of the slide

Adjusting the slideshow settings

The slideshow settings are listed on the right hand side of the page. You can choose the slideshow type from FlexSlider, R. Slides, Nivo Slider or Coin Slider. Different options will be enabled/disabled based on your selected slideshow type.

Previewing the slideshow

To preview the slideshow click ‘Save’ and then click the ‘Preview’ button.

Embedding your slideshow in a Post or Page

Once you are happy with your slideshow, scroll down to the ‘How to Use’ section (bottom right) and copy the provided shortcode.

The shortcode can be pasted directly into any Post or Page. If you want to include the slideshow directly in your theme template files, use the Template Include code instead.

For more in depth documentation on the different slide types, see:

• Adding Image Slides
• Adding HTML Slides (Pro only)
• Adding Animated Layer Slides (Pro only)
• Adding YouTube Slides (Pro only)
• Adding Vimeo Slides (Pro only)
• Adding Post Feed Slides (Pro only)

To change the style of MetaSlider you will need to override the default MetaSlider styles with your own styles. If you’re not comfortable with editing the CSS yourself, you’ll be glad to know that MetaSlider Pro includes a live theme editor that lets you completely customise the style of your slideshow – no coding experience needed!

Here is a quick guide to updating the MetaSlider styling, some experience with HTML and CSS is assumed.

• Use FireBug or Chrome Developer Tools to find the CSS you would like to change
• Copy the CSS to your themes style.css file. It’s important not to edit the CSS files that come with MetaSlider directly, or you will lose your changes when you upgrade. You could also use a plugin such as Simple Custom CSS to add the styles to your site.
• Prepend the copied CSS selectors with “.metaslider “. This makes your selector more specific than the default selector, therefore overriding the default MetaSlider styles.
• Update the CSS as you wish – change padding, font sizes etc.

We’ve included some examples below.

Changing the caption font size

Add the following CSS to your themes style.css file

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    font-size: 1.3em; /* adjust as necessary */
}

Changing the caption background colour

Add the following CSS to your themes style.css file

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    background: red; /* adjust as necessary */
}

Move the caption to the right hand side

Add the following CSS to your themes style.css file

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    right: 0px;
    bottom: 0px;
    width: 20%;
    height: 100%;
    left: auto;
}

MetaSlider Pro includes a fully featured Theme Editor which can be used to change the visual aspects of your slideshow including the caption styling, arrow styling and bullet/navigation styling.

To access the Theme Editor, go to MetaSlider Pro > Theme Editor.

There are 3 main sections: Caption, Arrows & Navigation. The styling for each section can be disabled, so if you want to keep the default arrows but customise the caption, you can do so.

As you change the settings in the Theme Editor the preview slideshow will update automatically. Once you are happy with your new theme, save it and go back to the slideshow.

Select your custom theme from the ‘Theme’ drop down and click ‘Save’ to apply it to your slideshow.

MetaSlider is fully localised. You can easily translate MetaSlider into your own language in a few simple sets.

Step 1: Install PoEdit

Download and install PoEdit from http://www.poedit.net/

Step 2: Create a copy of the MetaSlider Language Catalogue

Go to File > New Catalogue From POT File. Select /content/plugins/ml-slider/languages/metaslider.po

Step 3: Enter new Catalogue Details

Use your own name and email address and specify the language you’re translating MetaSlider into.

Step 4: Save your Catalogue

The name should be “metaslider-[langCode]“. Replace [langCode] with the language code you’re translating to. A full list of language codes can be found here.

Step 5: Enter your translations

Enter your translations into the Translation box at the bottom of the editor.

Step 6: Upload to your website

Save and upload your new catalogue file to your web server. That’s it!

Step 7: Share your files (optional!)

If you have translated MetaSlider, we would appreciate it if you could send us the translation files. We will include it in the plugin so that others can benefit from your work.

MetaSlider has been tested with approximately 15 of the most popular free WordPress themes and the most common plugins (WP SEO, Analytics 360 etc). We have tens of thousands of users who run MetaSlider without any problems. If you’re one of the unlucky ones, 9 times out of 10 it will be down to a conflict with either your chosen theme or plugins.

Try switching theme. If that does not solve the issue, try disabling plugins one by one until it starts working.

How we debug support issues

Using Google Chrome, go to Tools > Developer > JavaScript Console. Look for errors listed in red.

Error

Error: Uncaught TypeError: undefined is not a function

This is the most common problem. If you see this error:

• Check your theme has a call to wp_footer. Go to Appearance > Editor. Select footer.php on the right. Just before the closing </body> tag, ensure there is a call to wp_footer().
• Check you’re only including jQuery once on the page. Using Google Chrome, right click on the page and click ‘View Page Source’. Search for jQuery and look for any duplicate includes. It is quite common to see an extra version of jQuery being loaded from the google CDN. Remove any duplicates from the page by disabling plugins or searching your theme files – you only want to include jQuery once.
• Check you’re using a recent version of jQuery (1.10.2+), if not – install the jQuery Updater Plugin.

Error

Error: Uncaught SyntaxError: Unexpected token <

If you see this error then the page content has been run through a function called wpautop (WordPress Auto Paragraphs).

Common causes are plugins (e.g. Genesis Easy Columns) or the theme (e.g. Avada). To resolve this issue:

• Wrap the meta slider shortcode in “raw” tags, e.g.

  [raw][/raw]

• Try installing the Disable wpautop plugin.
• Try switching themes and check to see if MetaSlider starts working. Apply the same process to plugins by enabling/disabling them one by one. After you’ve narrowed it down to a single plugin or theme, you could either search the source code for ‘wpautop’ and comment out the line, or get in touch with us and we’ll take a look.

Still no luck?

Check out the WordPress.org support forums for MetaSlider, you might find the answer you’re looking for. If not, post a new support thread and we’ll help you out (please check out the Sticky topic first).

Of course, If you’re a MetaSlider Pro customer, you can contact us directly for premium support – raise a new ticket and we’ll get back to you within 24 hours.