Blog

Stay connected to the latest UpdraftPlus news.

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.

No related content found.