crear tu pagina de opciones en WordPress



Ayudando a una amiga en su web, le voy a añadir una opción donde ella pueda cambiar su información básica como logo, redes sociales,. pie de pagina.

Seguramente hayáis visto temas con muchas opciones, cambiar de fuente, añadir css, con slider,… pero realmente necesitamos todo eso o estamos sobrecargando nuestro WordPress.

pagina-de-opciones-wordpress

 

Pasos que vamos a seguir para crear tu pagina de opciones en WordPress

0.- Definir que campos vamos a necesitar :

  • Logotipo
  • Enlaces a redes sociales , twitter , facebook , ..
  • Copyright
  • Direccion , …

1.- Nos creamos un fichero settings.php (o como queramos llamarlo) y alli meteremos nuevo codigo, recordar que debemos incluirlo en nuestro functions.php para que funcione.  Tenerlo en un fichero separado nos va a permitir dejarlo todo mas ordenado.

2.- Definiremos dos funciones:
Una para registrar la pagina y llamar a la segunda función que contendrá el formulario que pintaremos y la segunda que contendrá el formulario para guardar y mostrar la informacion.

Y al final nos quedara un ejemplo como el de la foto.

page_theme_option


Vamos con el ejemplo practico settings.php

Inicializamos las variables.

Vamos a crear una funcion donde vamos a indicar la ruta y la accion donde queremos guardar la info.
Tambien usaremos la funcion de wordpress add_theme_page que nos añade una pagina a un submenu

add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function );
La funcion add_theme_page tiene un campo $function donde llamaremos a otra funcion en la que tendremos definido nuestro formulario. En nuestro caso la hemos llamado cssdesign_admin

Ahora vamos crearnos nuestro formulario, aunque el codigo es sencillo, os voy a poner el ejemplo donde definimos el Logotipo.

Si os fijais bien por cada campo que definais en vuestra lista de $settings_list tendreis que poner un campo en vuestro formulario, ya sea un campo de texto, un select ,..

Insertarlo en functions.php

Al comienzo de functions.php añadis la siguiente linea.


Y ahora que hago, ¿Como muestro los datos en mi tema

Nos vamos a la zona donde queramos mostrar la informacion. Y le decimos que lo muestre.

Por ejemplo vamos a mostrar el enlace a facebook.

Con get_option($shortname.’_facebook_social’,”); obtenemos nuestro valor

 

Os dejo aqui el fichero completo con todo el ejemplo. Teneis que descomprimirlo.

Descargar ejemplo

Si te ha gustado compartelo