Una de las cosas que acaban sucediendo más tarde o más temprano es la necesidad de crear Boxes y campos personalizados en WP, esto es debido a la flexibilidad que nos ofrecen a la hora de trabajar y de manejar los datos.

Aunque hay algunos plugins de pago para hacer esto (alrededor de 200$) puede resultar interesante el ahorrarnos ese dinero si no creemos que pueda resultar rentable a corto plazo.

Bueno para empezar trabajaremos con con un ejemplo real en el que he estado trabajando; consiste en un club de campo que quiere mostrar los próximos eventos y torneos de golf que van a tener lugar, de modo que hay que añadirles una fecha y es lo que vamos a intentar en este tutorial.

Para realizar esto hay que utilizar la función add_meta_box(), como aparece a continuación:

add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );

Que como vemos recibe los siguientes parámetros:

• $id: (requerido) se trata de la id de pantalla de edición que mostrará el meta box
• $title: (requerido) es el titulo que va a tener nuestro meta box
• $callback: (requerido) es la función encargada de mostrar el código html que irá dentro del meta box
• $post_type: (requerido) es el nombre del tipo de post que se mostrará en el meta box, ya sean personalizados (custom-post), página (page) o entradas del blog (post), si se quiere añadir el meta box a más de un tipo de entrada se debe de añadir add_meta_box() por cada tipo de función
• $context: indica el lugar donde queremos que se muestre el metabox y puede tener varios valores:
  • normal o avanced: si se quiere poner bajo el contenido del post
  • side: si se quiere colocar en la columna lateral
• $priority: aquí se puede escoger la prioridad de nuestra caja aunque no es algo 100% fiable ya que puede haber plugins que enfrenten las prioridades o que el usuario las mueva para ponerlas de la forma más cómoda para él.
• $callback_args: se trata de un array donde podemos definir argumentos para enviarlos a la función call_back que recibe el objeto $post y este array.

Una vez que sabemos como funciona podemos realizar un primer ejemplo muy sencillo donde vemos  un resultado inmediato.

Para ello nos vamos a nuestro archivo functions del tema (o creamos un plugin como veremos más adelante) y copiamos este trozo de código:

add_action('add_meta_boxes', 'fechas');

function fechas() {
    add_meta_box( 'fecha', __('Escoge una fecha para el evento'), 'fecha_callback', 'post', 'side', 'high', array( 'arg' => 'value') );
}

function fecha_callback( $post, $args = array() ) {
     echo "Aqui aparece lo que queramos!!!";
}

Si ahora nos vamos a crear un nueva entrada veremos que aparece lo siguiente

Una vez que tenemos esto hecho es bastante sencillo imaginar como introducir código html en el callback como vamos aquí:

add_action('add_meta_boxes', 'fechas');

function fechas() {
    add_meta_box( 'fecha',
    __('Escoge una fecha para el evento'),
    'fecha_callback',
    'post',
    'side',
    'high',
    array( 'key' => 'value') );
}

function fecha_callback( $post, $args = array() ) {
     //para saber más sobre nonce mira en http://codex.wordpress.org/Function_Reference/wp_nonce_field
     wp_nonce_field( 'fechas', 'fechas_noncename' );

     //toma los metavalores del post en el que nos encontramos
     $post_meta = get_post_custom($post->ID);

     //The input text
     $current_value = '';
     if( isset( $post_meta['text_meta_field'][0] ) ) {
         $current_value = $post_meta['text_meta_field'][0];
     }
     ?>
    //El input text
     ?>
     <p>
         <label class="label" for="text_meta_field">Introduce la fecha</label>
         <input  name="text_meta_field" id="text_meta_field" type="text" value="">
     </p>
     <?php
}
?>

Lo cual nos da como resultado:

Pero esto solo es una caja donde poner texto que no va a ninguna parte, para hacer que esta información se grave necesitamos introducir una nueva función que grave las fechas y que nos sirva para recoger los datos del formulario.

add_action('save_post', 'grabar_fechas', 10, 2);
function grabar_fechas( $post_id, $post ){

    // Primero comprobamos el tipo de post y que el usuario tenga permiso para editarlo
    // Esto puede cambio según el post_type y las capabilities definidas para el
    if ( 'post' != $post->post_type || ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }

    // Segundo, comprobamos el nonce como medida de seguridad
    if ( !isset( $_POST['fechas_noncename'] ) || ! wp_verify_nonce( $_POST['fechas_noncename'], 'fechas' ) ) {
        return;
    }

    //Tercero, validamos y almacenamos el valor del custom field o lo borramos si es necesario

    //El text input
    if( isset($_POST['text_meta_field']) && $_POST['text_meta_field'] != "" ) {
        update_post_meta( $post_id, 'text_meta_field', sanitize_text_field( $_POST['text_meta_field'] ) );
    } else {
        //$_POST['text_meta_field'] no tiene valor establecido, eliminar el meta field de la base de datos
        if ( isset( $post_id ) ) {
            delete_post_meta($post_id, 'text_meta_field');
        }
    }

}

Perfecto, ahora ya podemos hacer boxes y campos personalizados en WP, pero aun nos falta algo, ponerlos en el front-end, para ello es tan sencillo como irnos a nuestros bucles, ya sean de una entrada sola, de una colección de las mismas… e introducir el siguiente código que como podrás observar es totalmente personalizable

$custom_fields = get_post_custom();
    ?>
    <ul>
         <?php if( isset($custom_fields['text_meta_field']) ) { ?>
         <li>Fecha: <?php echo $custom_fields['text_meta_field'][0]; ?></li>
         <?php } ?>

    </ul>

Naturalmente esto son solo unas ideas, se puede avanzar mucho más e introducir prácticamente cualquier cosa que necesitemos, para luego capturarla y editarla o mostrarla a nuestro gusto.