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:

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:

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

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