---
title: "Zerif Lite: agregar una sección (tutorial actualizado para la versión de WP.org)"
url: https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/
date: 2017-05-07
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Como anticipamos hace unas semanas, algunos de los tutoriales dedicados al tema gratuito Zerif Lite, de ThemeIsle, han quedado desactualizados para la nueva versión que se descarga del repositorio de..."
categories:
  - "Zerif Lite"
tags:
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 2080
---

# Zerif Lite: agregar una sección (tutorial actualizado para la versión de WP.org)

Como anticipamos hace unas semanas, algunos de los tutoriales dedicados al tema gratuito **Zerif Lite**, de [**ThemeIsle**](https://caribdis.link/ThemeIsle), han quedado desactualizados para la nueva versión que se descarga del repositorio de **WordPress.** Aunque varios ya han sido ajustados para que apliquen en lo posible a ambas versiones, este que es el más complicado había quedado pendiente y requería una nueva entrada, por su extensión.

En este tutorial, vamos a aprender a crear una sección personalizada nueva para la página frontal, que llamaremos “Sección nueva”.

Podrá cambiar esta denominación al título que mejor se ajuste a sus necesidades, pero para estas instrucciones, simplemente recrearemos la sección “Características” que ya existe, y la colocaremos a continuación.

#### Paso 1:

En primer lugar, por favor asegúrese de que está usando un tema hijo de **Zerif.** Si ya tiene creado el tema hijo, salte al *Paso 2*.

La manera recomendada de crear un tema hijo para este tema es la siguiente:

Cree una carpeta en `/wp-content/themes/` denominada `/zerif-child/`. Cree un archivo nuevo en un editor de texto (por ejemplo, **[Notepad++](https://notepad-plus-plus.org/download/)**), con el nombre `functions.php`. Copie el siguiente código en este archivo y guárdelo en la carpeta `/zerif-child/`:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 99);
function child_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ));
}
if ( get_stylesheet() !== get_template() ) {
    add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
         update_option( 'theme_mods_' . get_template(), $value );
         return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
        return get_option( 'theme_mods_' . get_template(), $default );
    } );
}
?>
Cree otro archivo nuevo en la carpeta `/zerif-child/` con el nombre `style.css` y pegue el siguiente código:
/*
Theme Name:     Zerif Hijo
Theme URI:      https://wordpress.org/themes/zerif-lite/
Description:    Tema hijo de Zerif Lite, por ThemeIsle.
Author:         Caribdis.Net
Author URI:     https://caribdis.net/
Template:       zerif-lite
Version:        1.0
License:        GNU General Public License v2
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
*/
Podrá editar el nombre del tema, la descripción, el autor, la versión y las URI de acuerdo con sus necesidades. Solo asegúrese de que `Template` coincide con el nombre de la carpeta del tema padre.

Por último, cree un archivo en la carpeta `/zerif-child/` con el nombre `custom.css` (que se usará en caso de aplicar estilos personalizados).

Y como nunca está de más recordarlo, una vez creado, **activar** el tema hijo.

#### Paso 2:

Segundo, en la carpeta del tema hijo, cree una carpeta con el nombre `/sections/`. En esa carpeta, cree un archivo nuevo con el nombre `new_section.php`. Este será el archivo que mostrará el contenido para esta sección. Como ya mencionamos, para este ejemplo simplemente tomaremos como referencia la sección “Características”, por lo cual usaremos el mismo código HTML del archivo `our_focus.php` del tema padre. Por el momento, lo dejaremos como está.

#### Paso 3:

Aquí tendremos que añadir la sección nueva en la página frontal. Duplicaremos la sección “Nuestro enfoque”.

Copiamos el archivo `content-frontpage.php` a la carpeta del tema hijo y lo editamos de la siguiente manera:

Al final de esta porción de código:
    /* OUR FOCUS SECTION */

    $zerif_ourfocus_show = get_theme_mod('zerif_ourfocus_show');
    if( isset($zerif_ourfocus_show) && $zerif_ourfocus_show != 1 ):
    zerif_before_our_focus_trigger();
        get_template_part( 'sections/our_focus' );
    zerif_after_our_focus_trigger();
    endif;
