Desde la versión 2.7 de WordPress (más o menos) podemos crear nuestras propia páginas con opciones o configuraciones que luego podemos usar en el sitio. Ya sea en un theme o un plugin, con un poco de PHP, gracias a la “Settings API” de WordPress tendremos un panel administrativo que nos puede facilitar la vida para muchas cosas.
Si vamos a crear una página de opciones simple (dos o tres campos) podemos seguir al pie de la letra la documentación de las Settings API pero cuando tenemos un panel con muchas (muchas) opciones, esta forma de crearlas se vuelve un poco caótica, se llena de html a diestra y siniestra, incluso he visto plugins “profesionales” que el código PHP queda ilegible. Por suerte, esta misma API nos da una opción más simple: Crear el HTML a la antigua (un formulario).
Vamos a crear un panel de opciones simples para muestra, con algunos campos de ejemplo. Esto lo podemos hacer en:
- Un plugin (recomendado)
- El archivo functions.php del theme.
Voy a dejar un repositorio en este LINK con el código que vamos a ver en este tutorial, en este caso está implementado en un plugin.
El cómo y dónde elijan ustedes implementar esto, queda a su discreción, en este caso voy a mostrar solo las funciones y código básico que se puede usar en plugins y themes sin problemas.
Vamos a empezar creando una función para agregar un menú personalizado en nuestro administrador:
//Add a admin menu | Agregamos un menú de administrador
if (!function_exists('mtAddAdminMenu')) { // we check that the function or method does not exist | comprobamos que no exista la funcion o metodo
function mtAddAdminMenu()
{
add_menu_page('Custom Menu 1', 'Custom Menu 1', 'manage_options', 'custom-menu', 'mtCustomMenu', 'dashicons-admin-site', 2);
}
//Add a admin menu hook | Hook de agregar el menú al administrador
add_action('admin_menu', 'mtAddAdminMenu');
}
En esta parte del código estamos utilizando algunas funciones nativas de php como “function_exists”. La finalidad de esta comprobación es que si la función ya existe, el código no se ejecute, de esta forma evitamos que el sitio se caiga o muestre errores.
La función interesante en este bloque es “add_menu_page”, esta función es nativa de WordPress, la veremos un poco más en otro tutorial. Por ahora, con saber que nos va a dejar mostrar un menú nuevo en el backoffice ya estamos.
Ahora agregamos el callback para el menú. El callback es la función que va a mostrar la parte gráfica de nuestro panel de opciones.
//Admin menu callback | Callback del menú
if (!function_exists('mtCustomMenu')) { //show options page | mostrar la página de opciones
function mtCustomMenu()
{
?>
<div class="wrap">
<h1>Opciones de Tema</h1>
<form method="post" action="options.php">
<?php
settings_fields('mtOptionsCustom');
do_settings_sections('mtOptionsCustom');
?>
<label for="textField">Campo de Texto</label>
<input type="text" name="textField" id="textField" value="<?php echo esc_attr(get_option('textField')); ?>">
<label for="selectField">Campo de Selección</label>
<select name="selectField" id="selectField">
<option value="opcion1" <?php selected(get_option('selectField'), 'opcion1'); ?>>Opción 1</option>
<option value="opcion2" <?php selected(get_option('selectField'), 'opcion2'); ?>>Opción 2</option>
<option value="opcion3" <?php selected(get_option('selectField'), 'opcion3'); ?>>Opción 3</option>
</select>
<label>Grupo de Checkbox</label><br>
<input type="checkbox" name="checkbox1" value="1" <?php checked(get_option('checkbox1'), '1'); ?>> Checkbox 1<br>
<input type="checkbox" name="checkbox2" value="1" <?php checked(get_option('checkbox2'), '1'); ?>> Checkbox 2<br>
<label>Grupo de Botones de Opción</label><br>
<input type="radio" name="gradioGroup" value="opcion1" <?php checked(get_option('gradioGroup'), 'opcion1'); ?>> Opción 1<br>
<input type="radio" name="gradioGroup" value="opcion2" <?php checked(get_option('gradioGroup'), 'opcion2'); ?>> Opción 2<br>
<input type="radio" name="gradioGroup" value="opcion3" <?php checked(get_option('gradioGroup'), 'opcion3'); ?>> Opción 3<br>
<label for="textareaField">Campo de Texto de Área</label>
<textarea name="textareaField" id="textareaField" rows="5" cols="50"><?php echo esc_textarea(get_option('textareaField')); ?></textarea>
<?php submit_button(); ?>
</form>
</div>
<?php
}
}
Bien, aquí podemos ver que el callback es una función normal de WordPress con un formulario y algunas funciones de ayuda de WordPress.
Al igual que con el menú, aquí comprobamos que no exista la función previamente declarada para evitar errores. Luego en la función en sí, retornamos un formulario, sobre los campos no les voy a hablar porque es HTML puro y duro. Lo que es interesante y viene al caso con el tutorial, es la parte de las funciones de WordPress.
Empezando de arriba abajo:
- settings_fields: se utiliza para generar campos ocultos que dan seguridad a los formularios previniendo ataques de CSRF (Cross-Site Request Forgery) verificando que el formulario sea enviado desde la página correcta y no desde un sitio malicioso. La función acepta 1 (un) parámetro con el nombre del grupo de opciones al que pertenecen los campos.
- do_settings_sections: Ayuda a estructurar y mostrar de forma organizada los campos de opciones asociados a cada sección. Al llamar a «do_settings_sections» con el identificador de la página de configuración como parámetro, la función buscará todas las secciones registradas en esa página y mostrará los campos de opciones correspondientes a cada sección.
- get_option: obtiene el valor de una opción registrada. Cuando se utiliza «get_option» con el nombre de una opción como parámetro, la función busca en la base de datos y recupera el valor almacenado para esa opción.
- submit_button: muestra el botón de guardar.
- selected, checked, esc_attr, esc_textarea: son helpers de WordPress para seguridad y manejo de campos de formulario.
Por último agregamos el siguiente bloque de código:
function mtRegisterOptions()
{
register_setting('mtOptionsCustom', 'textField');
register_setting('mtOptionsCustom', 'selectField');
register_setting('mtOptionsCustom', 'checkbox1');
register_setting('mtOptionsCustom', 'checkbox2');
register_setting('mtOptionsCustom', 'gradioGroup');
register_setting('mtOptionsCustom', 'textareaField');
}
add_action('admin_init', 'mtRegisterOptions');
En este caso tenemos la función:
- register_setting: Al utilizar «register_setting()», se especifica el nombre de la opción y se asocia con un grupo de opciones. Esto permite que WordPress gestione automáticamente la creación y almacenamiento de la opción en la base de datos.
Como se ve en el caso de la función del menú y en esta última, tenemos un función extra que se llama “add_action()”, esto lo veremos en detalle en otro tutorial pero podemos decir que se utiliza para agregar una función o método específico a un punto de enganche (hook) en el flujo de ejecución de WordPress. Al utilizar «add_action()», se especifica el nombre del punto de enganche al que se desea agregar la función, y luego se proporciona el nombre de la función o el método que se ejecutará en ese punto. Básicamente, sirve para extender o agregar funcionalidades de WordPress y sus plugins.
Una vez agregado esto en un plugin o en el functions.php de nuestro theme, vamos a ver, primero, un menú nuevo:

Si hacemos click en este nuevo menú, vamos a ver una nueva página con los campos definidos en el callback del menú:

Como ven, no le puse estilos o estructura a este formulario, pero la idea era mostrar cómo crear este tipo de páginas y no irnos por las ramas con estilos y demás. Como nota en esto les puedo decir que WordPress ya viene con estilos para estos formularios por lo en otro tutorial lo mostraré.
Ahora, cuando asignemos un valor a uno de estos campos y guardemos, vamos a tener una nueva opción disponible para utilizar en cualquier parte de nuestro WordPress.
Para utilizar las opciones nuevas, volvemos a utilizar la función “get_option(‘nombre_opcion’)”. Esta función (por si no leen la documentación que deje en cada link) retorna una cadena (string) siempre. Es decir, si la opción no existe retorna una cadena vacía, por lo que una forma correcta de utilizarla para no generar warnings por ejemplo (o error graves en último caso) sería algo como:
if (get_option('textField') != '') {
echo get_option('textField');
}
Comprobamos si la opción existe y no está vacía en el mismo if, lo pueden usar con ternarios y otros tipo de “if” si les parece, pero les recomiendo siempre verificar cada valor que quieren mostrar (si existe sobre todo) por en programación una de las cosas más comunes son los fallos por falta de comprobación de los datos.
Bueno, espero que les sirva para sus proyectos.