Last active
August 29, 2015 14:14
-
-
Save neilgee/44709e8f47de0b1fd94f to your computer and use it in GitHub Desktop.
Add a flyout search form in Genesis Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* # 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Toggles Search Field on and off | |
* | |
*/ | |
jQuery(document).ready(function($){ | |
$(".search-toggle").click(function() { | |
$("#search-container").slideToggle('slow', function(){ | |
$(".search-toggle").toggleClass('active'); | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment