Personalizar el buscador en Genesis Framework

Hace ya un tiempo veíamos un CSS para poder mostrar el botón de buscar en los widgets de búsqueda en Genesis Framework, que por defecto en muchos child themes vienen sin ni siquiera el botón o el icono de la lupa, lo que perjudica bastante la usabilidad del sitio.

En este artículo, vamos a ver otra aproximación para hacer lo mismo y a ampliar el tema para sustituir el botón con el icono de lupa ya sea fuera de la caja de búsqueda como dentro.

1- Mostrar el botón de buscar:

Lo primero que haremos es buscar el código a continuación en el archivo styles.css de nuestro tema y eliminarlo, ya que es el que oculta el botón

.search-form input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}

Ojo porque puede ser que tu tema tenga estilos diferentes para el buscador en función de si está en el sidebar, footer o incluso en el menú. Tendrás que ver si quieres cambiarlos todos o sólo alguno en especifico.

Lo siguiente sería darle al botón los estilos específicos que queramos o sustituir el botón por el icono de la lupa, que es lo que veremos a continuación.

2- Sustituir el botón de buscar por el icono de la lupa

Para ello deberemos, por una parte, añadir una función para sustituir el texto «Buscar» por el icono de Dashicon*  correspondiente a la lupa:

add_filter( 'genesis_search_button_text', 'dpw_search_button_icon' );
function dpw_search_button_icon( $text ) {
	return esc_attr( '' );
}

Y por otra añadir los estilos correspondientes en nuestro CSS:

.search-form input[type="submit"] {
    content: "\f179";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 30px/1 'dashicons';
    vertical-align: middle;
    background: none;
    border: none;
    padding-left: 20px;
}

Ahora ya nos aparece la lupa en lugar del botón:

El problema es que muchas veces esta caja de búsqueda la colocamos en el sidebar o barra lateral de nuestra web o blog y no contamos con demasiado espacio quedando la caja de texto algo estrecha, por lo que otra opción es mover el icono para que aparezca dentro del campo.

.search-form input[type="submit"] {
    content: "\f179";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 30px/1 'dashicons';
    vertical-align: middle;
    background: none;
    border: none;
    padding-left: 20px;
    position: absolute;
    margin-left: -60px;
    color: #ccc;
}

Cambiando el atributo position y ajustando el margen podrás hacer que quede dentro de la caja de texto.

(Ojo que deberás revisar los estilos responsive para comprobar que en los diferentes dispositivos el icono de la lupa quede bien colocado.)