Para mi esta es una de las apuestas del futuro de WordPress poder cambiar tu tema en tiempo real y ver como va quedando de manera visual sin necesidad de plugins, no todos los temas están orientados y adaptados para esto pero empieza a haber un gran interés por esto y en la nueva versión 4.5 WordPress sacara nuevas opciones para poder ver como queda y muchas mejoras para los desarrolladores.

Como decía el que un tema este o no desarrollado para Theme Customization dependerá de la persona que lo desarrolla. Aun le falta mucho para poder hacer lo que hacen los grandes temas solo con Theme Customization pero poco a poco van mejorando.

Elementos que tenemos en nuestra API para trabajar con el personalizador de temas:

• Panels
• Sections
• Settings
• Controls

Los Panels son el primer nivel y sirven para agrupar Sections. Podríamos decir que son las categorías de secciones que tenemos o la primera linea a mostrar, así que dentro de un Panel tenemos varias Sections.

Las Sections nos sirven para agrupar Settings o variables.

Las Settings son las variables que queremos guardar o modificar en nuestros Sections. Esto es lo realmente interesante poder cambiar cosas como el  titulo del sitio , código css personalizado, con sidebar o sin sidebar, forma de mostrar el contenido y que lo veas en tiempo real.

Y los Controls la forma de representarlos.

Introdución

Lo mejor para empezar es crearte un php e incluirlo en functions.php  porque el codigo para generar opciones en la parte de customizer es bastante amplio.

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

Ejemplo de Panels

Para crear un panel usamos la funcion add_panel

panel_id es nuestro identificador de panel que luego usaremos en secciones y en otros sitios de esta forma cuando añadamos una sección tendremos que indicarle donde vamos a agruparlo.

$wp_customize->add_panel( 'panel_id', array(
    'title'          => '',
    'description'    => '',   
    'priority'       => 10,
    'capability'     => 'edit_theme_options',
    'theme_supports' => '',   
) );

Una cosa importante los paneles, secciones no se ven hasta que tengáis campos añadidos.

Ejemplo de Sections

Ahora vamos a crear una nueva seccion para ello como antes tenemos que indicarle un id_section.  Tambien debemos indicarle el panel donde debe añadirse.

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

Ejemplo de Settings y Control

En este ejemplo añadimos un settings y un control.

 //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',
  ));

Ejemplo básico completo.

Esta captura corresponde con el codigo de abajo. En este ejemplo creamos :

• Un panel
• Una sección
• Dos campos un tipo text y un textarea

function magazine_theme_customize_register( $wp_customize ) {
  $wp_customize->add_panel( 'demo_panel', array(
    'title' => __( 'Esta es una demo', 'textdomain' ),
	'description' => __( 'Aqui podemos mostrar un mensaje', 'textdomain' ),
    'priority' => 160,
    'capability' => 'edit_theme_options',
  ));
  // Primera seccion
  $wp_customize->add_section( 'primera_seccion' , array(
    'title' => __( 'Primera Seccion', 'textdomain' ),
    'panel' => 'demo_panel',
    'priority' => 1,
    'capability' => 'edit_theme_options',
  ));
  
  // Segunda Seccion
  $wp_customize->add_section( 'segunda_seccion' , array(
    'title' => __( 'Segunda Seccion', 'textdomain' ),
    'panel' => 'demo_panel',
    'priority' => 2,
    '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',
  ));
    
}
add_action( 'customize_register', 'magazine_theme_customize_register' );