Personalizar el buscador en Genesis Framework

Mini tutorial para poder personalizar la caja de búsqueda en Genesis Framework, mostrando el botón de buscar o sustituyéndolo por una lupa.


por

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.
custom search input genesis

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.

custom search input genesis

 

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

 

*Dashicons es la librería de iconos que trae el core de WordPress por defecto. Si tu tema además incorpora alguna otra fuente de iconos como ionicons o fontawesome podrías utilizar uno de sus iconos, pero importarlas sólo para este caso sería incrementar innecesariamente el peso de la web.

 

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

personalizar el boton busqueda genesis

 

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

personalizar el boton busqueda genesis

 

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA