neilgee
2/7/2015 - 6:15 AM

Add a flyout search form in Genesis Theme

Add a flyout search form in Genesis Theme

//Add in new Search Widget areas
function themeprefix_extra_widgets() {	
	genesis_register_sidebar( array(
	'id'            => 'search',
	'name'          => __( 'Search', 'genesischild' ),
	'description'   => __( 'This is the Search toggle area', 'genesischild' ),
	'before_widget' => '<div class="search">',
	'after_widget'  => '</div>',
	) );
}
add_action( 'widgets_init', 'themeprefix_extra_widgets' );


//Position the Search Area
function themeprefix_search_widget() {
	genesis_widget_area ( 'search', array(
	'before' => '<div id="search-form-container">',
	'after'  => '</div>',));
}
add_action( 'genesis_after_header','themeprefix_search_widget' );
// Enqueue scripts and styles
function themeprefix_scripts_and_styles() {
    wp_enqueue_Style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' );
    wp_enqueue_script( 'hidesearch', get_stylesheet_directory_uri() . '/js/hidesearch.js', array('jquery'), '1', true );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_and_styles' );


//Allow PHP to run in Widgets
function genesis_execute_php_widgets( $html ) {
	if ( strpos( $html, "<" . "?php" ) !==false ) {
	ob_start();
	eval( "?".">".$html );
	$html=ob_get_contents();
	ob_end_clean();
		}
	return $html;
}
add_filter( 'widget_text','genesis_execute_php_widgets' );	


//Add in new Search Widget areas
function themeprefix_extra_widgets() {	
	genesis_register_sidebar( array(
	'id'            => 'search',
	'name'          => __( 'Search', 'genesischild' ),
	'description'   => __( 'This is the Search toggle area', 'genesischild' ),
	'before_widget' => '<div class="search">',
	'after_widget'  => '</div>',
	) );
}
add_action( 'widgets_init', 'themeprefix_extra_widgets' );


//Position the Search Area
function themeprefix_search_widget() {
	genesis_widget_area ( 'search', array(
	'before' => '<div id="search-form-container">',
	'after'  => '</div>',));
}
add_action( 'genesis_after_header','themeprefix_search_widget' );


function custom_nav_item( $menu, stdClass $args ){
    // make sure we are in the primary menu
    if ( 'primary' != $args->theme_location )
    
        return $menu;   

    $menu  .= '</ul><ul class="search-form-container"><div class="search-toggle"><i class="fa fa-search"></i>
				<a href="#search-container" class="screen-reader-text"></a>
				</div>'; 
        return $menu; 
}
add_filter( 'wp_nav_menu_items', 'custom_nav_item', 10, 2 );
/*
* Toggles Search Field on and off
*
*/
jQuery(document).ready(function($){
	$(".search-toggle").click(function() {
		$("#search-container").slideToggle('slow', function(){
			$(".search-toggle").toggleClass('active');
		});

	});
});
/* # Search
---------------------------------------------------------------------------------------------------- */
.menu-primary  .menu-item {
	float: left;
}

.fa-search {
	color: #fff;
}

/* Header search */
.search-form-container {
	position: relative;
}

.search-toggle {
	float: right;
	padding: 30px 24px;
	color: #fff;
	text-align: center;
	cursor: pointer;
	line-height: 1;
}

.search-toggle:hover,
.search-toggle.active {
	background: #4d4d4d;
}

@media screen and (max-width: 600px) {
    .search-toggle {
	position: absolute;
	top: -50px;
	right: 0;
	margin-right: -5%;
	background: #4c4c4c;
	padding: 17px 24px;
    }

}

.search-box-wrapper {
	z-index: 999;
	width: 100%;
	display: none;
}

.search-box {
	padding: 1em;
	background: #4d4d4d;
}

.search-box input[type="search"]{
	max-width: 350px;
	float: right;
	padding: 10px 20px 10px 40px;
	font-size: 20px;
	background-color: #fff;
	border: 0;
	border-radius: 3px;
}

.search-box input[value="Search"]{ 
    display: none; 
}


/* Text meant only for screen readers - from UnderScores */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	right: 0;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
// Enqueue scripts and styles
function themeprefix_scripts_and_styles() {
    wp_enqueue_Style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' );
    wp_enqueue_script( 'hidesearch', get_stylesheet_directory_uri() . '/js/hidesearch.js', array('jquery'), '1', true );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_and_styles' );
//Allow PHP to run in Widgets
function genesis_execute_php_widgets( $html ) {
	if ( strpos( $html, "<" . "?php" ) !==false ) {
	ob_start();
	eval( "?".">".$html );
	$html=ob_get_contents();
	ob_end_clean();
		}
	return $html;
}
add_filter( 'widget_text','genesis_execute_php_widgets' );
function custom_nav_item( $menu, stdClass $args ){
    // make sure we are in the primary menu
    if ( 'primary' != $args->theme_location )
    
        return $menu;   

    $menu  .= '</ul><ul class="search-form-container"><div class="search-toggle"><i class="fa fa-search"></i>
				<a href="#search-container" class="screen-reader-text"></a>
				</div>'; 
        return $menu; 
}
add_filter( 'wp_nav_menu_items', 'custom_nav_item', 10, 2 );