Creando un theme de WordPress (IV): la magia que acompaña a function.php

Respuesta rápida

functions.php es la mejor manera de añadir funcionalidad a un theme. La funcionalidad puede ser infinita, y la manera más escalable y administrable posible es con el divide y vencerás. Yo lo he denominado ‘functions.php extensions‘, es decir, ampliaciones del functions.php

Respuesta completa

Requisitos:

functions.php es el archivo clave, y personalmente el que menos edito, de un theme de WordPress -a partir de ahora WP.

Para mí, functions.php es un framework en sí, ya que derivo toda la potencia de un theme en él.

¿Por qué es el archivo que menos edito? Bueno, eso es una frase trampa, sencillamente creo una carpeta llamada framework donde añado todo -todo, todo y TODO- el contenido que debería haber en functions.php.

El archivo functions.php solo tiene un require_once al archivo encargado de administrar el framework.

Hago esto para mejorar la escalabilidad del theme.

Las functions.php extensions mínimas que debe tener un theme son:

  • Añadir metadatos y stylesheets en la cabecera y javascript en el pie de página, es mejor hacerlo mediante funciones del core de WP.
  • Habilitar los widgets, y colocar en los templates las zonas de los widgets.
  • Habilitar el multilenguaje, siendo el ingés el idioma por defecto, y luego se traduce al español.
  • Habilitar uno o varios menús de navegación, y colocar en los templates las zonas de los menús.
  • Usar hooks y filters, una vez se aprende a usarlos el rendimiento de un theme de WP es muchísimo mejor.

De la teoría a la práctica

En nuestro theme creamos una carpeta llamada framework y dentro otra carpeta que tendrá las ampliaciones y el archivo base del framework.

Visualmente es así:

alisios/
 |- framework/
 |   |- extensions/
 |   |- alisios-functions-init.php
 |
 |- 404.php
 |- ...
 |- functions.php
 |- ...

Por ahora, la carpeta extensions y el archivo alisios-functions-init.php estarán vacíos.

Nuestro functions.php contendrá un require_once.

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Load Framework
 */
require_once( get_template_directory() . '/framework/alisios-functions-init.php' );

La función get_template_directory() contiene la dirección de nuestro theme, sin la barra final ‘/’.

¡Y ya está! ¿Qué viene ahora?

Yo divido un theme de WP en dos cosas: templates y functions.php. Eso sí, functions.php puede ser infinito.

Ahora viene lo divertido, porque lo único que hemos hecho hasta ahora ha sido la parte de templates.

Ahora hay que darle caña al diseño, al SEO, a la funcionalidad, … ¡a la magia de verdad!

Como detalle para la version 0.1.4 del theme alisios, además del código ya escrito en este post, voy a crear:

  • El template search.php
    • Se utiliza para mostrar los resultados de una búsqueda.
  • El template searchform.php
    • Es el input dónde escribir lo que se quiere buscar.
  • El template sidebar.php (vacío)
    • Es la barra lateral al lado del contenido. Es común que una página tenga doble columna (contenido + barra).

¿Porqué voy a añadir estos templates? Porque se me olvido añadirlos en la versión anterior.

Acceder a Alisios v0.1.4

Y aquí el código de los templates añadidos.

<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?>

<?php get_header(); ?>

    <section id="primary" role="main">

        <header class="page-header">

            <h1 class="page-title">
                Resultados de la búsqueda: <span><?php echo get_search_query() ?></span>
            </h1>

        </header><!-- /.page-header -->

        <?php if( have_posts() ) : ?>

            <?php get_template_part( 'loop' ); ?>

        <?php else : ?>

            <?php get_template_part( 'loop', 'empty' ); ?>

        <?php endif; ?>

    </section>

<?php get_footer(); ?>
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label>
        <span class="screen-reader-text">B&uacute;squeda:</span>
        <input type="search" class="search-field" name="s" id="s" value="<?php echo esc_attr( get_search_query() ); ?>" placeholder="B&uacute;squeda&hellip;" title="B&uacute;squeda">
    </label>
    <input type="submit" class="submit" id="searchsubmit" value="B&uacute;squeda">
</form>