Para poder seguir este tutorial, vamos a necesitar tener WordPress instalado. Si no lo tienes instalado todavía, te dejo la primera parte sobre como crear un tema para wordpress desde cero parte 1 te puede ser de utilidad.

Suponiendo pues que tenemos WordPress instalado y en correcto funcionamiento, lo primero que tendremos que hacer es ir a la carpeta que contiene los temas de WordPress. Esta carpeta se encuentra en las siguiente ruta: carpetawordpress > wp-content > themes, siendo carpetawordpressla carpeta donde tenemos instalado WordPress. Dentro de themes veremos las carpetas de los temas de WordPress que contiene nuestra instalación. Crearemos una nueva carpeta con el nombre de nuestro nuevo tema.

Para este tutorial nuestro nuevo tema se llamará mitema, con lo que que dentro de themescrearemos la carpeta mitema.

Entonces comencemos con la segunda parte de este tutorial:

Archivos de un tema de WordPress

Tal y como veremos, WordPress funciona por módulos, así por ejemplo para insertar el footer en una página habremos de llamar al archivo footer.php, en caso que exista. Y lo mismo con el header y la barra lateral del tema. Asi, un tema de WordPress puede estar formado por muchos archivos, pero para que un tema de WordPress funcione, sólo necesitará dos archivos:index.php y style.css. Está claro que con sólo estos dos archivos tendremos un tema muy básico y de ir por casa, pero a final de cuentas, será considerado por WordPress un tema válido si estos dos archivos están bien configurados.

Con esto estamos también diciendo que para que un tema de WordPress sea reconocido por WordPress deberá incluir sí o sí estos dos archivos index.php y style.css. Con que falte la hoja de estilos o el archivo index.php WordPress no reconocerá la carpeta mitema como un tema de WordPress.

Aquí vamos a desarrollar un tema más completo que nos sirva de base para otros proyectos. Y raramente crearemos un tema de WordPress que no contenga una cabecera, un footer y una barra lateral, por no decir un buscador interno. Tampoco vamos aquí a desarrollar un tema complejo con Custom Post Types y funciones avanzadas, pero sí que queremos tener lo necesario para crear un tema decente con el que poder desarrollar proyectos más complejos.

Así, vamos a desarrollar un tema con la mayoría de archivos y carpetas que utilizo para este tema de CreativaSfera, y serán los siguientes:

• /images. Carpeta con las imágenes del tema.
• /js. Carpeta con los archivos de JavaScript
• style.css. Hoja de estilos del tema. Obligatoria para que el tema funcione.
• index.php. Obligatorio para que el tema funcione. Por defecto será la página principal.
• screenshot.png. Muestra la imagen en miniatura que se verá en el panel de adminsitración en Apariencia > Temas.
• favicon.ico. La imagen que se verá en el navegador y al guardar el marcador.
• header.php. Módulo que contiene la cabecera del tema.
• sidebar.php. La barra lateral del tema. Nota: Si queremos más de una barra lateral, se habrán de configurar de modo manual.
• footer.php. Módulo que contiene el pie de página del tema.
• single.php. Este archivo indica cómo se ve una entrada de blog.
• category.php. Muestra cómo se ve la página de resultados de una categoría.
• tag.php. Muestra cómo se ve la página de resultados de una etiqueta.
• search.php. Muestra cómo se ve la página de resultados de búsqueda.
• template.php. Plantilla de página que a título de ejemplo llamaremos template.
• functions.php. Archivo con las funciones de nuestro tema de WordPress.

Como comentaba, en esta plantilla utilizaremos prácticamente los mismos archivos que en los del tema de esta web, para que veas que no es tan complejo como de entrada pueda parecer. A partir de aquí entrarán temas como diseño, capacidad de crear un buen código HTML y CSS, etc, pero lo que es el tema de WordPress en sí que vamos a desarrollar será muy parecido al de esta web. Si yo puedo, ¡tú también! Y como todos hemos empezado alguna vez de cero y visto lo difícil que es encontrar buenos tutoriales de cómo crear un tema de WordPress desde cero en castellano, aquí tienes uno bien completo que te permitirá crear una web parecida a esta.<

Para no perdernos en la inmensidad y hacer fácil lo supuestamente difícil, vamos a aplicar la técnica del divide y vencerás. Cuando empecé a desarrollar mi primer tema de WordPress me sentí un poco abrumada por la de funciones que recoge el Codex de WordPress, por lo que descubrí que lo mejor era ir paso a paso, sin dejarse abrumar por tanta información. Así que iremos paso a paso y crearemos nuestro primer tema de WordPress desde cero.

Paso 1: Creamos el archivo style.css

El primer paso va a consistir en crear dentro de la carpeta mitema el archivo style.css. Te recomiendo utilizar un buen editor de textos para desarrollo web, en mi caso concreto utilizo Brackets, pero puedes utilizar cualquier otro.

Dentro del archivo style.css, en la parte superior deberemos incluir esta información:

/*
Theme Name: Mitema
Theme URI: http://www.mitema.com
Description: Mi primer tema de WP.
Author: Tu nombre
Author URI: http://www.tunombre.com
Version: 1.0
*/

Fíjate que este fragmento de texto está comentado con /* … */. Todos los datos que ponemos aquí van a aparecer junto al tema en Apariencia > Temas. En el caso del tema de CreativaSfera, estos son los datos que tengo:

/*
Theme Name: Zenva
Theme URI: http://academy.zenva.com
Description: Web de Zenva. Todos los derechos reservados
Author: Klinsmann Fabian
Author URI: http://academy.zenva.com
Version: 3.2
*/

En mi caso en descripción aparece “Todos los derechos reservados” ya que es un tema desarrollado en exclusiva para esta web y que no puede ser distribuido sin mi permiso.

A conitnuación, si vamos a utilizar HTML5, es conveniente insertar normalize.css. Lo podemos importar o bien incrustar aquí. Puedes descargarte aquí una copia de normalize.css.

A partir de aquí, podemos ya crear nuestro propio código de CSS.

Paso 2: Imágenes y JavaScript

Este tema lo vamos a desarrollar con HTML5, por lo que para su correcto funcionamiento en todos los navegadores vamos a necesitar Modernizr, y en caso que hagamos una web responsive, también necesitaremos respond.js. Modernizr es una librería de JavaScript que detecta las capacidades de HTML5 y CSS3 del navegador. Respond es un polyfill que sirve para que Internet Explorer sepa interpretar los media queries de CSS3.

Así, crearemos las carpetas images y js dentro de la carpeta mitema, y en js pondremos una copia de Modernizr y Respond.

Ten en cuenta que el screenshot.png y el favicon.ico se han de ubicar en la raíz del tema y no dentro de la carpeta images.

Paso 3: creamos la cabecera del tema

El archivo header.php contiene la cabecera de nuestro tema. Es aquí donde pondremos nuestro logo, menú principal y aquello que aparezca en la parte superior de nuestro tema. Veamos el código de header.php:

>"><?php wp_title(); ?>

	<!-- Definir viewport para dispositivos web móviles -->
	

	
	

	

	<!--?php wp_head(); ?-->

Lo primero que hemos hecho ha sido declarar el doctype, en este caso para HTML5. Seguidamente hemos abierto la etiqueta html indicando que seleccione los atributos de idioma de la instalación de WordPress. Dentro de head hemos usado bloginfo( 'charset' ); para que seleccione la codificación predeterminada de nuestra instalación de WordPress. La funciónwp_title() selecciona y muestra el título especificado en Ajustes > General del panel de administración de WordPress.

En el caso de estar diseñando un tema responsive, especificaremos el viewport. Para mostrar la URL al favicon.ico le habremos de indicar la ruta a la carpeta mitema de la instalación de WordPress, y para ello llamafremos a la función de PHP get_stylesheet_directory_uri();:

link rel="shortcut icon" href="<!--?php echo get_stylesheet_directory_uri(); ?-->/favicon.ico" />

Otro modo de acceder a mitema será:

<script src="/js/respond.min.js">

Aquí hemos accedido al directorio de mitema con bloginfo('stylesheet_directory');.

Finalmente incluiremos la función wp_head de WordPress, necesaria par que muchos plugins y funcionalidades de WordPress funcionen. A partir de aquí cerramos la etiqueta head y empezamos con los contenidos de body.

Quizás aquí te estés preguntando por que incluir el body en header.php y no en index.php. La razón es sencilla: los contenidos de la cabecera del tema van a estar en todas las páginas, por lo que al incluirlo aquí, evitamos duplicar código y el mantenimiento del tema va a ser mucho más sencillo. Así, dentro de las etiquetas de header incluiremos nuestra cabecera. En este ejemplo, hemos puesto el nombre del sitio web con un enlace a la página de inicio:

Insertar el menú de navegación

Fíjate que en la etiqueta header hemos escrito esta línea:

<!--?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?-->

Bien, para que esto funcione, primero deberemos añadir al archivo functions.php este código:

<!--?php // Registro del menú de WordPress add_theme_support( 'nav-menus' ); if ( function_exists( 'register_nav_menus' ) ) { register_nav_menus( array( 'main' => 'Main' ) ); } ?-->

Este código lo que hace es crear un menú llamado “Main” que nos aparecerá en el panel de administración de WordPress en Apariencia > Menús. Lo que esté código dice es que si existe una función llamada register_nav_menus, que entonces cree un nuevo menú de navegación llamado Main. Hemos añadido la función de WordPRess add_theme_support() para indicar que en este tema queremos poder crear menús dinámicos.

A partir de aquí, simplemente habremos de ir a Apariencia > Menús y crear nuestro menú y guardarlo:

Con esto ya tenemos la cabecera del tema creada junto con su menú de navegación. Recuerda que para añadir páginas al menú de WordPress, primero hay que crear las páginas o no podremos hacerlo.

Si quieres crear un menú de navegación complejo, que sea responsive, incluya imágenes, mapas, sub menús y entradas, te recomiendo el plugin WordPress Ubermenu, si bien es un plugin de pago, es el que utilizo en esta web y me ahorró un montón de horas de codificación y trabajo. Con sus más de 17.000 ventas y una valoración de 5 sobre 5 estrellas, es algo a tener en cuenta.

Paso 4: creamos la barra lateral

La mayoría de temas de WordPress incluyen una barra lateral que no tiene por qué aparecer en todas las páginas del tema. En las barras laterales acostumbramos a poder añadir widgets, por lo que se van a tener que habilitar para widgets. Para ello, abriremos nuestro archivo functions.php e incluiremos esta función:

<!--?php // Main Sidebar if(function_exists('register_sidebar')) register_sidebar(array( 'name' => 'Main Sidebar', 'before_widget' => '</p> <hr> <p>', 'after_widget' => '', 'before_title' => '</p> <h3>', 'after_title' => '</h3> <p>', )); ?-->

Al hacer esto, si vamos a Apariencia > Widgets, veremos que nos aparece una nueva zona de widgets llamada Main Sidebar. Si nunca has creado una zona de widgets, te recomiendo este artículo para aprender a crear una zona lista para WordPress.

El archivo sidebar.php

Una vez creada la zona lista para widgets, vamos a tener que llamarla dentro del archivosidebar.php. Creamos este archivo y escribimos:

He utilizado un id teniendo en cuenta que en este tema sólo va a existir una barra lateral, pero si quieres crear más, quizás prefieras crear una clase. Con esto ya tenemos creada la barra lateral lista para widgets.

Paso 5: creamos el footer

Hasta aquí hemos creado la cabecera y la barra lateral. Ahora vamos a crear el footer para después integrarlo todo en index.php. Recordemos que WordPress funciona por módulos, con lo que lo que estamos haciendo ahora es crear los módulos necesarios para que nuestra página de inicio, en este caso index.php, se muestre correctamente.

El archivo footer.php

Fíjate que wrapper engloba tanto el header como el footer, si queremos un header o un footer que se extienda toda la pantalla como es en el tema de CreativaSfera, deberemos mover las posiciones de los div que abren y cierran wrapper.