Añadimos esto:
    /* SECCIÓN NUEVA */

    $zerif_newsection_show = get_theme_mod('zerif_newsection_show');
    if( isset($zerif_newsection_show) && $zerif_newsection_show != 1 ):
    get_template_part( 'sections/new_section' );
    endif;
De acuerdo con la posición donde queremos insertar la nueva sección, buscaremos el código encabezado por el título de la sección correspondiente. Por ejemplo, si queremos la nueva sección antes de *Quiénes somos,* pegaremos el código de `/* SECCIÓN NUEVA */` justo al final del código encabezado por `/* RIBBON WITH BOTTOM BUTTON */` y justo antes del código encabezado por `/* ABOUT US */`.

#### Paso 4:

En este punto, no se ve nada diferente, porque no hemos añadido la nueva sección al Personalizador. Este es el siguiente paso.

Ahora tendremos que abrir el archivo `functions.php` del tema hijo y añadir lo siguiente, antes del cierre de la etiqueta php `?>` (si lo hubiere):
/*******************************************/

/*************  NUEVA SECCIÓN  *************/

/*******************************************/

function caribdis_customizer( $wp_customize ) {
        $wp_customize->add_panel( 'panel_newsection', array(
            'priority' => 32,
            'capability' => 'edit_theme_options',
            'theme_supports' => '',
            'title' => __( 'Nueva Sección', 'zerif-lite' )
        ));
        $wp_customize->add_section( 'zerif_newsection_section' , array(
            'title'       => __( 'Contenido', 'zerif-lite' ),
            'priority'    => 1,
            'panel'       => 'panel_newsection',
            'description' => __( 'El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.', 'zerif-lite' )
        ));
        /* show/hide */

        $wp_customize->add_setting( 'zerif_newsection_show', array('sanitize_callback' => 'caribdis_sanitize_customizer'));
        $wp_customize->add_control(
            'zerif_newsection_show',
            array(
            'type' => 'checkbox',
            'label' => __('¿Ocultar nueva sección?','zerif-lite'),
            'section' => 'zerif_newsection_section',
            'priority'    => 1,
            )
        );
        /* new_section title */

        $wp_customize->add_setting( 'zerif_newsection_title', array('sanitize_callback' => 'caribdis_sanitize_customizer','default' => __('NUEVA SECCIÓN','zerif-lite')));
                
        $wp_customize->add_control( 'zerif_newsection_title', array(
            'label'    => __( 'Title', 'zerif-lite' ),
            'section'  => 'zerif_newsection_section',
            'settings' => 'zerif_newsection_title',
            'priority'    => 2,
        ));
        /* new_section subtitle */

        $wp_customize->add_setting( 'zerif_newsection_subtitle', array('sanitize_callback' => 'caribdis_sanitize_customizer','default' => __('Escriba la descripción de esta sección aquí.','zerif-lite')));
        $wp_customize->add_control( 'zerif_newsection_subtitle', array(
            'label'    => __( 'Subtítulo de la nueva sección', 'zerif-lite' ),
            'section'  => 'zerif_newsection_section',
            'settings' => 'zerif_newsection_subtitle',
            'priority'    => 3,
        ));
    }
    
add_action( 'customize_register', 'caribdis_customizer' );

function caribdis_sanitize_customizer( $input ) {
    return wp_kses_post( force_balance_tags( $input ) );
}

function caribdis_sanitize_checkbox( $input ) {
    if ( $input == 1 ) {
        return 1;
    } else {
        return '';
    }
}

