Procedure to add toggle search icon in the header (next to navigation menu)
Authority Pro by StudioPress is a fantastic Genesis child theme to build trust as an author, blogger, freelancer, etc.
Lately, I switched to the Authority Pro theme, and I wanted to have the search icon in a header but couldn’t find a straightforward solution on the Internet.
But that doesn’t mean it’s not possible.
I had to take help from my developer and thought to share the code with you. The good news is Authority Pro theme comes with WordPress Dashicons integrated which makes it easy.
As a best practice, take a backup of required files before modifying so you can restore when something goes wrong.
- Login to your WordPress server (cPanel if you are on shared hosting)
- Go to WP installation and then
wp-content/themes/authority-pro
- Add the following at end of the
functions.php
file.
// Header Search Function
add_filter( 'genesis_header', 'genesis_header_icon', 10, 2 );
function genesis_header_icon(){ ?>
<div class="custom-search head-custom-search">
<?php echo sprintf( '%s', __( genesis_search_form( $echo ) ) ); ?>
</div>
<div class="header-icons">
<span class="search-box">
<a class="search-icon" href="javascript:void(0)">
<i class="dashicons dashicons-search"></i>
</a>
</span>
</div>
<?php }
Next, add the following in Enqueues scripts and styles
section.
wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', 'jquery', '3.0.0', TRUE);
Ex
/**
* Enqueues scripts and styles.
*
* @since 1.0.0
*/
function authority_enqueue_scripts_styles() {
wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', 'jquery', '3.0.0', TRUE);
- Save the file
Let’s add the toggle jquery functions
- Go to
js
folder and create a new file calledcustom.js
with the following codes
// Header Search Toggle
//---------------------------------------------------------------
jQuery(document).ready(function(){
jQuery(".header-icons .search-box .search-icon").click(function(){
jQuery(".site-header .wrap .head-custom-search").slideToggle();
//alert('thtyh');
jQuery(".header-icons .search-box .search-icon i").toggleClass("dashicons-search dashicons-no-alt");
});
jQuery(document).mouseup(function(e) {
var container = jQuery(".site-header .wrap .head-custom-search");
var search_icon = jQuery(".header-icons .search-box .search-icon");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
if (!search_icon.is(e.target) && search_icon.has(e.target).length === 0) {
jQuery('.site-header .wrap .head-custom-search').slideUp();
jQuery('.header-icons .search-box .search-icon i').removeClass("dashicons-no-alt");
jQuery('.header-icons .search-box .search-icon i').addClass("dashicons-search");
}
}
});
});
and, finally, time to beautify the search toggle box.
- Add the following in a
style.css
file
header .header-icons{
width: 112px;
float: right;
text-align: right;
padding: 15px 0px 8px;
position:relative;
}
header .header-icons .search-box{
position:relative;
}
header .header-icons a{
margin-left:10px;
text-decoration:none;
}
header .header-icons .search-box i{
color:#333;
}
header .header-icons .twitter-icon i{
color:#3FA9F5;
}
header .header-icons .fb-icon i{
color:#3A559F;
display: none;
}
.genesis-nav-menu i{
vertical-align:middle;
}
.genesis-nav-menu .custom-search-icon i{
vertical-align:middle;
padding: 0px 25px 0px 10px;
cursor:pointer;
}
.genesis-nav-menu li a.icon{
padding: 12px 5px;
}
.site-header .wrap{
position:relative;
}
.site-header .wrap .head-custom-search{
position:absolute;
top: 78px;
right: 20px;
width: 712px;
text-align: center;
background:#fff;
display:none;
z-index: 9999;
}
.site-header .wrap .head-custom-search::before{
border-color: transparent transparent #ff5722;
border-style: solid;
border-width: 0.5em;
content: "";
display: block;
position: absolute;
right: 50px;
top: -20px;
z-index: 10;
}
.site-header .wrap .head-custom-search .search-form {
margin-bottom: 0px;
width: 100%;
padding: 20px 18px;
border-top: 3px solid #ff5722;
}
.site-header .wrap .head-custom-search .search-form input[type='search']{
width: 562px;
height:58px;
border:1px solid #e1e1e1;
border-right:0px;
}
.site-header .wrap .head-custom-search .search-form input[type="submit"] {
margin-top: 0px !important;
padding: 20px 26px 18px;
border-left: 0px;
background:#ff5722;
color:#fff;
}
.site-header .wrap .head-custom-search .search-form input:focus[type="submit"],
.site-header .wrap .head-custom-search .search-form input:hover[type="submit"]{
transform: translate3d(0,0,0);
}
- Save the file
That’s all.
Refresh your page, and you should see the search icon and toggle in action.
I hope this helps you to add the search icon in the Genesis framework.