Crear un tema WordPress desde cero – Construyendo la base de nuestra plantilla

Si has llegado hasta aquí y te has leido los capítulos anteriores ya sabrás como es más o menos la estructura de archivos de WordPress que vamos a emplear en nuestra plantilla. En este capítulo nos vamos a centrar en los archivos principales y más importantes a la hora de crear la plantilla. Antes deberemos saber como va a ser la estructura de nuestro tema.

Para el tema que estamos creando desde cero vamos a querer tener una estructura de cabecera, columna izquierda, contenido, columna derecha y pie de página.

structure-mytheme Los archivos que vamos a empezar a rellenar son los siguientes: header.php, footer.php, functions.php y style.css.

El header.php y footer.php serán los primeros archivos que deberemos estructurar.

En el header.php tendremos la estructura inicial del documento HTML que engloba el DOCTYPE, etiqueta <html>, etiqueta <head> con sus metas necesarios, título, estilos, etc, la apertura de la etiqueta <body> y el contenedor de la cabecera.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?php
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
// Add the blog name.
bloginfo( 'name' );
 
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";
 
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'mytheme' ), max( $paged, $page ) );
 
?>
</title>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
    <div id="page" class="container">
        <div class="row">
            <div id="header">
                <h1 class="site-title col-sm-9"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            </div>
        </div>
        <div class="row">

Fíjate que estamos usando una función wp_head() que se tiene que poner antes de la etiqueta </head> y no es más que un hook o posición donde se añaden acciones. En nuestro caso, lo utilizaremos para añadir los estilos y scripts del jQuery Bxslider, del Superfish menu y del framework bootstrap.

Partiremos editando también el archivo index.php añadiendo el siguiente contenido:

<?php get_header(); ?>
<div id="sidebar_left" class="col-xs-12 col-sm-3 col-md-3 col-lg-3 hidden-xs hidden-sm">
    <h3>Sidebar left</h3>
</div>
<div id="content" class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
    <div class="home col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1>Your Home</h1>
        </div>
    </div>
</div>
<div id="sidebar_right" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <h3>Sidebar right</h3>
</div>
<?php get_footer(); ?>

Fíjate bien en el archivo index.php y observarás que se está llamando a la función get_header() que lo que hace es incluir la cabecera de la página (header.php), y a la función get_footer() al final del documento que lo que hace es incluir el pie de página (footer.php).

En el footer.php tendremos la estructura final del documento HTML que engloba los tags que componen nuestro footer y los tags de cierre abiertos en el header.php.

</div>
    <div id="footer" class="row">   
        Footer
    </div>
    <?php wp_footer(); ?>
</body>
</html>

En este caso fíjate en la función wp_footer() que estamos llamando en este archivo que no es más que un hook o posición para añadir código en el pie de página.

El archivo functions.php es como una biblioteca personal de funciones, es una manera fácil de ampliar, cambiar o alterar el comportamiento por defecto de WordPress. Se comporta exactamente igual que un plugin, añadiendo características y funcionalidad a una web, y se puede utilizar tanto para definir nuevas funciones PHP como para modificar las que ya incorpora el sistema. Inicialmente, estamos hablando de este archivo en este momento porque vamos a añadir nuestros estilos y scripts personalizados para nuestra plantilla.

Todas las funcionalidades extra a WordPress las podrías añadir directamente en el archivo functions.php y va a funcionar igual pero por organización o costumbre yo suelo dividir los archivos para poder llevar un mejor mantenimiento de la Web. No es lo mismo revisar un archivo con miles de lineas que otro con 10 lineas. Se trata de la frase que siempre tengo en mente a la hora de programar. Divide y vencerás!

En el archivo functions.php incluiremos un archivo de la siguente forma:

<?php
include(TEMPLATEPATH . '/includes/scripts.php');
?>

Este archivo contiene lo siguiente:

<?php
function mytheme_scripts() {
    wp_enqueue_style( 'style-bxslider', get_template_directory_uri().'/css/jquery.bxslider.css' );
    wp_enqueue_style( 'style-bootstrap', get_template_directory_uri().'/css/bootstrap.css' );
    wp_enqueue_style( 'style-superfish', get_template_directory_uri().'/css/superfish.css' );
    wp_enqueue_script( 'script-bxslider', get_template_directory_uri() . '/js/jquery.bxslider.js', array(), '1.0.0', true );
    wp_enqueue_script( 'script-superfish', get_template_directory_uri() . '/js/superfish.js', array(), '1.0.0', true );
    wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true );
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>

En WordPress podemos añadir hojas de estilo adicionales con wp_enqueue_style() y añadir scripts adicionales con wp_enqueue_script().

El archivo style.css de WordPress es más importante de lo que parece ya que además de contener los estilos principales de nuestra tema va a contener información identificativa del tema.

/*
Theme Name: Mythme
Theme URI: https://www.jose-aguilar.com/
Author: Jose Aguilar
Author URI: https://www.jose-aguilar.com/
Description: Boopstrap Jose Aguilar Theme
Version: 1.1
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: jose-aguilar
 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
 
body {
 
}
 
#header {
    background-color: #dadada;
    min-height: 100px;
    margin-bottom: 10px;
    text-align: center;
}
 
#header h3 {
    float: left;
    text-align: center;
    width: 100%;
}
 
#sidebar_left, #sidebar_right {
    background-color: #dadada;
    min-height: 400px;
    text-align: center;
}
 
#sidebar_left {
    border-right: 5px solid #eee;
}
 
#sidebar_right {
    border-left: 5px solid #eee;
}
 
#content {
    background-color: #dadada;
    min-height: 400px;
    text-align: center;
}
 
#footer {
    background-color: #dadada;
    min-height: 80px;
    margin-top: 10px;
    text-align: center;
}

Este código CSS contiene la base o estructura de nuestro tema «mytheme». Si te fijas en la parte superior del código hay unos comentarios identificativos. Estos comentarios identifican al tema y esa información aparecerá en la administración de temas de WordPress.

mythme-in-themes

Para que aparezca nuestra página con nuestro nuevo tema tan solo tenemos que activarlo en Apariencia – Temas.

Indice de contenido

Tema 01 - Introducción e ídice de contenido
Tema 02 - La estructura de archivos de una plantilla
Tema 03 - Construyendo la base de nuestra plantilla
Tema 04 - Creación de los menús de navegación
Tema 05 - Creación de zonas para Widgets
Tema 06 - Página principal
Tema 07 - Páginas
Tema 08 - Entradas y comentarios
Tema 09 - Página de categorías y tags
Tema 10 - Formulario de búsqueda y sus resultados
Tema 11 - Página de error 404
Tema 12 - Conclusión y demostración
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(4 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

13 respuestas a “Crear un tema WordPress desde cero – Construyendo la base de nuestra plantilla”

  1. Miguel Pavon dice:

    ERROR EN CONSOLO
    scripts.js?ver=1.0.0:1 Uncaught ReferenceError: jQuery is not defined
    at scripts.js?ver=1.0.0:1
    (anonymous) @ scripts.js?ver=1.0.0:1

    —script.js—
    $ = jQuery.noConflict(); = breakpoint){
    $(‘nav.menu-sitio’).show();
    }else {
    $(‘nav.menu-sitio’).hide();
    }
    });
    });

    —functons.php— el registro de la funcion
    <?php
    function CMH_styles(){
    //–wp_enqueue_script('scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true );
    wp_register_script('scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true );
    wp_enqueue_script('jQuery');
    wp_enqueue_script('scripts');
    }
    add_action('wp_enqueue_scripts','Cedulas_Madre_Hnd_styles');

    });

  2. Mariano dice:

    Hola consulta armo el menu y no me reconoce los estilos me los muestra en lista que puede ser?

  • Mariano dice:

    Hola Jose estoy teniendo una duda con respecto a incluir una linea de codigo que no esta muy bien claro, el codigo

    eso se agrega con lo que ya esta en el archivo function? o se borra todo y se agrega esa linea de codigo solamente?

  • Delvis dice:

    Hasta ahora todo va a pedir de boca….

  • Chanly dice:

    Hola José.
    Activando el tema se me queda la pantalla en blanco. He revisado todos los nombres de las paginas creadas asi como las librerias JS y esta todo bien. Lo unico que cambie mytheme por el nombre que le puse al tema.

    Como veras soy muy novato. El wordpress lo carga bien, sin dar errores. Ahora esta todo blanco.

    • Jose Aguilar dice:

      Hola buenas tardes, si se queda en blanco es seguramente por algún error en el código. Necesitarás ver el log de errores del servidor para saber que problema hay. Saludos

  • Pedro dice:

    Hola José Aguilar,
    Excelente tutorial, lo eh seguido al pie de la letra, pero me arroja 3 errores, a que crees que se deba esto, ojalá puedas ayudarme, la estructura que tengo es igual a la que recomiendas en el Tema 3. Construyendo la base de nuestra plantilla…. Gracias.
    Uncaught ReferenceError: jQuery is not defined
    (anonymous function)
    jquery.bxslider.js?ver=1.0.0:1343
    superfish.js?ver=1.0.0:262
    scripts.js?ver=1.0.0:1

  • […] Crear un tema WordPress desde cero – Construyendo la base de nuestra plantilla […]

  • Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.