function new_section_widgets() {
    register_sidebar( array(
        'name' => __( 'Barra lateral de nueva sección', 'zerif-lite' ),
        'id' => 'new-section-sidebar',
        'description' => __( 'Widgets para la nueva sección', 'zerif-lite' ),
        'before_widget' => '<div><aside>',
        'after_widget' => '</aside></div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

add_action( 'widgets_init', 'new_section_widgets' );

function zerif_newsection_header_title_function() {
    $zerif_newsection_title_default = get_theme_mod( 'zerif_newsection_title' );
    if( ! empty ( $zerif_newsection_title_default ) ) {
        $zerif_newsection_title = get_theme_mod( 'zerif_newsection_title_2', $zerif_newsection_title_default );
    } elseif ( current_user_can( 'edit_theme_options' ) ) {
        $zerif_newsection_title = get_theme_mod ( 'zerif_newsection_title_2', sprintf( '<a href="%1$s">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=zerif_newsection_title' ) ), __( 'Nueva sección','zerif-lite' ) ) );
    } else {
        $zerif_newsection_title = get_theme_mod ( 'zerif_newsection_title_2' );
    }
    if( !empty($zerif_newsection_title) ):
        echo '<h2>'.wp_kses_post( $zerif_newsection_title ).'</h2>';
    elseif ( is_customize_preview() ):
        echo '<h2></h2>';
    endif;
}

function zerif_newsection_header_subtitle_function() {
    if ( current_user_can( 'edit_theme_options' ) ) {
        $zerif_newsection_subtitle = get_theme_mod( 'zerif_newsection_subtitle', sprintf( __( 'Change this subtitle in %s','zerif-lite' ), sprintf( '<a href="%1$s">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=zerif_newsection_subtitle' ) ), __( 'Sección Nueva','zerif-lite' ) ) ) );
    } else {
        $zerif_newsection_subtitle = get_theme_mod( 'zerif_newsection_subtitle' );
    }
    if( !empty($zerif_newsection_subtitle) ):
        echo '<div>'.wp_kses_post( $zerif_newsection_subtitle ).'</div>';
    elseif ( is_customize_preview() ):
        echo '<div></div>';
    endif;
}

add_action( 'zerif_newsection_header_title', 'zerif_newsection_header_title_function' );
add_action( 'zerif_newsection_header_subtitle', 'zerif_newsection_header_subtitle_function' );
    
function zerif_newsection_header_title_trigger() {
    do_action( 'zerif_newsection_header_title' );
}

function zerif_newsection_header_subtitle_trigger() {
    do_action( 'zerif_newsection_header_subtitle' );
}
Ahora sí veremos la nueva sección en el *Personalizador*:

