Comunidad de diseño web y desarrollo en internet online

Crea tu propio sidebar personalizado para WordPress

Como crear tu propio sidebar en Wordpress personalizado?. Hace poco me encontré con la necesidad de tener que crear un sidebar personalizado para un cliente, en concreto necesitaba un lugar debajo de un slider donde poder colocar 5 campos personalizados, una forma de hacerlo era simplemente colocando un nuevo div con los 5 campos, pero el cliente no iba a tocar el código HTML así que la solución perfecta era configurarle un sidebar desde donde él pudiera modificar, añadir y eliminar campos desde su propio panel de control. Busqué tutoriales sobre el tema, pero ninguno daba con la solución completa, así que me decidí a hacerlo desde cero, aquí os lo dejo paso a paso. Espero que lo disfrutéis!.


Abrimos el archivo “functions.php”, es el lugar donde vamos a definir nuestro sidebar, para ello tenemos que incluir el siguiente código.

Código :

/** Sidebar personalizada SIDEBAR PERSONALIZADO */
if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name' => 'Detalles_vuelo',
        'before_widget' => '<div class="clase_personalizada">',
        'after_widget' => '</div>',
        'before_title' => '<h7>',
        'after_title' => '</h7>',
    ));
}


Definimos el campo name, con el nombre que le queramos dar a nuestro nuevo sidebar, será el nombre que veremos aparecer junto a nuestros otros sidebar

Definimos before widget, con la que va a ser el aspecto de nuestro sidebar, en este caso la definimos con una clase personalizada llamada clase_personalizada, en el caso de que queráis utilizar la clase por defecto que viene en vuestro theme tenéis que poner en el campo.

Código :

"widget %1$s"


El campo after_widget, se deja tal y como está para dar paso a diferentes widgets que queramos ir añadiendo.

El campo before_title, es como podéis ver el formato que le queremos dar a nuestro título en el widget y lo mismo con after_title.

Creamos un nuevo archivo php, en este caso podemos llamarlo sidebar_personalizado.php, y tan solo tenemos que colocar este código y guardarlo.

Código :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Detalles_vuelo') ) : ?> <?php endif; ?>;


Creamos nuestra clase personalizada en la hoja de estilos que por defecto utilice nuestro theme, casi siempre es style.css, y sobre todo darle el mismo nombre que va el código del paso 1.

Código :

<div class="clase_personalizada"></div>


Aprovechamos también para crear nuestro div personalizado, que es donde irá nuestro sidebar wordpress. Guardamos todo en el servidor y ya lo tenemos casi listo para poder implementar nuestro sidebar wordpress personalizado.

Por último buscamos el archivo PHP donde queramos alojar nuestro nuevo sidebar, nuestro nuevo sidebar puede ser horizontal horizontal o vertical, cuando tengamos localizado el lugar colocamos el siguiente código.

Código :

<div id="detalles-vuelo"><?php get_sidebar('personalizado') ?></div>

El código get_sidebar iría dentro de nuestro div personalizado y veréis que “personalizado” es la llamada a nuestro archivo que hemos creado en el paso 2, y que hemos llamado sidebar_personalizado. Así queda en el panel de administración:



Y ya está, a disfrutar experimentando ya que esta forma de personalizar nuestro WordPress nos va a dar un montón de alas para hacer aún más dinámico y personalizable.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate