Crear una página de configuración para tu tema de WordPress

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Crear tu propio tema para WordPress es una excelente forma de dar a tu blog u otro sitio web construido con WordPress un toque original. Pero hasta el tema más bonito no será tan agradable si te obliga a meterte en sus entrañas y editar su código HTML o PHP cada vez que necesites cambiar algunos de sus aspectos. Esto es especialmente cierto cuando no se trata de ti, sino de un cliente que ha pagado por usar tu tema. Por suerte, crear una página de configuración para tu tema en WordPress no es muy difícil, y después de leer este tutorial, ¡serás capaz de crearla en un momento!

Paso 1 Decidir qué ajustes son necesarios

Todo empieza a partir de las necesidades: para crear una página de configuración clara y útil, tienes que averiguar qué cosas tendrán que ser modificadas y dejar fuera todo lo demás. Cada nueva configuración que añadas a los menús de administración agregará complejidad a la interfaz de usuario y corres el riesgo de hacer que el tema sea más difícil de usar. Por eso es mejor tener cuidado y elegir cuidadosamente las opciones que se cambiarán a menudo dejando fuera personalizaciones que se suelen realizar una única vez, ya que estas pueden hacerse fácilmente cambiando un archivo dentro del tema.

Otra pregunta a tener en cuenta es "¿Quién va a cambiar estos ajustes?" Si el usuario está familiarizado con PHP y WordPress, podría ser razonable esperar que esté de acuerdo con incrustar su código de Google Analytics él mismo en el código del tema, pero no deberías requerirle esto a un diseñador gráfico, por no hablar de un escritor que ni siquiera necesita saber nada sobre HTML ni CSS.

Entre las ideas habituales sobre las cosas a definir en la configuración del tema se incluyen:

El código de seguimiento del sitio de Google Analytics
El número de barras laterales o sidebars y su ubicación (izquierda, derecha, tal vez incluso arriba y abajo)
La anchura de la página
El contenido de tu pie de página
Opciones para características específicas del tema, como formatos personalizados de destacados.

Una vez hayas recopilado la lista de características del tema que deseas controlar a través de una página de configuración, estás casi preparado para iniciar la implementación. Antes de seguir adelante y crear tu página de configuración, puedes ahorrar tiempo asegurándote de que no existe ya una función de WordPress disponible para la personalización que tengas en mente. Para crear tus propios ajustes, los widgets, menús personalizados, fondos personalizados e imágenes de cabecera son útiles herramientas para hacer que tu tema sea personalizable con mucho menos esfuerzo del necesario. Sin embargo, son asuntos para un tutorial diferente.

Ajustes creados en este tutorial

Para este tutorial, soñé con una página para el front-page de este tema que consiste en una cuadrícula con un número variable de entradas destacadas que el administrador pueda seleccionar, editar y reordenar mediante una página de configuración personalizada.

En el editor, los elementos de la primera página se presentarán como una lista de elementos a los que se pueden añadir otros nuevos mediante JavaScript y jQuery.

Me gustaría poder previsualizar la página de administración en el administrador de WordPress mientras diseño el HTML, por lo que normalmente empiezo por vincular una página de configuración a WordPress, y sólo después paso al diseño del contenido de la página. Por eso, nuestro siguiente paso consiste en crear una página de configuración de marcador de posición y enlazarla a WordPress.

Paso 2 Enganchar la página de configuración a WordPress

La creación de una página de configuración empieza por la creación de una función que configura el menú y que después conectamos a la acción de WordPress admin_menu. Esto le indica a WordPress que llame a tu función cuando llegue el momento de crear los menús para que todo se haga en el momento adecuado. Añade este código al archivo functions.php de tu tema:

function setup_theme_admin_menus() {
    // We will write the function contents very soon.
}

// This tells WordPress to call the function named "setup_theme_admin_menus"
// when it's time to create the menu pages.
add_action("admin_menu", "setup_theme_admin_menus");

Ahora pondremos el código para crear las páginas de configuración dentro de la función que acabamos de crear.

Al crear tu página de configuración, tienes la opción de añadir la página como un submenú a uno de los grupos de configuración existentes ya o crear tu propio menú de nivel superior.

La adición de un submenú se realiza con la función add_submenu_page:

1	<?php add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function) ?>

