Theme Integration

Use this guide to find out how to use Meta Slider as a full width homepage slideshow in the most popular WordPress themes. You will require your slideshow ID which you can find in the Usage section of Meta Slider.

Twenty Ten

Recommended slideshow size: 940 x 300. Go to Appearance > Editor. Select header.php from the right. Find (line 85):

Replace with:

Save. Go to Appearance > Editor. Select ‘style.css’ from the right (it’s probably already selected) Add to bottom:

Save.

Twenty Eleven

Recommended slideshow size: 1000 x 300. Go to Appearance > Editor. Select header.php from the right. Find (line 81):

Replace with:

Save.

Twenty Twelve

Recommended slideshow size: 960 x 300. Go to Appearance > Editor. Select header.php from the right. Find (line 41):

Replace with:

Save.

Twenty Thirteen

Recommended slideshow size: 1280 x 400. Go to Appearance > Editor. Select header.php from the right. Find (line 49):

Insert below:

Save.

Twenty Fourteen

Recommended slideshow settings:

  • Type: Flex Slider
  • Width: 1080
  • Height: 200
  • Stretch: On
  • Arrows: Off
  • Navigation: Hidden
  • Auto Play: On

Go to Appearance > Header. Uncheck ‘Show header text with your image’, and remove the header image if you have one selected. Go to Appearance > Editor. Select header.php from the right. Find:

Insert below:

Save. Go to Appearance > Editor. Select functions.php from the right. Scroll right to the bottom. On a new line, paste in the following:

Save.

Yoko

Recommended slideshow size: 1102 x 350. Go to Appearance > Editor. Select header.php from the right. Find (line 42):

Replace with:

Save.

Mantra

Recommended slideshow size: 1100 x 350. Go to Appearance > Editor. Select Theme Functions (functions.php) on the right. Find (very last line in file):

Add Above:

Save.

Blackbird

Recommended slideshow size: 950 x 390. Go to Appearance > Editor. Select front-page.php from the right. Find Lines 11-58:

Replace the previously selected lines with the template include from Meta Slider. Overall the top of the file should now look like this:

Save. Go to Appearance > Editor. Select style.css from the right. At the very bottom (on a new line), paste in the following:

Save.

Colorway

Recommended slideshow size: 897 x 355. Go to Appearance > Editor. Select front-page.php from the right. Find Lines 16-52:

Replace the previously selected lines with the template include from Meta Slider. Overall the top of the file should now look like this:

Save.

Catch Everest

Recommended slideshow size: 1140 x 300. Go to Appearance > Editor. Select functions.php from the right. At the very bottom of the file, on a new line, paste in the following:

Save.

Depot

Recommended slideshow size: 1140 x 300. Go to Appearance > Editor. Select template-homepage.php from the right. Find: (line 7)

Insert above:

Save.

WooThemes – Upstart

Recommended slideshow size: 1140 x 300. Go to Appearance > Editor. Select functions.php from the right. In the custom functions section, paste in the following code:

Save. Go to Upstart > Theme Options > General Settings > Display Options. In the Custom CSS box, paste in the following:

Save.

zeeStyle

Recommended slideshow size: 940 x 150. Go to Appearance > Editor. Select header.php from the right. Find:

Add below:

Save.

Hemingway

Recommended slideshow size: 1280 x 426. Also make sure ‘Stretch’ is enabled in the Advanced Slideshow settings.

Go to Appearance > Editor.

Select header.php from the right.

Find: lines 22 – 60

Replace with:

Save.