Aquí aparece la función wp_footer, que al igual que pasaba con wp_header, no debemos olvidarla. Estas funciones son lo que se llaman hooks y son necesarias para que funcionen los plugins que instalemos.

En el caso de wp_footer va a ser además necesaria si queremos ver la barra de administración de WordPress. Lo comento más que nada porque no serás el primero que se vuelve loco buscando el por qué no aparece la barra de administración hasta que descubre que es porque no ha llamado a este hook de WordPress.

Paso 6: creamos la página principal

Como ya he comentado, en este tutorial la página principal se va a corresponder a los contenidos de index.php. Así, creamos este archivo tal y como indico a continuación.

El archivo index.php

<!--?php get_header(); ?-->

Fíjate en estas tres funciones:

get_header();

get_sidebar();

get_footer();

Deben ir siempre entre las etiquetas , o en otro caso no funcionará. Para que lo entiendas, lo que hace get_header() es insertar los contenidos del archivo header.php en el lugar donde se encuentra esta función. Lo mismo pasa con get_sidebar() para los contenidos de sidebar.php yget_footer() para los contenidos de footer.php. Es lo que comentaba de que WordPress funciona por módulos.

Paso 6. El loop de WordPress

La potencia de WordPress reside en el loop. ¿Qué es el loop? Significa bucle en inglés y lo que hace es mostrar las entradas de la instalación de WordPress de la forma en que nosotros lo programemos. Es gracias al loop de WordPress que podemos ver un listado de entradas

A continuación te muestro el código del loop:

<!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->

Publicado el por

Vayamos paso a paso. En la primera línea tenemos:

<!--?php if(have_posts()) : ?--><!--?php while(have_posts()) : the_post(); ?-->

Lo que aquí le estamos diciendo a WordPress es que mire si hay alguna entrada disponible, esto lo hacemos con if(have_posts()). Fíjate en el if, significa que sólo ejecute el resto si esta condición se cumple, esto es, que exista algún post. Lo siguiente que le decimos es que mientras haya entradas, esto es, while(have_posts()), que seleccione cada uno de los posts:the_post().

Una vez ha seleccionado el post, lo siguiente es que le vamos a indicar cómo ha de mostrar los contenidos del post.

Así pues, ahora mostraremos el título de la entrada con una enlace a la misma:

La función the_permalink() se encarga de encontrar el enlace permanente a la entrada, para que podamos ir a la misma. Y la función the_title() mostrará en pantalla el título de la entrada.

Si queremos que debajo del título se vean datos como la fecha de publicación, la categoría, el autor, etc., se lo tendremos que especificar a continuación:

<small>Publicado el <!--?php the_time('j/m/Y') ?--> por <!--?php the_author_posts_link() ?--></small>

La función the_time() muestra la fecha de publicación y en el paréntesis podemos definir el formato de la fecha entre comillas. Con la función the_author_posts_link() estamos mostrando el nombre del autor con un enlace a su página de autor.

Si queremos mostrar las etiquetas, lo haremos con la función the_tags(), y si lo quisiéramos hacer es mostrar la categoría de la entrada, utilizaríamos la función the_category().

Seguidamente, con la función the_excerpt() mostraremos el resumen de la entrada. Si no hemos creado un resumen, se mostrará la primera parte de la entrada.

Para cerrar el loop, llamamos este código:

<!--?php endwhile; else: ?-->

En el caso que no hayan entradas, se mostrará el mensaje de “No hay entradas”.

Paso 7. Añadir thumbnails al loop

Si queremos añadir thumbnails al loop como sucede en este blog, lo que haremos es lo siguiente: vamos al archivo functions.php y añadimos este código:

<!--?php //Habilitar thumbnails add_theme_support('post-thumbnails'); set_post_thumbnail_size(150, 150, true); ?-->

Con este código hemos habilitado los thumbnials o imágenes destacadas de nuestras entradas y hemos establecido un tamaño para las mismas de 150 por 150 píxeles. Una vez hecho esto, modificaremos nuestro loop como sigue:

<!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->

Publicado el por

Fíjate que hemos añadido:

<!--?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?-->