![Zerif Lite - Nueva sección en el Personalizador](https://caribdis.net/wp-content/uploads/2017/05/zerif-wp-nuevaseccion.png)

#### Paso 5:

El paso final es hacer la conexión entre la nueva sección en el archivo `functions.php` y el archivo `new_section.php` creado antes.

Para hacer esto, reemplazaremos todo el contenido del archivo `new_section.php` por el siguiente código:
<section>
    <div>
        <!-- SECTION HEADER -->
        <div>
            <!-- SECTION TITLE AND SUBTITLE -->
            <?php
            /* Title */

            zerif_newsection_header_title_trigger();
            /* Subtitle */

            zerif_newsection_header_subtitle_trigger();
            ?>
        </div>
        <div>
                <?php
                if ( is_active_sidebar( 'new-section-sidebar' ) ) {
                    dynamic_sidebar( 'new-section-sidebar' );
                } else echo 'Añada algunos widgets aquí';
                ?>
        </div>
    </div> <!-- / END CONTAINER -->
</section>  <!-- / END NEW SECTION -->
Con este último paso, podremos ver el área de widgets para la nueva sección en el Personalizador:

![](https://caribdis.net/wp-content/uploads/2017/05/zerif-wp-nuevaseccion-widgets.png)

Los widgets que coloquemos en esta sección se repartirán en cuatro columnas.

![Zerif - Widgets en la nueva sección](https://caribdis.net/wp-content/uploads/2017/05/zerif-wp-nuevaseccion-widgets2.png)

**Para tener en cuenta:** con esta configuración no se podrán usar los widgets destinados a otras secciones de **Zerif**, tales como *Testimonios*, *Enfoque* o *Quiénes somos*.

En caso de necesitar tres, dos o una única columna, tendremos que buscar la siguiente línea de código en el archivo `functions.php`:
'before_widget' => '<div><aside>',
Y reemplazar el valor de la clase `"col-lg-3"` por: `"col-lg-4"` para tres columnas; `"col-lg-6"` para dos columnas, y `"col-lg-12"` para una columna.

Por otro lado, es posible usar los widgets de *Zerif - Nuestro enfoque*, y solo tendremos que modificar las siguientes líneas:
'before_widget' => '<div><aside>',
'after_widget' => '</aside></div>',
Por:
'before_widget' => '<span>',
'after_widget' => '</span>',
![Zerif - Widgets de "Nuestro enfoque" en la nueva sección](https://caribdis.net/wp-content/uploads/2017/05/zerif-wp-nuevaseccion-widgets-focus.png)

Para concluir, dejo a disposición el tema hijo, con los archivos modificados tal como se explica en este tutorial: [descargar](https://caribdis.net/downloads/caribdis.net-zerif-child.zip). (Instalar desde *Apariencia > Temas > Añadir nuevo > Subir tema*).

**** Nota importante:** este tutorial, así como el `.zip` del tema hijo funcionarán únicamente en una instalación "limpia" de **Zerif Lite**. Esto es, si se ha añadido desde el administrador de **WordPress** a partir de la versión 1.8.5.9 en adelante.

Si se está usando una versión actualizada desde 1.8.5.8 o inferiores, se deberá añadir además el archivo `front-page.php` a la carpeta del tema hijo con el siguiente contenido:
<?php get_header();
    if( zerif_check_if_old_version_of_theme() ) {
        get_template_part( 'content','frontpage' );
    } else {
        if( ! zerif_check_if_old_version_of_theme() ) {
            $blog_header_title = get_theme_mod( 'zerif_blog_header_title', esc_html__( 'Blog', 'zerif-lite' ) );
            $blog_header_subtitle = get_theme_mod( 'zerif_blog_header_subtitle', esc_html__( 'Zerif supports a custom frontpage', 'zerif-lite' ) );
            if ( ! empty( $blog_header_title ) || ! empty( $blog_header_subtitle ) ) { ?>
                <div>
                    <div>
                        <?php if ( ! empty( $blog_header_title ) ) { ?>
                            <h1><?php echo esc_html( $blog_header_title ); ?></h1>
                        <?php }
                        if ( ! empty( $blog_header_subtitle ) ) { ?>
                            <p><?php echo esc_html( $blog_header_subtitle ); ?></p>
                        <?php } ?>
                    </div>
                </div>
                <?php
            }
        }
        ?>
            <div></div>
            </header> <!-- / END HOME SECTION  -->
            <?php zerif_after_header_trigger(); ?>
            <div>
                <div>
                    <div>
                        <div>
                            <main itemscope itemtype="http://schema.org/Blog">
                                <?php
                                if ( have_posts() ) :
                                    while ( have_posts() ) : the_post();
                                        get_template_part( 'content', get_post_format() );
                                    endwhile;
                                    echo get_the_posts_navigation( array( 'next_text' => sprintf( __( 'Newer posts %s','zerif-lite' ), '<span>&rarr;</span>' ), 'prev_text' => sprintf( __( '%s Older posts', 'zerif-lite' ) , '<span>&larr;</span>' ) ) );
                                else :
                                    get_template_part( 'content', 'none' );
                                endif;
                                ?>
                            </main><!-- #main -->
                        </div><!-- #primary -->
                    </div><!-- .content-left-wrap -->
                    <?php zerif_sidebar_trigger(); ?>
                </div><!-- .container -->
            <?php
    }
get_footer(); ?>
El archivo está incluido en el `.zip` como `_front-page.php`; renombrarlo a `front-page.php` de ser necesario.