WordPress Twenty Sixteen Search Widget Slider

Twenty Sixteen Search Widget SliderI really like WordPress’ Twenty Sixteen default theme. It’s clean, well-designed, and versatile. With a child theme based on Twenty Sixteen, customizations are easily accomplished. I’ve used it as the basis for several sites. There is one thing I like to change.

Most sites need a Search widget. The logical place to put a Search widget on a Twenty Sixteen site is at the top of the Sidebar widget position. However, on mobile devices, all the widgets in the Sidebar position, including the Search widget, are inconveniently moved below the main content. That’s actually a good thing for a blog; it’s best to have the freshest content up top. It’s not so good for a site whose visitors rely heavily on search results to navigate the site.

My solution was to leverage some of the features built into Twenty Sixteen, including Gravicons and jQuery, to add a new, slide-out, widget position to contain the Search widget, making it accessible to both desktop and mobile users without being too obtrusive, and saving some space in the Sidebar as well.

If you’d like to add a slide-out Search widget to your site running Twenty Sixteen, the first thing you’ll need to do is create a child theme named “twentysixteen-child.” Once you have your child theme created and activated:

  1. Create a new file in your child theme’s folder called “custom.js.” In the custom.js file, add the following code:
    jQuery(document).ready(function() {
    	jQuery('#headersliderbutton').click(function () {
    		jQuery('#headerslidercontent').slideToggle(400,  'swing', function () {
    			jQuery('#headersliderbutton').toggleClass('headersliderbuttonopen');
    			if (jQuery('#headersliderbutton').hasClass('headersliderbuttonopen')) {
    				jQuery('#headerslidercontent .search-field').focus();
    			}
    		});
    	});
    });

    The custom.js file contains some jQuery that uses the .slideToggle jQuery action to create the slider effect, and .toggleClass to change the Gravicon used for the slider button.

  2. In your child theme’s style.css, add the following to style the slider:
    /* The following is for the header slider used for the Search widget. */
    #masthead {
    	clear: both;
    }
    
    #headerslidercontainer {
    	top: 0;
    	width: 290px;
    	float: right;
    	margin-right: 5px;
    	background-color: #000000;
    }
    
    #headerslidercontainer {
    	background-color: #ffffff;
    	width: 290px;
    }
    
    #headerslidercontent {
    	display: none;
    	padding: 20px;
    	border-right: 1px #000000 solid;
    	border-bottom: 1px #000000 solid;
    	border-left: 1px #000000 solid;
    }
    
    #headersliderbutton {
    	line-height: 42px;
    	width: 40px;
    	background-color: #000000;
    	color: #ffffff;
    	text-align: center;
    	border-bottom-right-radius: 5px;
    	border-bottom-left-radius: 5px;
    	float: right;
    	font-size: 24px;
    	font-family: Genericons;
    	font-weight: bold;
    }
    
    #headersliderbutton:hover {
    	background-color: #007acc;
    }
    
    #headersliderbutton::before {
    	content: "\f400";
    }
    
    #headersliderbutton.headersliderbuttonopen::before {
    	content: "\f405";
    }
    /* End of header slider code. */
  3. Copy the header.php file from the /wp-content/themes/twentysixteen/ folder to your child theme’s folder, then open it in a text editor and find the line:
    <div class="site-inner">
    Right after that line, paste the following to add the new widget position to the header of your child theme:

    <?php if ( is_active_sidebar( 'header-slider-1' ) ) { dynamic_sidebar( 'header-slider-1' ); } ?>

     

  4. In your child theme’s functions.php, add the following code to load your custom.js script and to create the new widget position:
    add_action( 'wp_enqueue_scripts', 'your_scripts' );
    function your_scripts() {
    wp_enqueue_script('custom_scripts', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), '1.0.0');
    }
    
    // Add the header slider widget position used for the custom Search position. Change "twentysixteen-child" to match your child theme's name.
    add_action( 'widgets_init', 'custom_widgets_init' );
    function custom_widgets_init() { 
         register_sidebar( array( 
             'name' => __( 'Header Slider', 'twentysixteen-child' ), 
             'id' => 'header-slider-1', 
             'description' => __( 'An optional widget area to display a header slider, primarily used for a Search widget.', 'twentysixteen-child' ), 
             'before_widget' => '<div id="headerslidercontainer"><div id="headerslidercontent">', 
             'after_widget' => '</div><div id="headersliderbutton"></div></div>', 
             'before_title' => '<h2>', 
             'after_title' => '</h2>', 
         ) ); 
     }

     

  5. Add the Search widget to the new widget position you just created using WordPress’ UI. To do so, log in to the Admin side of your site, and go Appearance -> Widgets. Drag a Search widget to the newly created “Header Slider” widget position.
  6. Finally, clear any caching plugins and your browser cache.