Añadiendo una barra lateral adicional

Si estás buscando mejorar la funcionalidad de tu tema Themify, considera agregar una segunda barra lateral. En esta guía te explicaremos cómo hacerlo paso a paso. Aunque el tutorial hace referencia al tema “Basic”, los pasos se pueden aplicar a cualquier tema de Themify.

Paso 1: Crear un tema hijo

Para evitar que tus cambios en la plantilla se sobrescriban durante las actualizaciones del tema, es recomendable crear y activar un tema hijo. Una vez que hayas configurado tu tema hijo, tendrás un archivo ‘style.css’ listo para personalizar.

Paso 2: Registrar la nueva barra lateral

A continuación, crea un archivo nuevo llamado ‘functions.php’ en el directorio de tu tema hijo. Si ya tienes un tema hijo con un archivo ‘functions.php’ existente, simplemente agrega o combina el siguiente código:

    
      add_action('widgets_init', 'child_register_sidebar');

      function child_register_sidebar(){
        register_sidebar(array(
          'name' => 'Sidebar 2',
          'id' => 'sidebar-2',
          'before_widget' => '<div id="%1$s" class="widget %2$s">',
          'after_widget' => '</div>',
          'before_title' => '<h4 class="widgettitle">',
          'after_title' => '</h4>',
        ));
      }
    
  

Este código registrará una nueva barra lateral llamada ‘Sidebar 2’ con el id ‘sidebar-2’.

Paso 3: Agregar la nueva barra lateral a los archivos de plantilla

Para mostrar la nueva barra lateral en las páginas relevantes, deberás modificar los archivos de plantilla. Esto incluye ‘index.php’, ‘page.php’ y ‘single.php’.

Abre el archivo deseado (por ejemplo, ‘index.php’) y busca la siguiente línea:

    
      <div id="layout" class="pagewidth clearfix <?php echo $layout; ?>">
    
  

Después de esta línea, agrega el siguiente código para incluir la nueva barra lateral:

    
      <aside id="sidebar-2">
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-2') ) ?>
      </aside>
    
  

Puedes agregar o excluir este código en las plantillas relevantes según tus requisitos.

Paso 4: Estilizar la nueva barra lateral

Para personalizar la apariencia de la nueva barra lateral, abre el archivo ‘style.css’ en tu tema hijo y agrega el siguiente código CSS:

    
      #sidebar-2 {
        float: left;
        padding: 5% 0 3%;
        margin-right: 30px;
        width: 138px;
      }

      .sidebar-none #sidebar-2 {
        display: none;
      }

      #content {
        width: 528px;
      } 
    
  

Sientete libre de ajustar los valores CSS según tus preferencias de diseño.

Responsive

Si deseas asegurarte de que tu tema siga siendo responsive con la adición de dos barras laterales, también puedes incluir el siguiente código CSS:

    
      @media screen and (max-width: 980px) {
        #sidebar-2 {
          margin-right: 3%;
          max-width: 14%;
        }
        .sidebar1 #content {
          max-width: 54% !important;
        }
      }

      @media screen and (max-width: 760px) {
        #sidebar-2 {
          margin: 0;
          width: 100%;
          max-width: 100%;
          float: none;
          clear: both;
        }
        .sidebar1 #content {
          max-width: 100% !important;
        }
      }
    
  

Estas reglas CSS ayudarán a mantener la capacidad de respuesta en diferentes tamaños de pantalla.

Paso 5: Pasos finales

¡Ya casi terminas! Después de completar los pasos anteriores, ahora tendrás un área de widgets etiquetada como “Sidebar 2” en WP Admin > Apariencia > Widgets. Ahora puedes agregar widgets a esta área y se mostrarán en una barra lateral estrecha a la izquierda de tu contenido.

¡Eso es todo! Siguiendo estos pasos, has agregado exitosamente una barra lateral adicional a tu tema Themify. ¡Disfruta personalizando y mejorando el diseño y funcionalidad de tu sitio web!