Agregar panel de opciones a un theme wordpress

Como dice el titulo, en este tutorial agregaremos un panel de opciones a nuestro theme de wordpress, explicaremos como funciona y como utilizarlo facilmente en la configuración de tu plantilla.

¿Para que Agregar panel de opciones a un theme wordpress? Cuando se trabaja para clientes con plantillas de desarrollo propio es muy importante que algunas opciones del front End de la web puedan ser editadas por el cliente, con esto podemos evitar llamadas como: Hola, Necesito cambiar el teléfono de la web, ¿puedes ayudarme? :-/.

¿Cómo evitamos esto? Muy fácil, agregando un panel de opciones a la web del cliente, que es el tema a tratar en este tutorial, para ello utilizaremos el plugin Options Framework Theme, pero con la particularidad de que estará integrado en tu theme, para evitar inconvenientes de instalación y configuración de plugins.

Para desarrollar este tutorial utilizaremos la plantilla Music Theme desarrollada por mí en el tutoriales De HTML a WordPress, agregaremos a esta plantilla un panel de opciones donde podremos controlar  los siguientes datos básicos:

  • Información de contacto: Teléfono, Email, Dirección, Cp.
  • Configuración general: Logo, Activar/Desactivar el slider, activar/Desactivar el buscador, Seleccionar la categoría del slider.

1.- ¿Que es Options FrameWork? ¿Para qué sirve?

A pesar de que wordpress cuenta con Settings API para agregar un panel de opciones a un theme, o cualquier tipo de configuración extra, nosotros ocuparemos este plugins el cual hace el trabajo sucio por nosotros ahorrándonos mucho tiempo de trabajo.

Options FrameWork: Es un frameWork que nos permite centrarnos en el desarrollo de nuestro theme en vez de centrar nuestra atención en crear un panel de opciones desde cero. Se puede utilizar tanto en proyectos personales como comerciales. Para ver todas sus funcionalidades y descripción completa visita la web del autor.

2.-Descarga y configuración inicial de Options FrameWork

Para iniciar con el tutorial nos descargamos el plugin Options framework theme  en GitHub, nos descargamos esta versión ya que es mucho más fácil de integrar a wordpress y además trae datos de ejemplo para que te hagas una idea de cómo funciona este framework.

Una vez descargado el plugin, copiamos la carpeta inc y el archivo options.php en el directorio de nuestro theme.

Agregamos el siguiente código en el archivo functions.php:

El código anterior simplemente dice que si existe la función optionsframework_init, busque en el directorio inc el archivo options-framework.php, para poder utilizar las opciones disponibles en el plugin.

Con esto ya tenemos registrado el plugin, sin necesidad de instalación y activación previa, y de esta forma podrás instalar tu plantilla sin preocuparte por el plugin del panel de opciones. Si vas a tu panel de control en Apariencia, podrás ver que ya tienes un enlace a theme Options de tu theme.

panel de opciones en wordpress

3.-Prepararnos para agregar opciones al theme

Sí abres el archivo options.php en un editor de código podrás ver todo el código de ejemplo que nos facilitan en este archivo, yo como lo conozco lo borrare e iré agregando lo que me interese para este tutorial.

Con el archivo options.php vacío empezamos a pegar los siguientes trozos de código:

Con esta función obtenemos el nombre del theme, que será utilizado en la configuración interna del plugin.Se define para almacenar las opciones en la base de datos y hacer referencia a ellos en el theme, por defecto se utiliza el nombre del theme el cual es tomado desde el archivo style.css de la plantilla, se muestra en minúsculas y sin espacios, pero esto se puede cambiar si es necesario. Debes de tener en cuenta que si cambia el identificador, las opciones serán restablecidas a su valor por defecto.

En esta función se definen una serie de opciones que se utilizan para generar la página de configuración de nuestro theme y guardarlas en la base de datos.

4.-Panel de opciones básico

En esta parte del tutorial crearé un panel de opciones básico, el cual contará con dos pestañas (datos de contactosconfiguración general), todo el código que estaré explicando estará dentro de la función antes mencionada.

Agregamos los dos apartados de configuración.

Con el siguiente código agregamos dos pestañas al panel de administración de nuestra plantilla.

Solo debemos configurar la opción name que se refiere al nombre que mostrará la pestaña, como muestra la siguiente imagen.

COnfiguración de pestañas en e lpanel de opciones

Agregando campos en la pestaña configuración general

En la pestaña de configuración general utilizaremos los siguientes tipos de campos, para agregar campos de entrada a una pestaña, basta con agregar el código correspondiente al campo deseado y colocarlo debajo del código que hace referencia a dicha pestaña.

Configuración del logo

Para mostrar el logo en la web utilizaremos el input Type:upload:, con este campo podemos subir el logo de la web de una forma muy sencilla, así podemos cambiarlo cuando queramos, sin ir a meterle mano al código.

Para ello agregamos el siguiente código en el archivo options.php, debajo del array de configuración general agregado anteriormente.

Input type:Upload en options theme framework
Ahora ya tenemos el input upload en nuestro panel de control, ¿cómo lo utilizamos para mostrarlo en la web? muy sencillo, crearemos un script php el cual muestre un texto si no hay imagen, y si hay imagen que la muestre.

El input upload nos devuelve la url de la imagen subida en el panel de control, para mostrar estos datos option theme framework utiliza la siguiente función.

Donde lo más importante es el primer parámetro, que hace referencia al ID del campo agregado, en este caso es:logo_uploader.

Utilizando la función anterior agregamos este código donde queremos mostrar el logo de la web.

Configuración del slider

Para configurar el slider de la web necesitaré 3 datos, estos datos serán decididos por el usuario desde el panel de control del theme. Queremos saber si está activo o no, la categoría desde donde extraer los artículos y el número de post a mostrar en el slider, se pueden agregar tantas opciones como necesites para programar las funcionalidades del slider, para este ejemplo solo utilizare estas tres.

Slider Activo o no – input Type:checkbox: Este campo lo utilizaré para activar el slider de la web si esta marcado, y desactivarlo si no lo esta.

Input type checkBox en options theme framework

El checkbox nos devuelve 1 si esta seleccionado y 0 si no está seleccionado, sabiendo esto ya podemos crear un simple condicional para meter el código del slider dentro de él y que solo se muestre si obtenemos 1 (activo). Veamos el siguiente código.

Con esto ya controlamos desde el panel de administración de nuestro theme el estado del slider, visible o no.

Número de post a mostrar- Input type:select: Este campo lo utilizare para agregar un desplegable de números del 1 al 8, que se utilizara para elegir el número de imágenes a mostrar en el slider de la web. Agregaré el código y luego lo explico en detalle.

input tipo select theme-options-framework

Ya teniendo el menú desplegable en el panel de opciones de nuestro theme, solo nos queda obtener la selección, asignarla a una variable y utilizarla en el loop del slider, como hemos visto antes para obtener lo seleccionado en el panel de administración utilizaremos la siguiente función.

Con este código almacenamos en la variable $img_slider el número seleccionado por el usuario en la configuración del theme.

Más abajo agregaré un ejemplo de cómo utilizar estos datos en el loop de wordpress, terminemos de agregar y obtener el dato de la categoría del slider.

Categoría del slider – Input type:select: En este caso el select lo utilizaremos para seleccionar la categoría de la cual queremos extraer los artículos a mostrar en el slider.

Listado de categorias en options theme framework

Ya contamos con el número de imágenes y la categoría que queremos utilizar para el slider, teniendo estos datos podemos aprovecharlos para personalizar nuestro loop y obtener las entradas que nos interesan, para ello utilizaremos el siguiente código.

En el código anterior puedes ver como utilizo el valor de estas variables para filtrar el loop de wordpress, este código solo es a modo de ejemplo, si por cualquier cosa alguien lo necesita completo sin problema puedo facilitarlo, pero en este tutorial solo pongo parte de este para mostrar cómo utilizar los datos obtenidos desde el panel de opciones del theme.

Del código anterior podemos destacar las siguientes líneas, que son las que limitan el loop a unas entradas especificadas por los valores de las variables, esta no es más que una forma de utilizarlo, con esto puede hacer todo lo que se te ocurra y más.

Agregar Datos de contacto al panel de opciones del theme

Dejare el código completo para esta pestaña ya que son todos campos de texto y se obtienen igual que los datos obtenidos anteriormente, con este código le facilitamos al usuario el cambio de sus datos de contacto sin necesidad de tocar el código de la web.

¿Como obtengo estos datos?

Para obtener estos datos utilizaremos la misma función.

Y con los datos ya guardados en sus respectivas variables, simplemente usaremos otro condicional que verifique si hay texto en el campo, si hay texto lo muestra de lo contrario no muestra nada. En mi caso utilice una lista desordenada para listar estos datos de la siguiente manera.

5.-Campos disponibles en options frameWork

text input – textarea

Como puedes imaginarte nos muestra un input type text y un textArea, el input type text tienes la opción de mostrarlo pequeño agregando en sus opciones la clase mini, el código para activar cada uno de estos es el siguiente.

Mostrar input text y textarea en option framework

checkbox

Muestra un checkbox, nos devuelve 1 si esta marcado y 0 si no lo esta, puede decidir si dejarlo marcado o no por defecto, utilizando su opción ‘std’ => ‘1’.

Input type checkbox en options framework

select

Para los input type select se utiliza un array para guardar las opciones que queremos mostrar, luego ese array se lo asignamos a la opción ‘options’ => $test_array); del select, como muestro en el siguiente código, dejare 3 4 formas de utilizar los array de datos, uno que agregamos los datos manualmente, otro que nos muestra un listado de categoría de wordpress y otro que nos muestra un listado de páginas.

Listado de páginas y categorías en wordpress

radio button

Radio Buttons wordpress framework

upload (image uploader)

Este campo nos devuelve la url de la imagen subida, utiliza el gestor multimedia de wordpress para subir los archivos y nos muestra una vista previa de la imagen actual.

Input type upload wp options framework

Otros tipos de entrada más avanzados.

Para la explicación de cada una de estas entradas lamento decirle que tendrán que leer el archivo index.php del option framework theme que nos descargamos, no lo explico aquí por qué me he alargado mucho con este tutorial y para explicarlas a medias mejor que cada uno publique sus dudas y yo trato de ayudarles, los tipos de entrada avanzados con los que cuenta este framework son las siguientes:

  • images (uso de imágenes en lugar de radio buttons)
  • background (un conjunto de opciones para definir un background)
  • multicheck
  • color (jquery color picker)
  • typography (un conjunto de opciones para definir su tipografía)
  • editor(Editor de código tipo TyniMCE)

Conclusión

Disculpen que me he alargado tanto, siempre me pasa igual, espero que este tutorial les anime a crear plantillas que les quiten problemas futuros con los clientes.

Para cualquier suda que tengan referente a este tutorial pueden dejar sus comentarios, tanto en la web, por twitter o por nuestra fan Page de Facebook, no te quedes con dudas pregunta que te ayudaré en todo lo que pueda.

Un saludo enorme y espero que el tutorial sea de provecho.

¿Que te ha parecido este artículo? Dejanos tu valoración...