$parent_slug es un identificador único para la página de menú superior a la que se añade este submenú como elemento secundario.
$page_title es el título de la página que va a ser añadida
$menu_title es el título que se mostrará en el menú (a menudo una versión más corta de $page_title
$capability es la capacidad mínima requerida de un usuario para tener acceso a este menú.
$menu_slug es un identificador único para el menú que se está creando
$function es el nombre de una función que es llamada para controlar (y representar) esta página de menú

Si eliges añadir la página de menú como un submenú a uno de los grupos de WordPress, puedes utilizar los siguientes valores pata el parámetro $parent_slug:

Escritorio: index.php
Entradas: edit.php
Medios: upload.php
Enlaces: link-manager.php
Páginas: edit.php?post_type=page
Comentarios: edit-comments.php
Apariencia: themes.php
Plugins: plugins.php
Usuarios: users.php
Herramientas: tools.php
Ajustes: options-general.php

El grupo Apariencia parece un buen candidato para colocar nuestra página de configuración. Vamos a probar esto, y crear nuestra primera página de configuración. Aquí hay una versión actualizada de nuestra función de configuración del menú:

function setup_theme_admin_menus() {
    add_submenu_page('themes.php', 
        'Front Page Elements', 'Front Page', 'manage_options', 
        'front-page-elements', 'theme_front_page_settings'); 
}

Todavía necesitamos crear la función theme_front_page_settings para que esto funcione. Aquí está en su forma más simple:

1	function theme_front_page_settings() {
2	echo "Hello, world!";
3	}

Y así es como se ve en acción:

También necesitamos comprobar que el usuario tenga los derechos necesarios para editar la página de configuración. Para ello, añade el siguiente código al principio de la función de la página de configuración:

1	// Check that the user is allowed to update options
2	if (!current_user_can('manage_options')) {
3	wp_die('You do not have sufficient permissions to access this page.');
4	}

Ahora, si un usuario al que no se le permite administrar opciones llega a la página de configuración, no verá nada más que el mensaje, "No tienes suficientes permisos para acceder a esta página."

Si tu tema necesita varias páginas de configuración, puede resultar confuso para el usuario tener que buscarlas dispersas entre toda la estructura del menú. En ese caso, crear tu propio grupo de configuración le facilitará la localización de todas las páginas del menú del tema.

Para añadir tu propio grupo de configuración, debes crear una página de menú de nivel superior y vincular a ella las páginas del submenú. Aquí tienes una nueva versión de nuestra función de configuración de menú. La función add_menu_page utilizada para crear el menú de nivel superior es similar a add_submenu_page excepto que no toma el parámetro $parent_slug.

function setup_theme_admin_menus() {
    add_menu_page('Theme settings', 'Example theme', 'manage_options', 
        'tut_theme_settings', 'theme_settings_page');
    	
    add_submenu_page('tut_theme_settings', 
        'Front Page Elements', 'Front Page', 'manage_options', 
        'front-page-elements', 'theme_front_page_settings'); 
}

// We also need to add the handler function for the top level menu
function theme_settings_page() {
    echo "Settings page";
}

Si pruebas el código y actualizas el administrador de WordPress, verás que tu nuevo grupo de menús aparece en la parte inferior de la lista de menús:

Pero algo no tiene aún buen aspecto. Al hacer clic en el elemento del menú superior no te llevará al menú "Front page", sino a una página de menú llamada "Example theme". Esto no es consistente con la forma en la que funcionan el resto de menús de WordPress, así que vamos a hacer una cosa más: cambiando el atributo $menu_slug en la llamada add_submenu_page al mismo valor que en el menú de nivel superior, podemos vincular los dos menús para que al seleccionar el menú superior se seleccione el menú de la página principal:

function setup_theme_admin_menus() {
    add_menu_page('Theme settings', 'Example theme', 'manage_options', 
        'tut_theme_settings', 'theme_settings_page');
    	
    add_submenu_page('tut_theme_settings', 
        'Front Page Elements', 'Front Page', 'manage_options', 
        'tut_theme_settings', 'theme_front_page_settings'); 
}

function theme_settings_page() {

}

Tiene mejor aspecto. Si aún deseas mejorar más el aspecto de tu grupo de menús, hay dos campos opcionales en la función add_menu_page que te resultarán útiles. Sólo tienes que añadir los valores después del nombre de la función en la llamada al método:

$icon_url especifica la dirección URL de un icono para el menú de nivel superior.
$position especifica la posición del grupo de menús en el listado de menús de WordPress. Cuanto mayor sea el valor, inferior será la posición en el menú.

Paso 3 Crear el formulario HTML para las páginas de configuración

Ahora que hemos creado la página de configuración, y que tiene muy buen aspecto en el menú lateral, es el momento de empezar a añadir algo de contenido. Por lo tanto, volvamos a la lista de ajustes que teníamos en mente, y esbocemos una página para editarlos.

En este tutorial, necesitamos un campo para definir cuántos elementos se deben enumerar en una fila, y una lista para definir los elementos reales. Para empezar con lo más fácil, vamos a crear un campo de texto para el número de elementos en una fila. Edita la función de la página de configuración:

function theme_front_page_settings() {
?>
    <label for="num_elements">
        Number of elements on a row:
    </label> 
    
    <input type="text" name="num_elements" />
<?php
}

Cuando vuelvas a cargar la página de configuración, verás que aparece el primer campo de configuración:

Para hacer que la página de configuración encaje perfectamente en la experiencia de WordPress y para darle a tu plugin un toque profesional, es recomendable utilizar las clases y estilos CSS que utiliza WordPress en sus propias páginas de configuración. Una buena manera de aprender los trucos es simplemente seguir adelante y analizar el código fuente de WordPress.

Lo más importante es envolver la página de configuración con un div con la clase "wrap". Dentro de ese elemento div, puedes utilizar muchos estilos predefinidos, como encabezados, botones y campos de formulario. Comencemos por estilizar el título de nuestra página de configuración:

Vamos a crear un encabezado h2 para la página (puedes utilizar las etiquetas de encabezado desde h2 a h6 para crearlos con diferentes tamaños.)
Vamos a mostrar el icono de la página de configuración del tema antes del encabezado. (Puedes utilizar los iconos predefinidos de WordPress con la función screen_icon. La función puede tomar uno de los siguientes parámetros: index, edit, upload, link-manager, pages, comments, themes, plugins, users, tools u options-general.)
Colocaremos el elemento de entrada input dentro de un formulario y una tabla con la clase form-table.

function theme_front_page_settings() {
?>
    <div class="wrap">
        <?php screen_icon('themes'); ?> <h2>Front page elements</h2>

        <form method="POST" action="">
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">
                        <label for="num_elements">
                            Number of elements on a row:
                        </label> 
                    </th>
                    <td>
                        <input type="text" name="num_elements" size="25" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
<?php
}

A continuación, es el momento de empezar a añadir los elementos.

Para hacer esto, usaremos jQuery ya que hace las cosas mucho más fáciles que escribir JavaScript desde cero, y viene incluido con WordPress. Si has utilizado antes jQuery, sólo hay una cosa a tener en cuenta: la notación $ que normalmente usarías con jQuery no funciona en WordPress, tienes que escribir toda la palabra, jQuery en su lugar.

En primer lugar, crearemos el elemento para editar el ajuste de un bloque de la página principal para que sirva como plantilla para los elementos que añada el usuario. Añade este código justo entre la etiqueta de cierre de la tabla y la etiqueta de cierre de formulario que viene justo después de ella.

<?php $posts = get_posts(); ?>

<li class="front-page-element" id="front-page-element-placeholder">
    <label for="element-page-id">Featured post:</label>
    <select name="element-page-id">
        <?php foreach ($posts as $post) : ?>
            <option value="<?php echo $post-<ID; ?>">
                <?php echo $post-<post_title; ?>
            </option>
        <?php endforeach; ?>
    </select>
    <a href="#">Remove</a>
</li>

Ahora, se ve así:

Ahora que tenemos nuestra plantilla, es hora de ocultarla y crear el JavaScript que usaremos para crear nuevas filas de entradas destacadas en la página de configuración. Establece el estilo del elemento li anterior a display:none;

1	<li class="front-page-element" id="front-page-element-placeholder" style="display:none">

A continuación, crearemos una lista que contenga los elementos de la página principal a medida que sean agregados y un vínculo en el que el usuario hará clic para añadir nuevos elementos. Estoy repitiendo todo el HTML para que puedas ver claramente dónde están los cambios:

<div class="wrap">
    <?php screen_icon('themes'); ?> <h2>Front page elements</h2>

    <form method="POST" action="">
        <table class="form-table">
            <tr valign="top">
                <th scope="row">
                    <label for="num_elements">
                        Number of elements on a row:
                    </label>
                </th>
                <td>
                    <input type="text" name="num_elements" size="25" />
                </td>
            </tr>                
        </table>

        <h3>Featured posts</h3>

        <ul id="featured-posts-list">
        </ul>
      
        <input type="hidden" name="element-max-id" />

        <a href="#" id="add-featured-post">Add featured post</a>   
    </form>
    
    <li class="front-page-element" id="front-page-element-placeholder" 
        style="display:none;">
        <label for="element-page-id">Featured post:</label>
        <select name="element-page-id">
            <?php foreach ($posts as $post) : ?>
                <option value="<?php echo $post->ID; ?>">
                    <?php echo $post->post_title; ?>
                </option>
            <?php endforeach; ?>
        </select>
        <a href="#">Remove</a>
    </li>

</div>

En un tema de la vida real es una buena práctica poner tu código JavaScript en un archivo independiente, pero para hacer este tutorial un poco más sencillo de seguir, ahora estoy añadiendo el JavaScript en la misma función junto con el HTML anterior, justo antes del div wrap:

<script type="text/javascript">
    var elementCounter = 0;
    jQuery(document).ready(function() {           
        jQuery("#add-featured-post").click(function() {
            var elementRow = jQuery("#front-page-element-placeholder").clone();
            var newId = "front-page-element-" + elementCounter;
               
            elementRow.attr("id", newId);
            elementRow.show();
               
            var inputField = jQuery("select", elementRow);
            inputField.attr("name", "element-page-id-" + elementCounter); 
                
            var labelField = jQuery("label", elementRow);
            labelField.attr("for", "element-page-id-" + elementCounter); 

            elementCounter++;
            jQuery("input[name=element-max-id]").val(elementCounter);
                
            jQuery("#featured-posts-list").append(elementRow);
               
            return false;
        });         
    });
</script>

El código JavaScript anterior crea una función que es invocada cuando el usuario hace clic en el vínculo con el id add-featured-post. Esta función clona el elemento de lista de la plantilla que creamos anteriormente y actualiza sus campos para que tengan identificadores y nombres únicos. De esta manera, todos ellos serán enviados correctamente junto con el formulario cuando el usuario haga clic en enviar. La variable variableCounter contiene el siguiente identificador que va a ser añadido. También se guarda en un campo oculto para que cuando se envíe el formulario, sepamos cuántos elementos esperar de la primera página.

Si haces clic en el enlace "Add featured post" (Añadir entrada destacada) un par de veces, verá cómo se añaden nuevos elementos a la lista:

Pero al hacer clic en el enlace de eliminación, te darás cuenta de que no pasa nada. Vamos a añadir una función para eliminar elementos de la lista:

1	function removeElement(element) {
2	jQuery(element).remove();
3	}

También necesitamos invocar a la función. Añade el siguiente código justo antes de incrementar elementCounter.

1	var removeLink = jQuery("a", elementRow).click(function() {
2	removeElement(elementRow);
3	return false;
4	});

Antes de pasar a guardar el formulario, hay que hacer una cosa más. Usaremos el plugin jQuery ui.sortable para hacer que los elementos de la primera página se puedan ordenenar arrastrándolos en la página. Para habilitar la funcionalidad de ordenación, necesitaremos incluir el archivo JavaScript adecuado (que también viene incluido con WordPress). Esto se puede hacer añadiendo la siguiente línea de código al final de functions.php:

1	if (is_admin()) {
2	wp_enqueue_script('jquery-ui-sortable');
3	}

A continuación, añadiremos el siguiente JavaScript justo antes (o después) de la función jQuery("#add-featured-post").click definida anteriormente.

jQuery("#featured-posts-list").sortable( {
    stop: function(event, ui) {
        var i = 0;

        jQuery("li", this).each(function() {
            setElementId(this, i);                    
            i++;
        });
                    
        elementCounter = i;
        jQuery("input[name=element-max-id]").val(elementCounter);
    }
});

Este fragmento de código hace que la lista se pueda ordenar y añade un evento que es invocado cada vez que el usuario termina de ordenar. El controlador de eventos actualiza todos los identificadores de los elementos para que el nuevo orden se conserve también al guardar el formulario (esto quedará más claro una vez implementemos el guardado). Al escribir este controlador de detención, me di cuenta de que el código para establecer el id para el contenido de la plantilla se duplicó en dos lugares, así que lo refactoricé en su propia función, la cual coloqué justo delante de la línea con jQuery(document).ready():

function setElementId(element, id) {
    var newId = "front-page-element-" + id;    
                     
    jQuery(element).attr("id", newId);               
               
    var inputField = jQuery("select", element);
    inputField.attr("name", "element-page-id-" + id); 
                
    var labelField = jQuery("label", element);
    labelField.attr("for", "element-page-id-" + id); 
}

Con la adición de nuevos elementos, ordenarlos y eliminarlos trabajando, es hora de pasar al almacenamiento de los datos. Pero antes de esto, añade un botón de envío justo antes de la etiqueta de cierre del formulario.

1	<p>
2	<input type="submit" value="Save settings" class="button-primary"/>
3	</p>

Paso 4 Guardar el formulario

La página de configuración se ve bien, pero falta algo: todavía no hace nada. Es hora de guardar algunos datos. WordPress proporciona un sencillo sistema para guardar la configuración de temas y plugins como pares de valores clave en la base de datos utilizando dos funciones: get_option y update_option. Los datos almacenados mediante las funciones pueden ser tan simples como un valor numérico o tan complejos como una matriz anidada varias veces.

El control del formulario se realiza en la misma función que renderiza el formulario. Para saber si un formulario se ha sido enviado o no, añadimos un campo oculto, update_settings al formulario y, a continuación, comprobamos si ese campo se envió o no en la función de manipulación.

1	if (isset($_POST["update_settings"])) {
2	// Do the saving
3	}

El campo oculto que va dentro del formulario tiene este aspecto:

1	<input type="hidden" name="update_settings" value="Y" />

Comencemos guardando la configuración más sencilla, num_elements. Sustraeremos el atributo para asegurarnos de que el usuario no está enviando contenido malicioso en forma de etiquetas HTML y luego lo guardaremos en el almacenamiento de la configuración de WordPress. Al usar update_option, no tenemos que preocuparnos de si la configuración ya se ha guardado o no.

1	$num_elements = esc_attr($_POST["num_elements"]);
2	update_option("theme_name_num_elements", $num_elements);

Antes de pasar a guardar la lista, vamos a añadir el valor actual de num_elements al formulario de configuración para que el usuario siempre vea qué valor ha introducido antes de decidir el siguiente valor. Esto también nos ayudará a comprobar que el valor fue realmente guardado.

1	<input type="text" name="num_elements" value="<?php echo $num_elements;?>" size="25" />

Y para los casos en los que aún no hayamos guardado nada, tendremos que cargar el valor actual de las opciones, así que vamos a añadir este fragmento de código que se ejecutará cuando no haya ningún formulario enviado.

1	$num_elements = get_option("theme_name_num_elements");

Cuando se guarda un formulario, es importante notificar al usuario para que no se quede preguntándose si sucedió algo o no. Por lo tanto, vamos a renderizar un simple aviso que diga "Configuración guardada". justo después de update_option:

1	?>
2	<div id="message" class="updated">Settings saved</div>
3	<?php

A continuación, guardemos los elementos de la primera página. El valor de id más alto en los elementos de la página principal se pasa como element-max-id, por lo que podemos tomar ese valor y recorrer los elementos hasta ese identificador, guardando sus datos en una matriz en el orden correcto:

$front_page_elements = array();
        
$max_id = esc_attr($_POST["element-max-id"]);
for ($i = 0; $i < $max_id; $i ++) {
    $field_name = "element-page-id-" . $i;
    if (isset($_POST[$field_name])) {
        $front_page_elements[] = esc_attr($_POST[$field_name]);
    }
}
        
update_option("theme_name_front_page_elements", $front_page_elements);

Esto guarda los datos, pero todavía tenemos que presentar los valores en la página de configuración. Por lo tanto, vamos a hacer lo mismo que con el campo num_elements y cargar las opciones predeterminadas al principio de la función:

1	$front_page_elements = get_option("theme_name_front_page_elements");

Y luego, renderiza los elementos existentes al hacer el formulario:

<?php $element_counter = 0; foreach ($front_page_elements as $element) : ?>
    <li class="front-page-element" id="front-page-element-<?php echo $element_counter; ?>">
        <label for="element-page-id-<?php $element_counter; ?>">Featured post:</label>
        <select name="element-page-id-<?php $element_counter; ?>">
                    
        <?php foreach ($posts as $post) : ?>
            <?php $selected = ($post->ID == $element) ? "selected" : ""; ?>
            <option value="<?php echo $post->ID; ?>" <?php echo $selected; ?>>
                <?php echo $post->post_title; ?>
            </option>
        <?php endforeach; ?>
            
        </select>

        <a href="#" onclick="removeElement(jQuery(this).closest('.front-page-element'));">Remove</a>
    </li>
           
<?php $element_counter++; endforeach; ?>

También necesitamos establecer el valor inicial para la variable elementCounter utilizada en JavaScript estableciendo el valor inicial del campo oculto en PHP y leyéndolo al inicializar la variable JavaScript:

1	<input type="hidden" name="element-max-id" value="<?php echo $element_counter; ?>" />

Y la parte de JavaScript:

1	var elementCounter = jQuery("input[name=element-max-id]").val();

Paso 5 Usar la configuración dentro del tema

Guardar y mostrar los valores de configuración dentro del área de administración es genial, pero lo que realmente cuenta es cómo los usas para personalizar tu tema, así que ahora, hemos llegado al momento de tomar nuestros ajustes y hacer algo genial con ellos.

A partir de ahora, los cambios van a index.php en lugar de functions.php. En primer lugar, leeremos las opciones de las variables:

1	<?php
2	$num_elements = get_option("theme_name_num_elements");
3	$elements = get_option("theme_name_front_page_elements");
4	?>

Vamos a recorrer en bucle la lista de $elements, agrupándolos cada uno en filas con bloques $num_elements.

<div id="front-page-element-container">

    <div class="front-page-element-row">
        <?php foreach($elements as $post_id) : ?>
            <?php if ($num == $num_elements) : ?>
                </div>
                <div class="front-page-element-row">
            <?php endif; ?>

            <!-- Render element here -->
                    
        <?php endforeach; ?>
    </div>

</div>

Y luego, usando los datos guardados para cada elemento, rellenaremos la parte de representación del elemento anterior:

<?php $element_post = get_post($post_id); ?>

<div class="front-page-element">
    <div class="thumbnail-image">
        <?php if (has_post_thumbnail($post_id)) : ?>
            <?php echo get_the_post_thumbnail($post_id, 'tutorial-thumb-size'); ?>
        <?php endif; ?>

        <a class="title" href="<?php echo get_permalink($post_id); ?>"><?php echo $element_post->post_title;?></a>
    </div>
</div>

Con un par de elementos, se ve así:

Todavía bastante aburrido. Las entradas no tienen imágenes en miniatura y no existe estilo para ellas. Para que tengan mejor aspecto, primero añadiremos soporte para publicar imágenes en miniatura. Esto se hace enganchando una nueva función que configura las características del tema que serán invocadas justo después de que el tema haya sido cargado

function setup_theme_features() {
    if (function_exists('add_theme_support')) {
        add_theme_support('post-thumbnails');
    }

    if (function_exists("add_image_size")) {
        add_image_size('tutorial-thumb-size', 200, 200, true);
    }
}

add_action('after_setup_theme', 'setup_theme_features');

La función, setup_theme_features activa las miniaturas de entrada usando la función de WordPress add_theme_support para que WordPress añada esta funcionalidad a la página de guardado de entradas. En la página de la entrada, ahora podemos añadir una imagen como miniatura haciendo clic en "Usar como imagen destacada" en la página de carga de la imagen que obtenemos tras subir la foto.

La función también define un nuevo tipo de tamaño de imagen, tutorial-thumb-size que se utiliza al obtener la miniatura de entrada en el código de representación.

Después de seleccionar la imagen destacada, guarda los cambios y vuelve a cargar la página principal. Ya se ve más interesante:

Por último, añadiremos algunos estilos a style.css, y ahí vamos, el tema tiene una pantalla de entradas destacadas configurables:

.front-page-element-row {
    overflow: auto;
}

.front-page-element {
    float: left;
    margin: 10px 10px 10px 10px;
    padding: 0px;

    width: 200px;
    height: 200px;    
}

.thumbnail-image {  
    width: 200px;
    height: 200px;

    background: #eee;
    position: relative;
}

.thumbnail-image .title {
    position: absolute;
    bottom: 20px;

    display: block;
    background: #000;
    color: #fff;
    padding: 10px;

    font-family: Arial;
    font-size: 12pt;
    text-decoration: none;    
}

Conclusión

Ahora, hemos creado una página de configuración para un tema personalizado. El tema está lejos de estar completo, pero espero que esta introducción te haya servido como iniciación a la adición de ajustes y elementos personalizables para tu próximo tema de WordPress.