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.

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.

Vamos con el ejemplo practico settings.php

Inicializamos las variables.

// nombre de la pagina del tema 
$themename = "Lamatte";  
// nombre corto, una sola palabra y la usaremos para registra las opciones por ejemplo  lamatte_facebook,...
$shortname = "lamatte";
// lista de opciones
$settings_list = array(
    'logo_url',
    'facebook_social',
    'twitter_social',
    'instagram_social',
    'google_plus_social',
    'pinterest_social',
    'copyright_text'
);

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

  
function cssdesign_admin_theme() {
    global $themename, $shortname, $settings_list;
    if ( $_GET['page'] == basename(__FILE__) ) {
        if ( 'save' == $_REQUEST['action'] ) {
                  foreach($settings_list as $value) {
                      update_option($shortname . '_' . $value,mysql_real_escape_string($_REQUEST[$value]));
                  }
                  header("Location: themes.php?page=settings.php&saved=true");
                  die;
        }
    }
    add_theme_page($themename." Opciones ", $themename." Opciones", 'edit_themes', basename(__FILE__), 'cssdesign_admin');
}

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.

<?php
function cssdesign_admin() {
    global $themename, $shortname, $settings_list;
    if ( $_REQUEST['saved'] ) echo '<div id="message"><p><strong>'.$themename.' settings guardado.</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>
<div>
<h2><?php echo $themename; ?> Opciones</h2>
<form method="post">
<table>
<tr>
  <td> <label>Logo: </label></td>
  <td><input type="text" name="logo_url" value="<?php echo stripslashes(stripslashes(get_option($shortname.'_logo_url',''))); ?>" /><br /><small><a href="<?php bloginfo('url'); ?>/wp-admin/media-new.php" target="_blank">Pulse aqui para subir logo</a> (500px  x 200px )</small></td>
</tr>
</table>
<hr/>
<h3> Social </h3>
<table>
<tr>
  <td><label>Facebook :</label></td>
  <td><input type="text" name="facebook_social" value="<?php echo stripslashes(stripslashes(get_option($shortname.'_facebook_social',''))); ?>" /></td>
</tr>
</table>
<p>
<input name="save" type="submit" value="Guadar cambios" />    
<input type="hidden" name="action" value="save" />
</p>
</form>
<?php } ?>
add_action('admin_menu', 'cssdesign_admin_theme');

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.

 include('settings.php');

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