Integrating Meta Slider with the CyberChimps ‘Responsive’ theme

With nearly a million downloads, the Responsive theme for WordPress is one of the most popular free themes available.

In our first blog post, we’ll look at how we can integrate Meta Slider to add a user friendly ‘Meta Slider’ drop down setting to the Responsive theme settings, and output the selected slideshow to the homepage of your site.

Breaking the problem down

Although it is possible to paste the ‘template include’ code directly from Meta Slider into your themes header.php file, in this blog post we’ll look at how integrate Meta Slider with a bit more finesse. Here’s what we’ll cover:

  • Adding a new setting which lists the available Meta Slider slideshows directly into the Responsive theme options
  • Modifying the theme output to render our selected slideshow on the homepage

Fortunately for us, the Responsive theme allows us to hook into it’s functionality using WordPress filters & actions, so we won’t need to make any direct edits to the template files.

Step 1: Adding a new setting to the Responsive theme options

The Responsive theme allows us to modify the list of it’s available theme settings through WordPress filter called ‘responsive_options_filter‘. We’ll hook into this to add our new “Meta Slider” setting to the Home Page settings section. The following code should live in your themes ‘functions.php’ file.

A quick check of the theme settings confirms we have a dropdown list of Meta Slider Slideshows in the Homepage section. The theme takes care of saving the selected slideshow ID, we’ll need to access that later.

meta-slider-responsive-theme-integration

Step 2: Outputting the slideshow to the theme header

The Responsive theme allows us to hook into various places in the theme output. We’re going to use the ‘responsive_header_end‘ action which is located just beneath the navigation menu. The following code should live in your themes functions.php file.

End Result

A quick check of our homepage confirms the slideshow we selected in our Theme Options is displayed correctly:

metaslider-responsive-slideshow

Installation

To get this functionality up and running on your own site, you can either copy and paste the code into your themes functions.php file (/wp-content/themes/responsive/functions.php), or install this handy plugin.

  • matchalabs

    Test message

  • Chema

    The implementation does not work in responsive pro, any suggestions?

    • matchalabs

      Hi Chema, apologies for the delay in getting back to you. Unfortunately we don’t have a copy of Responsive Pro to work with.

    • Annemarie Francken

      if you use a child theme and make a new Php file, make sure to paste the Php start up code in your document first!

  • Annemarie Francken

    I would love it just above the menu, is that possible?

    • matchalabs

      Yes, it should be quite simple. Try changing ‘responsive_header_end’ to ‘responsive_header’ in this line:

      add_action(‘responsive_header_end’, ‘metaslider_responsive_homepage_slider’, 10, 1);

      If you open /wp-content/themes/responsive/header.php and search for ‘responsive_’ you should find all the hooks and different places you can output the slideshow to.

      • Annemarie Francken

        thanks, it worked!

  • MightyFool

    Is there a way to implement this on all pages? Thanks!

    • matchalabs

      Hi,

      On line 9 or the code in step 2, remove the following:

      (is_front_page() || is_home()) &&

      Regards
      Tom

      • MightyFool

        Thanks a lot!

  • FRANtastik

    I have a question. I currently have many different sliders that are associated with certain pages of my site all done with hard code “else if ” statements in the header. All the sliders are working for their particular pages except for one THE BLOG page. the page is called blog in my url structure but wont show my particular slider for that page its showing the “else” slider aka the slider that shows on every page that isnt assigned. I changed my settings to have another page be my posts page and that page ‘s slider changed to the “else” slider. So i narrowed the issue to the theme but how do i change the theme to allow me to use specific slider for the blog page?

    • matchalabs

      Hi,

      It looks like you can detect the blog page using:

      is_page(‘blog’)

      Regards,
      Tom.

      • FRANtastik

        hi tom i have tried that and checked the spelling lol theres something the RESPONXIVE theme is overriding my blog slider and putting the default slider in its place. If i make another page the POSTS page that slider is also overwriten and the default slider shows

  • Garrett

    Is there anyway to have have two sliders under the menu? I would like to have a larger slider directly below the menu and then a smaller tiled slider directly below that one. Thanks

  • Timo Schmitt

    I have a question, too.

    In your example at “End Result”, the slider fits correctly but under it, there is this “Hello World” and the CyberChimps image. Is there a way to delete this whole “page” which contains Hello World blabla and instead of this show the three widgets? Is there a way that the slider replaces this “page” because your described way doesn´t work with the newest Responsive?

    Regards,
    Timo

  • Sissa

    Hi! There were new update for Meta Slider and these instructions wont work anymore. Its broken the whole WordPress if try use below instructions with updated Meta Slider 🙁 Please update these instructions that new MS work with WP 🙂