if ( has_post_thumbnail() ) significa que compruebe si la entrada en cuestión tiene una imagen destacada asignada y en caso afirmativo, le decimos que la muestre con the_post_thumbnail();.

A partir de aquí, si queremos que el extracto quede en línea con la imagen destacada, lo haremos a través del CSS.

Con esto ya hemos creado nuestra página principal, con su cabecera, zona de contenidos con las últimas entradas, barra lateral y pie de página.

Paso 8.Configurar la página que muestra la entrada

La página del post es aquella donde vamos a ver la entrada en cuestión. Vamos a poder definir cómo se ve, incluir o no comentarios, etc.

El archivo single.php

<!--?php get_header(); ?-->

Este código es el mismo que utilizo en CreativaSfera, con lo que es fácil de entender con todo lo que hemos explicado ya. Faltaría añadir el poder poner comentarios en cadena y las entradas relacionadas. En el loop utilizamos the_excerpt() para mostrar el extracto de la entrada, mientras que aquí utilizamos la función the_content() para que se muestre el contenido de la entrada.

Mostrar las entradas relacionadas en single.php

Para mostrar las entradas relacionadas, añadiremos este código justo después de mostrar el contenidos de la entrada:

		<!--?php $tags = wp_get_post_tags($post->ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id; $args=array( 'tag__in' => $tag_ids, 'post__not_in' => array($post->ID), 'showposts'=>5, // Number of related posts that will be shown. 'caller_get_posts'=>1 ); $my_query = new wp_query($args); if( $my_query->have_posts() ) { echo '</p> <h3>Artículos relacionados</h3> <ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?-->

Explicar este código excede el abasto de este post, simplemente decir que muestra las entradas relacionadas en base a las etiquetas de las entradas.

Habilitar y mostrar los comentarios

En una entrada va a ser necesario que podamos comentar y ver los comentarios de los otros.

Para permitir los comentarios encadenados, añadiremos este código a nuestro archivofunctions.php:

// Permitir comentarios encadenados
function enable_threaded_comments(){
    if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) {
       wp_enqueue_script('comment-reply');
    }
}
add_action('get_header', 'enable_threaded_comments');

Y en single.php justo antes de la línea que contiene el endwhile añadiremos:

Es el CSS lo que visualmente nos va a permitir que se vean los comentarios encadenados:

.commentlist li {
  list-style: none !important;
}


.comment-body {
  padding: 15px;
}

.comment-author {
  margin-top: 5px;
}

.reply,  .commentmetadata {
  font-size: 0.9em;
}


.depth-1, .depth-2, .depth-3, .depth-4 {
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

.depth-1, .depth-3 {
  background-color: #fafafa;
}

.depth-2, .depth-4 {
   background-color: #fff;
}

.comment-author-eSandra {
  border: 3px solid #eaeaea;
  border-left:3px solid #fbc356;
}

.depth-1 {
   margin: 20px 0;
}
/* Respuesta a comentarios*/


.depth-2 {
  margin:2% 5% !important;
}

.depth-3 {
   margin: 2% 7% !important;
}


.depth-4 {
  margin:2% 5% 4% 10% !important;
}
#comment, #author, #email {
  border-radius: 4px;
  border:2px solid #ccc;
}

Con todo esto, ya tenemos la página de la entrada.

Paso 9. Crear una nueva plantilla

Para crear nuestras propias plantillas y poderlas seleccionar desde el panel de administración de WordPress cuando creemos o editemos una página, simplemente hemos de añadir en la parte superior este código:

<!--?php /*Template Name: Nombre_de_la_plantilla */ ?-->

A partir de aquí, le daremos el formato que queramos.

Paso 10: Página de categorías y etiquetas

Las páginas de category.php y etiquetas.php son prácticamente iguales. Simplemente añadiremos antes del loop:

<!--?php $post = $posts[0]; ?-->
	<!--?php if (is_category()) { ?-->
	<!--?php } elseif( is_tag() ) { ?-->

Etiqueta &amp;amp;amp;#8216;&amp;amp;amp;#8217;

Archivo para :

Archivo para :

Archivo para :

Archivo del autor

Archivos del blog

Haremos lo mismo si queremos crear una página con nuestros archivos.