Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active Aug 29, 2015
Embed
What would you like to do?
Add a flyout search form in Genesis Theme
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 );
//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' );
// 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' );
/* # 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;
}
/*
* Toggles Search Field on and off
*
*/
jQuery(document).ready(function($){
$(".search-toggle").click(function() {
$("#search-container").slideToggle('slow', function(){
$(".search-toggle").toggleClass('active');
});
});
});
// 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 );
//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