If you’d like us to cover a theme that is not included in this guide, please let us know in the comments. The theme must be freely available for download at WordPress.org.

  • Tariq

    how can you include this in a responsive site? to stretch all the way even in a 40″ screen.. please help

    • matchalabs

      Hi Tariq,

      You can force meta slider to output a 100% wide slideshow by adding the ‘percentwidth’ parameter to the shortcode, as so:

      echo do_shortcode(“[metaslider id=123 percentwidth=100]“);

      If the percentwidth parameter is not set then the slideshow width will be restricted to the width set in the slideshow settings.

      • Thomas

        Hi, how do you make a fullscreen slider? (100% height)

  • Гагарин

    I use “Twenty Eleven” WordPress theme. How to do it on all pages, not only on the main?

    • matchalabs

      This is probably not the nicest way, but definitely the easiest way!

      Change:

      if (is_home() || is_front_page())

      To

      if (true)

      • Гагарин

        Happened! And also tell me, how to do so when the page loads, a place for the slider has been “booked”, otherwise there is the effect of hopping down site layout when page loading is completed?

  • mpresss

    Where to integrate in Twenty Fourteen?

    • matchalabs

      Hi mpresss,

      I’ve just updated the post with Twenty Fourteen instructions.

  • Magnusccd

    There is no update for Twenty Fourteen in the post……

    Can you please repost.

    Thanks

    • matchalabs

      Hi Magnus,

      It seemed we had a bit of a caching issue, it should be displaying now.

      Regards,
      Tom

  • Guest

    I’m using the twenty eleven theme and have made the suggested code alterations to the header.php but it hasn’t worked. Any ideas?

  • Umanga Sarathchandra

    can you please tell me how to add different sliders on to different page headers?
    i changed the code to ‘if(true)’ but the same slider gets displayed in all the pages. i have 2 columns in all my pages so if i add the slider this way “edit page -> add slider” the slider gets displayed in the page area. not in the header area.

  • http://www.artenfibra.co Diego Q

    Hi, Im using Blackbird theme, and I tried using your code, but there is still the slider in all the pages…. can you help me please…. imnot sure what im doing wrong…… Thanks

    • http://www.artenfibra.co Diego Q

      Hi, Did you have a chance to look into the blackbird theme issue?, sorry I mentioned it again, but I love the slider but when anybody browse the website and the slider is in all pages, looks like the website doesnt move…. (since the slider takes all the screen). so people dont bother to scroll down and get my info.
      Can you help me please…… thanks

      • matchalabs

        Apologies for the delay in getting back to you.

        Try changing the shortcode to:

        [metaslider id=XXX restrict_to=home]

        This will only work with Meta Slider 2.8 or above.

        • http://www.artenfibra.co Diego Q

          Thanks for your response!!. anyway, let me ask you, after doing everything you said above, where should I put this shortcode?. Im new at this…. thanks.

          • matchalabs

            Hi Diego,

            Are you using v2.8 or meta slider or above?

            Regards
            Tom

        • http://www.artenfibra.co Diego Q

          I did have the 2.8.1 meta slider, anyway the problem was that I put the shortcode on the header.php, and then did your intructions. But now is all good!… thanks a lot for your time…. great Slider!

  • Daniel Hoviss

    It would be nice if you showed the code for weaver II theme, and ideally with header options on a per page basis.

    • matchalabs

      Hi Daniel,

      It looks like you should be able to add the Meta Slider widget to the Header Horizontal or Sitewide Top widget area. You can use the Widget Logic plugin to then hide/show the widgets for specific pages.

      Regards,
      Tom

  • Sophie

    I use zeeStyle theme. Can you pls tell me how to integrate it in zeeStyle, only on front page?

    • matchalabs

      Added :)

  • Nitsuj Ffrec El

    Hi!
    I would like to integrate my MetaSlider Pro to Mystile Theme on my home page.

    Could you give me some advice on how to do it? :)
    Thank you very much!

    • matchalabs

      Hi Nitsuj,

      That looks like a Woo Theme. Assuming all Woo themes have the same admin panel, there should be an option somewhere in the theme settings – something like Appearance > Hooks & Filters.

      In there switch to ‘Main’. There should be an option for ‘Above Content’ or ‘Below Nav’. Paste in your shortcode and add the restrict_to parameter, e.g.

      [metaslider id=XXX restrict_to=home]

      I’m going off memory so I’ve probably got a few bits wrong, please get in touch using http://www.metaslider.com/support and I’ll take a closer look.

      Regards
      Tom

      • Nitsuj Ffrec El

        Hi Tom,
        That was a really quick answer!
        I have not found such an option.

        But I got inspired by the Twenty Thirteen “how to” that you made and actually figured out a solution. Hopefully it will continue to work.

        Here it is:

        in header.php

        Just above the line:

        ?php woo_content_before(); ?

        Write
        ?php
        if (is_home() || is_front_page()) {
        echo do_shortcode(“[metaslider
        id=123]“); ; // replace 123 with your slideshow ID
        }
        ?

        Save and enjoy.
        I am a newbie to this so this might not be a sustainable solution ;)

        However, my metaslider is frozen (only display the first slide). :-/
        edit: it is also frozen in the content of other pages.
        How could I unfreeze it?

        edit: delete the “” otherwise it would not display in the comment.

  • Per André Horpen

    Hi. Any idea on how to replace the slider in the Catch Everest Theme?

    • matchalabs

      Hi Per,

      Nice easy one.. page has been updated :)

      Regards,
      Tom

  • Vargo

    Hi, can you tell me how to replace the static slideshow on this theme: https://www.authenticthemes.com/theme/discover/

    Thank you.

    • matchalabs

      Hi Leo,

      We only write guides for popular free themes hosted on wordpress.org sorry.

      Please get in touch with the theme developers, or upgrade to Meta Slider Pro and get in touch through support and we’ll take a look at a custom solution.

      Regards,

      Tom.

      • Vargo

        Hi Tom,

        Name’s not Leo!?

        • matchalabs

          Sorry, copy and paste mistake!

  • Leo

    Any guide i can install this to iTravel theme?

    • matchalabs

      Hi Leo,

      We only write guides for popular free themes hosted on wordpress.org sorry.

      Please get in touch with the theme developers, or upgrade to Meta Slider Pro and get in touch through support and we’ll take a look at a custom solution.

      Regards,
      Tom.

  • Uninterested Inyouropinion

    it works, thank you.

  • Omar MrUbuntu Owens

    Can you tell me how to stlye a particular slider differently?

    • matchalabs

      Each slideshow has it’s own css class, so if your slideshow ID is 123, you would use:

      .metaslider-123 {
      border: 1px solid red;
      }

      That will apply a 1px red border only to slideshow 123.

  • chris

    Thank you. I have followed the instructions for the twenty fourteen theme. I have the metaslider above the menu. http://315367.temp-dns.com/
    Can you please advise how to place the slider BELOW the menu ?

  • Nicolas Servide Staffolani

    Fantastic work!
    Do you have any simple ideas about how to ad an overlay image (like dots or diagonal stripes)?
    Can it be done just with css?

    Thanks for your time

    Nico

  • Alan Travers

    I’m trying to add metaslider to a portfolio page that allows me to add an embed html code, but doesn’t work for the shortcode of metaslider. How can I get the html embed code of the slider?

  • Omid

    i try to put meta slider in Pytheas theme but i dont know what to do at
    all … i dont like Pytheas default slider… plz help me :)

  • Edward

    How do I use Meta Slider on twenty fourteen theme in the header?

  • John Ryder

    Hi, great work but the slider only works on the main page. Theme is yoko. If I call other pages on the sub menu like “Auszeichnungen”, “Kurse” etc. then the slider disappears completely. Any suggestions?
    OK -> http://olli666.pf-control.de/atelierpetit/
    Broken > http://olli666.pf-control.de/atelierpetit/?page_id=19

  • Siang Hwee Goh

    Hi, I’m using Startpoint theme. How do I integrate Meta slider?

  • aristolholy

    hi my theme is flexibiity theme 3, how to insert meta slider to its header? ty

  • beka

    Hi I am using the Edin theme. is it possible for meta sider as the featured image on the home page?? Also is it possible to use meta slider as featured image on other pages?Thanks. :)