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 MetaSlider to add a user friendly ‘MetaSlider’ 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 MetaSlider into your themes header.php file, in this blog post we’ll look at how integrate MetaSlider with a bit more finesse. Here’s what we’ll cover:
- Adding a new setting which lists the available MetaSlider 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 “MetaSlider” setting to the Home Page settings section. The following code should live in your themes ‘functions.php’ file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/** * Add MetaSlider dropdown selector to Home Page settings */ add_filter('responsive_options_filter', 'metaslider_responsive_theme_sections', 10, 1); function metaslider_responsive_theme_sections($options) { $slideshows[0] = 'Disabled'; // list the tabs $args = array( 'post_type' => 'ml-slider', 'post_status' => 'publish', 'suppress_filters' => 1, // wpml, ignore language filter 'posts_per_page' => -1 ); $the_query = new WP_Query($args); // build up our array of available slideshows, indexed on ID while ($the_query->have_posts()) { $the_query->the_post(); $slideshows[$the_query->post->ID] = get_the_title() . ' (ID: ' . $the_query->post->ID . ')'; } // add a new 'MetaSlider' setting to the responsive theme options $options['home_page'][] = array( 'title' => __( 'MetaSlider', 'responsive' ), 'subtitle' => '<br />Recommended width: 960px', 'heading' => '', 'type' => 'select', 'id' => 'homepage_meta_slider', 'description' => '', 'placeholder' => '', 'options' => $slideshows ); return $options; } |
A quick check of the theme settings confirms we have a dropdown list of MetaSlider Slideshows in the Homepage section. The theme takes care of saving the selected slideshow ID, we’ll need to access that later.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * Output the slideshow to the 'header_end' section of the theme */ add_action('responsive_header_end', 'metaslider_responsive_homepage_slider', 10, 1); function metaslider_responsive_homepage_slider() { $theme_options = get_option('responsive_theme_options'); // check we're on the homepage/front page, and check we have a slideshow selected in our theme settings if ((is_front_page() || is_home()) && isset($theme_options['homepage_meta_slider'])) { $slider_id = $theme_options['homepage_meta_slider']; if ($slider_id > 0) { // output the slideshow echo do_shortcode("[metaslider id={$slider_id}]"); // for a 100% wide slideshow, comment out the line above, uncomment the line below //echo do_shortcode("[metaslider id={$slider_id} percentwidth=100]"); } } } |
End Result
A quick check of our homepage confirms the slideshow we selected in our Theme Options is displayed correctly:
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.