Primeros pasos con Theme Customization API de WordPress

Estoy empezando a crear un Tema de WordPress desde cero y para ello necesito añadir nuevas opciones al al panel de personalización. Para esto, estoy utlizando Theme Customization API. Hoy vamos a ver como añadir una sección personalizada a la página de inicio.

Lo primero, vamos a añadir una función al archivo functions.php.

function theme_customize_register( $wp_customize ) {
// aqui incluiremos el codigo
}
add_action( 'customize_register', 'theme_customize_register' );

 

Lo primero que vamos a hacer, es añadir un panel llamado servicios a las opciones de personalización del tema. Los paneles son esto:

paneles theme options

Para añadir el panel de servicios, añadimos este código a la función anterior:

$wp_customize->add_panel( 'servicios', array(
'title' => __( 'Servicios', 'textdomain' ),
'description' => __( 'Aqui podemos mostrar un mensaje', 'textdomain' ),
'priority' => 160,
'capability' => 'edit_theme_options',
));

 

Ahora vamos añadir una sección al panel de servicios que conste de una caja de texto y una textarea

$wp_customize->add_section( 'primera_seccion' , array(
'title' => __( 'Primera Seccion', 'textdomain' ),
'panel' => 'servicios',
'priority' => 1,
'capability' => 'edit_theme_options',
));

//Campo de texto
$wp_customize->add_setting( 'campo_texto', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
));

$wp_customize->add_control('campo_texto', array(
'label' => __( 'Ejemplo input', 'textdomain' ),
'section' => 'primera_seccion',
'priority' => 1,
'type' => 'text',
));

//Campo textarea
$wp_customize->add_setting( 'campo_textarea', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
));

$wp_customize->add_control('campo_textarea', array(
'label' => __( 'Ejemplo textarea', 'textdomain' ),
'section' => 'primera_seccion',
'priority' => 1,
'type' => 'textarea',
));

 

Con este código, ahora en la parte de personalización de nuestro tema, encontraremos esto:

contenido-servicios

Ahora nos queda mostrar la información que meta el usuario en caja de título y contenido, en la parte de nuestro tema WordPress que queramos y con el formato que queramos.

Supongamos que queremos añadirlo en la página de inicio de nuestro tema, debajo de la cabecera. En mi caso el fichero que gestiona la página de inicio es full-width.php y está dentro de una carpeta llamada page-templates

Para traer el contenido usaremos la función get_theme_mod()

<?php /* Template Name: Anchura completa, sin barra lateral */ ?>

<?php get_header(); ?>
<main class="wrap">

<?php
$text = get_theme_mod('campo_texto');
$textarea=get_theme_mod('campo_textarea');
?>

<h1><?php echo $text; ?></h1>
<p><?php echo $textarea; ?></p>

<section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>get-theme-mod
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>

 

Ahora si que veremos ya el contenido dela sección Servicios 1 en nuestra página

get-theme-mod

Os iré contando mis avances con esta API de WordPress.

4 comentarios sobre “Primeros pasos con Theme Customization API de WordPress

  1. POM Contestar

    buenas noches tengo un pregunta

    si tengo mi zigcy y cree el hijo zigcy-child,

    ¿Es correcto hacer lo siguiente?
    1. copiar el archivo customizer-lite-customizer.php al tema hijo
    2. trabajar con el archivo que copie en el tema hijo para agregar secciones ?

    no estoy modificando el tema original, sino el hijo.

    • raul Autor del artículoContestar

      Buenas,
      correcto. Tendrás que replicar la ruta del fichero en el tema hijo.

      Un saludo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *