¿Cómo agregar un ícono de búsqueda en el encabezado Genesis Authority Pro?

Procedimiento para agregar el icono de alternar búsqueda en el encabezado (junto al menú de navegación)

Autoridad Pro de StudioPress es un fantástico tema hijo de Genesis para generar confianza como autor, blogger, autónomo, etc.

Últimamente, cambié al tema Authority Pro y quería tener el ícono de búsqueda en un encabezado, pero no pude encontrar una solución sencilla en Internet.

Pero eso no significa que no sea posible.

Tuve que pedir ayuda a mi desarrollador y pensé en compartir el código contigo. La buena noticia es que el tema Authority Pro viene con Dashicons de WordPress integrado lo que lo hace fácil.

Como práctica recomendada, realice una copia de seguridad de los archivos necesarios antes de modificarlos para que pueda restaurarlos cuando algo salga mal.

• Inicie sesión en su servidor de WordPress (cPanel si está en un alojamiento compartido)
• Vaya a la instalación de WP y luego wp-content/themes/authority-pro
• Agregue lo siguiente al final del  functions.php archivo.

// 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 }

A continuación, agregue lo siguiente en Enqueues scripts and styles .

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);

• Guarda el archivo

Agreguemos las funciones de alternar jquery

• Ve a js carpeta y cree un nuevo archivo llamado custom.js  con los siguientes códigos

// 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");
   }
  }
 });
});

y, finalmente, es hora de embellecer el cuadro de alternancia de búsqueda.

• Agregue lo siguiente en un style.css presentar

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);
}

• Guarda el archivo

Eso es todo.

Actualice su página y debería ver el ícono de búsqueda y alternar en acción.

Espero que esto te ayude a agregar el ícono de búsqueda en el Genesis framework.