HorribleMaloBuenoMuy BuenoExcelente (6 votes, average: 4,33 out of 5)
Cargando…

  • Julian

    Excelente blog!!!!! Esto me sirvio muchisimo porque estoy creando un theme premiun y es fundamental que tanga estas opciones. Quería consultarte si hay alguna manera de agregar los shortcodes como opción al panel de administracion. Saludos.

    • Querrás decir agregar los shortCode al editor de entradas, ¿no?

  • Me gustó este tutorial, de todos los que busqué este me agrado porque esta bien estructurado y explicado, y ahora haré mi parte, lo pondré en practica. Saludos.

    • Gracias por lo que me toca. 😉 Me encanta ver que lo que escribo les sirve a otras personas.

      • mrseedercarlos

        porque no puedo deleccionar nada? ni links ni texto no puedo copiar, clickear porque no pasa nada

      • Tenia un error en la plantilla, ya podrás copiar y seleccionar código, tengo que cambiar la plantilla, esta hecha una pena 😀

  • Daniel

    Muchas gracias por el tutorial.
    Te pregunto cómo puedo agregar la validación, para que un campo solo acepte valores numericos enteros. Gracias de antemano.

    • Hola Daniel, puedes validar todos los campos que utilices en el panel de opciones.
      Para validarlos debes saber javaScript, tu código javaScript debe de agregarlo en el archivo functions.php.

      Puedes ver un ejemplo Aquí, es el options framework theme master.

      Si no puedes con el javaScript me avisas y tratamos de resolverlo.

      Un saludo.

  • Excelente tutorial, ya había visto el de convertir un PSD a HTML y luego a tema de WordPress. Ahora voy a probar este otro, si es como el anterior seguro me funcionará. Gracias Jordano.

  • Marcelo

    Decime si esta Ok lo que hice. En la parte del Logo no explicaste como agregar esto:
    1 //Trae el logo desde el panel de administración,
    2 //si no hay nada muestra el segundo parámetro
    3 of_get_option(‘logo_uploader’,’Default Data’);

    y lo quise probar y no funciono, nunca me mostraba el logo.
    Lo que hice fue agregar en la primera linea del código lo siguiente en el lugar donde quería mostrar el logo:

    $logo_uploader = of_get_option(‘logo_uploader’,’Default Data’);

    • Hola Marcelo, lo que has hecho esta correcto.

      Quizas no me explique bien.

      Para utilizar los campos que agregas en el panel de administración de una plantilla, debes recoger los datos en varibles al inicio del código, como lo has hecho tu, por ejemplo.

      Para mostrar el logo:

      En este caso, si no han subido ninguna imagen mostrará el contenido del else, pero si no tenemos ninguna condición if, mostrará el segundo parámetro de la función of_get_option();, que en este caso es el texto Default Data.

      Espero haber aclarado un poco más tus dudas.

      • Delvis Grullón

        Hola lo eh colocado de todas maneras posibles pero no se visualiza las opcion en mi plantilla, necesito ayuda.

        Lo eh colocado de esta manera y de la manera que dices y no funciona

  • Marcelo

    Buenisimo.. Si.. al principio no me cerraba y no lo podía ejecutar la código.No tengo mucha experiencia en estas funciones y no lo había entendido en un principio.
    Gracias!!!

  • Fernando

    Hola, soy principiante en esto, la parte en la cual se integra el logotipo no me quedo, no entedi donde va esto (of_get_option(‘logo_uploader’,’Default Data’);), saludos. gracias!!

    • Hola Fernando, te explico un poco donde va esto.

      Ese método llama el campo logo_uploader que se agrego al pnel de administración de la plantilla, si hay alguna imagen en ese campo, con este metodo puedes guardarlo en una variable y utilizarlo como necesites. Un ejemplo:

      También puedes utilizar el segundo parámetro, este se utiliza si no hay nada en ese campo, digamos que es su valor por defecto.

      Espero haberte aclarado algo.

      Un saludo.

      • Fernando

        Muchas gracias Jordano, ahora si me salio, gracias!!!

  • Muy buen tutorial. Enhorabuena!!!!

  • John

    Hola, excelente tutorial..!!! Lo estoy implementando en mi primer theme de wordpress (soy principiante) 😛
    La pregunta: Como podría integrar Google Fonts?
    Gracias!!

    • Para integrar google font hay varias formas, mira esta entrada de ayudawordpress.

      Si te referías a agregar un listado de fuentes de google font en el panel de administración de la plantilla, esto ya es diferente.

  • pedro

    Una preguntota amigo lo que pasa es que estoy usando un autoacompletador de datos de IMDB y ese autoacompletador usa la libreria de jquery.. entonces al querer subir un logo desde el theme options el boton no funciona… y me di cuenta que se estan creando conflictos los jquery como lo podria solucionar muchas gracias…

    codigo de auto acompletador con jquery imdb en fuctions.php

    function custom_admin_js() {
    /*echo ‘$(\’input[name=Lang]\’).keypress(function() {
    var valor = $(\’input[name=Lang]\’).get(0).value;
    $(\’#new-tag-lenguaje\’).val(valor);
    });’;*/

    echo ‘

    $(\’input[name=Checkbx]\’).click(function() {
    var imdbLink = $(\’input[name=Checkbx2]\’).get(0).value;
    // Send Request
    $.getJSON(“http://www.omdbapi.com/?i=” + imdbLink, function(data) {
    var valDir = “”;
    var valWri = “”;
    var valAct = “”;
    $.each(data, function(key, val) {
    $(\’input[name=\’ +key+ \’]\’).val(val);
    if(key == “Director”){
    valDir+= ” “+val+”,”;
    }
    if(key == “Writer”){
    valWri+= ” “+val+”,”;
    }
    if(key == “Actors”){
    valAct+= ” “+val+”,”;
    }
    if(key == “Year”){
    $(\’#new-tag-fecha-estreno\’).val(val);
    }
    });
    $(\’#new-tag-director\’).val(valDir);
    $(\’#new-tag-escritor\’).val(valWri);
    $(\’#new-tag-actor\’).val(valAct);
    alert(\’Se te genero todo automaticamente, pero en el slider tenes que apretar “Agregar” en cada box.\’);
    });
    });
    ‘;
    }
    add_action(‘admin_footer’, ‘custom_admin_js’);

  • vektor

    Gran tutorial!!!!

    El único problema que veo es que el contenido ingresado no es pueda traducir con WPML para multiidioma.

    Una pregunta, es posible añadir widgets con este plugin en las Opciones del Tema? Eso sería increible!

    Un saludo y de nuevo gracias por el magnífico tutorial.

    • Hola @vektor

      Claro que si se puede traducir, solo debes tener en cuenta a la hora de imprimir los datos que sacas desde el panel de administración del theme, utilizar la forma adecuada para que ese texto pueda ser reconocido por WPML.

      Para mostrar los datos preparados para traducción debes utilizar estas funciones de wordpress:

      Haciéndolo de esta forma te puedo asegurar por experiencia que el plugin, WPML te va a reconocer todos los textos que pongas de esta forma en tu plantilla.

      Yo he realizado una web en tres idiomas y lo hice como te he explicado. http://www.inmoofertas.net

      Espero te sirva de algo mi respuesta, un saludo.

      • vektor

        Antes de nada gracias por tu rapida respuesta!

        Yo incluyo en el php el siguiente código para traer un texto escrito en las Opciones del Tema:

        en el options.php lo incluyo así:

        Pero WPML solo me hace traducible opor ejemplo, Custom Footer Text, etc, y lo que yo quiero es que me traduzca lo que yo escribo en ese campo. ¿Es posible? Agradezco tu ayuda de antemano.

      • Hola,

        Este código que agregas en el archivo de opciones está bien, pero lo que te comente de la traducción no hay que hacerlo ahí, si no en el archivo de tu plantilla donde quieras mostrar estos datos.

        Por ejemplo:

        Para mostrar Custom Footer Text en el pie de página de tu web, me imagino que será en el archivo footer.php, con lo cual en el archivo footep.php, debes agregar el siguiente código:

        La función of_get_option() recibe dos parámetros:

        1. ID campo: Este es el ID del campo del cual quieres obtener un dato, en este caso el ID = footer_text.
        2. Valor por defecto: Como segundo parámentro recibe el texto que se mostrará si este campo esta vacío.

        Espero te haya aclaro un poco.

        Un saludo.

  • Rubén Cunyas

    Hola, este script “of_get_option(‘logo_uploader’,’Default Data’);”, dónde es que lo tendría que pegar?

  • Rubén

    Ya me salió! Disculpen pero no soy programador y es mi primera experiencia haciendo una plantilla para wordpress desde 0. El script completo sería “” y lo puse justo antes de declarar el logo en el header.php
    Gracias por el tuto, está muuuy paja!

    • GiordanoPolanco

      Exacto, este código lo agregas en la parte de la plantilla donde quieres que se muestre, en tu caso en el header.php.

  • Rubén

    …sería $logo_uploader = of_get_option(‘logo_uploader’,’Default Data’);

  • Steven Reales

    Se puede agregar un boton ??

  • Me ha ido fenomenal el tutorial, pero ahora me gusatría poder guardar la configuración porque cada vez que cambio de theme desaparece, eso como lo puedo hacer??

    También me iría bien saberlo para ver si puedo copiar la configuración de un theme a otro.

    Gracias por tu trabajo 😉

  • César Barreno

    Hola, gracias por el post me esta siendo de mucha utilidad, el inconveniente que tengo es que al momento de querer mostrar algo de lo que se guarda en la opciones no me muestra nada, coloque un editor y en el index código php echo of_get_option(‘home’,”); las opciones se guardan pero no me muestra nada, podrias ayudarme.

  • Abraham

    Hola, espero puedas ayudarme.
    Estoy detenido en el paso 2 de tu tutorial, ya baje los archivosde de github pero no se donde se localiza la carpeta que contiene la info del tema que estoy utilizando??
    Que ruta tiene para poder acceder a la carpeta del directorio del tema?
    Gracias

  • Jefferson Varela

    Hola, buen tutorial, hay manera de agregar una ventana modal dentro del panel de opciones?