Title: create multiple featured slider
Last modified: August 21, 2016

---

# create multiple featured slider

 *  Resolved [Nayeem](https://wordpress.org/support/users/nayeem_888/)
 * (@nayeem_888)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/)
 * Is there any way to create multiple featured slider? I want to create two featured
   slider at the bottom of the page with different tag.

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [wprock](https://wordpress.org/support/users/wprock/)
 * (@wprock)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470135)
 * are you wanting it only at home page?
 *  Thread Starter [Nayeem](https://wordpress.org/support/users/nayeem_888/)
 * (@nayeem_888)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470142)
 * Yes, I want to use only at home page, i have created a page template for homepage.
 *  [wprock](https://wordpress.org/support/users/wprock/)
 * (@wprock)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470171)
 * Ok.I am trying to make it on my dev server. But it is much customization. Are
   you created the child theme? lot of files will need for this.
 *  Thread Starter [Nayeem](https://wordpress.org/support/users/nayeem_888/)
 * (@nayeem_888)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470184)
 * yes, i am working on a child theme.
 *  Moderator [Jan Dembowski](https://wordpress.org/support/users/jdembowski/)
 * (@jdembowski)
 * Forum Moderator and Brute Squad
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470196)
 * **[@wprock](https://wordpress.org/support/users/wprock/)**? Sorry, do you have
   a solution _to share on these forums_?
 * That link looked an awful lot like a contact page.
 *  [wprock](https://wordpress.org/support/users/wprock/)
 * (@wprock)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470200)
 * [@jan](https://wordpress.org/support/users/jan/) Dembowski
 * aha…sorry. I am not wanting it also. I have no any negative intention. I am just
   trying to understand the functionality.
 * Ok. I created a article on it “[How to create multiple featured slider on twenty fourteen theme?](https://wordpress.org/support/topic/create-multiple-featured-slider/?output_format=md#)”
   may be this will help him.
 *  Moderator [Jan Dembowski](https://wordpress.org/support/users/jdembowski/)
 * (@jdembowski)
 * Forum Moderator and Brute Squad
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470202)
 * Please don’t. Really.
 * Here’s the thing: except for that code everything in that post of yours can be
   pasted into the forums as a reply to nayeem_888. And the code blocks can be pasted
   here or you can use [pastebin.com](http://pastebin.com/) and share those links.
 * Support stays on the forums when possible and sending people to your own site
   that way can be too easily abused.
 * Why not just share the solution here? You’ll be helping more people if you do.
   😉
 *  [wprock](https://wordpress.org/support/users/wprock/)
 * (@wprock)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470206)
 * [@jan](https://wordpress.org/support/users/jan/) Dembowski
 * Ok. I’ll follow your guide line and nexttime i’ll keep this in my mind.
 *  [wprock](https://wordpress.org/support/users/wprock/)
 * (@wprock)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470207)
 * [@nayeem_888](https://wordpress.org/support/users/nayeem_888/)
 * You can try this. First put the following code in your functions.php file:
 *     ```
       <?php
       function featuredSlider($tags, $limit){
       ?>
       <div style="clear:both; content:''; display:table;"></div>
       <div id="featured-content-<?php echo $tags?>" class="custom-featured-content <?php echo $tags?>-slider">
       <div class="<?php echo $tags?>-featured-content-inner">
       <?php
           query_posts('posts_per_page='.$limit.'&tag='. $tags);
           if(have_posts()):
             while(have_posts()):
               the_post();
         			 // Include the featured content template.
         			get_template_part( 'content', 'featured-post' );
         		endwhile;
           endif;
           wp_reset_query();
       ?>
       	</div><!-- .featured-content-inner -->
       </div><!-- #featured-content .featured-content -->
       <script type="text/javascript">
         jQuery(document).ready(function(){
           var body    = jQuery( 'body' ),
       		_window = jQuery( window );
           // Initialize Featured Content slider.
       	 _window.load( function() {
         		if ( body.is( '.slider' ) ) {
               jQuery( '.<?php echo $tags?>-slider' ).featuredslider( {
         				selector: '.<?php echo $tags?>-featured-content-inner > article',
         				controlsContainer: '.<?php echo $tags?>-slider'
         			} );
         		}
           });
         });
       </script>
       <?php } ?>
       ```
   
 * Next add the some css in your child theme’s css file. Here is the code:
 *     ```
       .custom-featured-content {
       background: #000 url(../twentyfourteen/images/pattern-dark.svg) repeat fixed;
       -webkit-box-sizing: border-box;
       -moz-box-sizing:    border-box;
       box-sizing:         border-box;
       position: relative;
       width: 100%;
       }
   
       .custom-featured-content-inner {
       overflow: hidden;
       }
   
       .custom-featured-content .hentry {
       color: #fff;
       margin: 0;
       max-width: 100%;
       width: 100%;
       }
   
       .custom-featured-content .post-thumbnail,
       .custom-featured-content .post-thumbnail:hover {
       background: transparent;
       }
   
       .custom-featured-content .post-thumbnail {
       display: block;
       position: relative;
       padding-top: 55.357142857%;
       overflow: hidden;
       }
   
       .custom-featured-content .post-thumbnail img {
       left: 0;
       position: absolute;
       top: 0;
       }
   
       .custom-featured-content .entry-header {
       background-color: #000;
       -webkit-box-sizing: border-box;
       -moz-box-sizing:    border-box;
       box-sizing:         border-box;
       min-height: 96px;
       overflow: hidden;
       padding: 24px 10px;
       }
   
       .custom-featured-content a {
       color: #fff;
       }
   
       .custom-featured-content a:hover {
       color: #41a62a;
       }
   
       .custom-featured-content .entry-meta {
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       line-height: 1.0909090909;
       margin-bottom: 12px;
       }
   
       .custom-featured-content .cat-links {
       font-weight: 700;
       }
   
       .custom-featured-content .entry-title {
       font-size: 18px;
       font-weight: 300;
       line-height: 1.3333333333;
       margin: 0;
       text-transform: uppercase;
       }
   
       /* Slider */
   
       .slider .custom-featured-content .hentry {
       -webkit-backface-visibility: hidden;
       display: none;
       position: relative;
       }
   
       .slider .custom-featured-content .post-thumbnail {
       padding-top: 55.49132947%;
       }
   
       @media screen and (min-width: 673px) {
       .slider .custom-featured-content .entry-header {
       min-height: inherit;
       padding: 24px 30px 48px;
       position: absolute;
       left: 0;
       bottom: 0;
       width: 50%;
       z-index: 3;
       }
       }
   
       @media screen and (min-width: 1080px) {
       .custom-featured-content {
       padding-left: 222px;
       margin-top: 20px;
       }
   
       .slider .custom-featured-content .entry-title {
       font-size: 33px;
       line-height: 1.09091;
       }
   
       .slider .custom-featured-content .entry-header{
       width: 534px;
       }
       }
       ```
   
 * now you will place the “featuredSlider()” function in your template file or index.
   php file. I added this function in my index.php file. This is code:
 *     ```
       <?php
   
       // I put the code just below this line <?php get_sidebar( 'content' ); ?>
   
       if ( is_front_page() ) {
       featuredSlider('blockquotes', 6); // passing the tag and post limit
   
       ?>
       ```
   
 *  Thread Starter [Nayeem](https://wordpress.org/support/users/nayeem_888/)
 * (@nayeem_888)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470212)
 * [@wprock](https://wordpress.org/support/users/wprock/)
    Thanx a lot, it works!
 *  [Brian Harris](https://wordpress.org/support/users/zgani/)
 * (@zgani)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470228)
 * [@nayeem](https://wordpress.org/support/users/nayeem/) & wprock
 * Would either one of you like to post a link to a demo showing that the function
   does indeed work?
 * I see 3 issue with the function off the bat….
 * * Use of query_posts(); is a bad bad idea – you should never use it. Use `WP_Query();`
   instead.
 * * Also use of `wp_reset_query();` is not a good idea – use `wp_reset_postdata();`
 * * You are missing the closing } for the code placed in index.php which would 
   cause the “blank white page of death” or throw up and error if error reporting
   is enabled.
 *  Thread Starter [Nayeem](https://wordpress.org/support/users/nayeem_888/)
 * (@nayeem_888)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470237)
 * [@zulfikar](https://wordpress.org/support/users/zulfikar/),
    At this moment i
   can not show u demo. Would u please explain, what is problem with query_posts()?
   What if i query like this: `get_posts('numberposts=5&order=DESC&orderby=date&
   post_type=post');`
 *  [Brian Harris](https://wordpress.org/support/users/zgani/)
 * (@zgani)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470243)
 * I’ll let Codex explain the problem 🙂
    [http://codex.wordpress.org/Function_Reference/query_posts](http://codex.wordpress.org/Function_Reference/query_posts)
 * get_posts(); would be perfectly fine

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘create multiple featured slider’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentyfourteen/4.4/screenshot.
   png)
 * Twenty Fourteen
 * [Support Threads](https://wordpress.org/support/theme/twentyfourteen/)
 * [Active Topics](https://wordpress.org/support/theme/twentyfourteen/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentyfourteen/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentyfourteen/reviews/)

 * 13 replies
 * 4 participants
 * Last reply from: [Brian Harris](https://wordpress.org/support/users/zgani/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/create-multiple-featured-slider/#post-4470243)
 * Status: resolved