Tecnología y Coaching para Emprendedores

Aprende a crear un tema de WordPress desde cero

wordpress

WordPress es un sistema gestor de contenidos muy potente con el que podemos crear sitios web muy potentes y versátiles. Todavía hay quien piensa que WordPress es sólo una plataforma para crear blogs, pero nada más lejos de la realidad, con WordPress podemos crear verdaderos portales web que incluyan incluso una tienda online.

Existen muchos sitios web donde adquirir plantillas de WordPress premium de gran valor añadido, sin ir más lejos aquí he recopilado 50 de las mejores plantillas de WordPress. Pero a veces queremos ir un paso más allá y desarrollar nuestro propio tema, y las primeras veces tenemos la tendencia a tirar de un framework como Thematic o de un tema básico pensado para desarrollo como Bones.

La primera vez que creé un tema de WordPress lo hice usando el framework Thematic. La razón por la que escogí un framework y no lo desarrollé desde cero es que debido a mi falta de conocmientos previos sobre temas de WordPress me pareció algo muy difícil. Sin embargo con el tiempo me di cuenta que era mucho mejor desarrollar un tema de WordPress desde cero, pues te evitas llamar a un montón de funciones innecesarias para las prestaciones que necesitas y además tienes el control 100% sobre todos los archivos y contenidos de la plantilla de WordPress en cuestión.

He creado este artículo con el claro objetivo de ayudarte a crear un tema de WordPress desde cero sin necesidad de conocimientos previos de cómo se estructura una plantilla de WordPress. Se entiende que tienes sólidos conocimientos de HTML y CSS, y algún conocimiento de PHP te puede ser útil, aunque no es imprescindible.

Taller impartido en el Congreso Web 2013[/caption]

Cómo crear un tema de WordPress desde cero

Para poder seguir este tutorial, vamos a necesitar tener WordPress instalado. Si no lo tienes instalado todavía, este tutorial sobre cómo instalar WordPress en tu ordenador 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 carpetawordpress la 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 themes crearemos la carpeta mitema.


Extras

Si antes de leerte el artículo quieres tener una idea de qué va, te recomiendo estas diapositivas de mi presentación del taller de WordPress en el Congreso Web de Zaragoza, así como este vídeo del hangout que di con el equipo de desarrolloweb.com con tips para crear un tema de WordPress desde cero.

Diapositivas del Congreso Web

Te dejo aquí las diapositivas de mi taller de WordPress impartido en el Congreso Web 2013 de Zaragoza.

Hangout con el equipo de desarrolloweb.com

Y aquí el hangout con los tips para crear un tema de WordPress desde cero:


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 Sublime Text 2, 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: CreativaSfera
Theme URI: http://www.esandra.com
Description: Web de CreativaSfera. Todos los derechos reservados.
Author: eSandra 
Author URI: http://sandra.esandra.com
Version: 4.0
*/

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:


<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
	<meta charset=	<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>

	<!-- Definir viewport para dispositivos web móviles -->
	<meta name="viewport" content="width=device-width, minimum-scale=1">

	<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
	<link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

	<?php wp_head(); ?>

</head>
<body>
	<div class="wrapper">
		<header>
			<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
			<hr>
			<?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?>
		</header>

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ón wp_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="<?php bloginfo('stylesheet_directory'); ?>/js/respond.min.js"></script>

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:

<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
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:

menu wordpress

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, submenú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 valoracuió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' => '<hr>',
            'after_widget' => '',
          'before_title' => '<h3>',
          'after_title' => '</h3>',
     ));

?>

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 archivo sidebar.php. Creamos este archivo y escribimos:

<section id="sidebar">

	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Main Sidebar') ) : ?>
	<?php endif; ?>


</section>

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
<footer>
	<p>&amp;amp;amp;copy; <?php bloginfo('name'); ?>, <?=date('Y');?>. Mi primer tema de WP.</p>

</footer>

</div> <!-- Fin de wrapper -->

<?php wp_footer(); ?>
</body>
</html>

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(); ?>


  <section id="main">



  </section> <!-- Fin de main -->

    <?php  get_sidebar()?>


  <?php get_footer(); ?>

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 y get_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 que utilizo aquí en CreativaSfera:

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

      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <small>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author_posts_link() ? </small>
      <?php the_excerpt(); ?>


    <?php endwhile; else: ?>
      <p><?php _e('No hay entradas .'); ?></p>
    <?php endif; ?>

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:

 <h3  class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente a <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

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: ?>
      <p><?php _e('No hay entradas .'); ?></p>
    <?php endif; ?>

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(); ?>

      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <small>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author_posts_link() ?>  </small>
     <div class="thumbnail">
        <?php
            if ( has_post_thumbnail() ) { 
                  the_post_thumbnail();
            }
        ?>
     </div>
        <?php the_excerpt(); ?>

    <?php endwhile; else: ?>
      <p><?php _e('No hay entradas .'); ?></p>
    <?php endif; ?>

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. Para añadir una paginación de las entradas, te recomiendo este post sobre cómo crear la paginación de las entradas en WordPress. Aunque esté en inglés, como es sólo código es fácil de entender. En cualquier caso, si descargas los archivos de este tema, viene ya incluida la paginación tal y como la muestra este post y que utilizo aquí en eSandra (no hace falta reinventar la rueda).


Paso 8. Crear un campo de búsqueda

Vimos ya cómo crear un campo de búsqueda en WordPress. Lo vamos a adaptar ahora a nuestro tema.

El archivo search.php
<?php get_header(); ?>

  	<section id="main">
	<h2>Resultados de la búsqueda</h2>
         <?php if (have_posts()) :  while (have_posts()) : the_post(); ?>

      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <small>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author_posts_link() ?>  </small>
     <div class="thumbnail">
        <?php
            if ( has_post_thumbnail() ) {
                  the_post_thumbnail();
            }
        ?>
     </div>
        <?php the_excerpt(); ?>

 <?php endwhile; ?>
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>
<?php  else: ?>
<div class="entry"><?php _e('Lo sentimos, no hay resultados con este término de búsqueda.'); ?></div>
<?php endif; ?>

</section> <!-- Fin de main -->

<?php  get_sidebar()?>

<?php get_footer(); ?>

Fíjate que se parece mucho a index.php. Esta página es la que va a mostrar los resultados de una búsqueda en cuestión. Así, vamos a necesitar crear un buscador. Vamos al archivo sidebar.php y justo antes de la función que habilita la zona de widgets en el sidebar, incluimos este código:

	<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<input type="text" placeholder="Buscar…" value="<?php the_search_query(); ?>" name="s" id="s" />
		<button type="submit" class="icon-only"  id="searchsubmit"></button>
	</form>

Con esto tenemos un campo de búsqueda en nuestra barra lateral. Para que se visualice como queremos, simplemente hará falta crear el código CSS necesario.


Paso 9.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(); ?>

  	<section id="main">
  	  	<article id="single">
      		<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

      		  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente a <?php the_title_attribute(); ?>"><?php the_title(); ?>. </a></h2>
              <small> Publicado por <?php the_author_posts_link() ?>  el <?php the_time('j/m/Y') ?>. Categoría: <?php the_category(', '); ?> </small><br>

      		<div class="post">

      		   <?php the_content(); ?>

	      </div>


<?php endwhile; ?>

<?php endif; ?>

	</article> <!-- Fin de single -->

  </section> <!-- Fin de main -->
  <?php  get_sidebar()?>

<?php get_footer(); ?>

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 '<h3>Artículos relacionados</h3><ul>';
    		while ($my_query->have_posts()) {
    			$my_query->the_post();
    			?>
    			<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
    		<?php
    		}
    		echo '</ul>';
    	}
         wp_reset_query(); 
    }
?>

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 archivo functions.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:

<div class="comentarios">
	<?php comments_template(); ?>
</div>

Es el CSS lo que visualmente nos va a permitir que se vean los comentarios encadenados, aquí el CSS que utilizo para los comentarios en CreativaSfera:




.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;
}0
1
+
#comment, #author, #email {
  border-radius: 4px;
  border:2px solid #ccc;
}

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


Paso 10. 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 11: 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() ) { ?>
		<h2>Etiqueta &amp;amp;amp;#8216;<?php single_tag_title(); ?>&amp;amp;amp;#8217;</h2>
	<?php } elseif (is_day()) { ?>
		<h2>Archivo para <?php the_time('F jS Y'); ?>:</h2>
	<?php  } elseif (is_month()) { ?><h2>Archivo para <?php the_time('F, Y'); ?>:</h2>
	<?php } elseif (is_year()) { ?>
		<h2>Archivo para <?php the_time('Y'); ?>:</h2>
	<?php /} elseif (is_author()) { ?>
		<h2>Archivo del autor </h2>
	<?php } elseif (isset($_GET['paged']) &amp;amp;amp;&amp;amp;amp; !empty($_GET['paged'])) { ?>
		<h2>Archivos del blog</h2>
<?php } ?>

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


Para acabar

En este artículo hemos visto cómo crear un tema de WordPress desde cero. Este tutorial tiene una extensión de más de 4000 palabras, con lo que debería ser suficiente para sentir que se tiene una buena base para desarrollar un tema de WordPress desde cero. Se pueden añadir otros archivos, como author.php para mostrar la página de autor, o 404.php para crear nuestra propia página de error, pero creo que con los conocimientos mostrados en este artículo no debería haber ninguna dificultad para crearlos.

Si quieres profundizar un poco más, te recomiendo el ebook Building WordPress Themes from Scratch, una fuente que a mí me fue muy útil en mis primeros pasos en el desarrollo de un tema de WordPress.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • Javier Platón

    Buenas Sandra,

    Impresionante el nivel de detalle, mil gracias por el esfuerzo, muy muy ÚTIL

    Gracias

    • Sandra

      Muchas gracias, Javier, la verdad es que he trabajado muchas horas en este post, pero quería llenar el vacío que había en los blogs en español sobre la creación de un tema de WordPress desde cero. Me alegro de que te haya servido :-)

  • José A. Marco

    Hola Sandra, he leído tu tutorial. Muy bueno, yo había seguido tutoriales en un ingles traducido por google que a veces resulta lioso, tu tutorial me a ayudado a repasar cosas.

    Gracias y suerte.

    • Sandra

      Gracias José, me alegro te haya servido :-)

  • Pablo López

    Muy buena guía para iniciarse en el desarrollo de un tema de WordPress desde cero. Lo que hubiera dado por tener este tutorial en su día!!

    Enhorabuena

    • Sandra

      Gracias Pablo, yo también eché de menos una guía así cuando di mis primeros pasos en WordPress, por eso me decidí a crearla yo :-D

  • Luis Suarez

    Tenía conocimientos de varios lenguajes de programación pero no del uso de WordPress. Gracias por el tutorial, es muy importante aprender cosas dia a dia en este mundillo y con personas como tu, esta tarea es muchísimo más fácil.

    • Sandra

      Gracias Luis, espero que la guía te sirva. Un saludo!

  • David

    Tan sólo darte las gracias por semejante tutorial. Pasa a marcadores y la web a favoritos. Enhorabuena.
    Estoy deseando probarlo y crear mi primer tema.
    Gracias!

    • Sandra

      Muchas gracias David, te recomiendo descargar los archivos para tenerlos de referencia si surge algún problema :-)

  • Pablo

    Muchas gracias! Lo he probado y los post se cargan correctamente. Mi duda es si resultaría muy complicado añadir la funcionalidad de cargar páginas, porque ahora mismo cuando intento cargar una me salta a la página de inicio.

    Muchas gracias de nuevo, un saludo!

    • Sandra

      Hola Pablo, ¿a qué te refieres con cargar páginas?

      • Pablo

        A mostrar las páginas que creas con wordpress, con el código que pusiste en este tutorial se cargan los post, pero cuando intento cargar una página creada con wordpress se muestra el contenido del index.php, la foto imagen y el texto que he puesto a modo de pruebas.

        Para crear las páginas lo hago desde el menú de administración de wordpress, en páginas, añadir nueva.

        Gracias.

        • Pablo

          Probando probando he creado el archivo page.php e insertado esto:

          get_page($page_id);
          $page_data = get_page($page_id);

          echo ” . $page_data->post_title . ”;

          echo apply_filters(‘the_content’, $page_data->post_content);

          Muchisimas gracias, me entusiasmó mucho el tutorial y a partir de ahora te seguiré cada dia!

        • Sandra

          Ah fantástico, gracias por compartir, se me olvidó publicarlo :-)

  • Impulso Creativo – Diseño Web

    Hola Sandra, muy bueno tú artículo, me va a costar un poco interpretar todos los datos pero es lo mejor que he encontrado en mucho tiempo, he intentado varias veces crear un theme desde cero pero al final he desistido, gracias por crear un artículo tan bien explicado, saludos.

    • Sandra

      Hola, deseo que esta vez sea la definitiva y crees tu primer tema desde cero :-)

  • Adhara Diseño Web

    Muchas Gracias estoy haciendo el traspaso de mi web comun a WordPress,
    Me ayuda mucho saber como hacer una plantilla.
    Gracias!

    • Sandra

      A ti por comentar :-)

  • vxd

    Buen tutorial para los que no tenemos ni idea de PHP,es asi y me lio un monton………queria hacerte una pregunta, seria posible dar a cada categoria un estilo diferente….con menus diferentes de la pagina principal?

    • Sandra

      Hola, sí, deberías crear otro menú y con el CSS darle otro estilo.

      • vxd

        Pero como doy estilos diferentes a cada categoria? tambien incluiria las subcategorias?Es posible juntar dos themes para el mismo dominio?

  • Javier Melenchón

    Sandra, sólo quería felicitarte por el extenso tutorial que has publicado aquí. Sin duda de mucha ayuda y utilidad para quien se esté introduciendo en el mundo de WordPress y la gestión de contenidos.

    • Sandra

      Muchas gracias, Javier, es el tema de la conferencia que voy a dar en el Congreso Web de Zaragoza, así los participantes tendrán la guía por escrito :-)

  • Juan Luis Romero

    Gracias Sandra por el tutorial, estoy comenzando en este mundillo del diseño web, y francamente me ha parecido fantastico y bastante bien explicado. Gracias tambien por el tutorial de Instalación de WordPress, por fín y gracias a el, lo conseguí instalar.
    Creo que me voy a poner manos a la obra y con las explicaciones que has dado aqui, voy a intentar hacer mi propio tema, estoy ansioso por comenzar con ello.

    Un saludo y nuevamente gracias por tan buena explicación.

    • Sandra

      Hola Juan Luis, me alegro que te haya servido y motivado a crear tu primer tema!

  • Antonio

    Muy buen tutorial Sandra, y yo comprando libritos de 400 páginas sobre wordpress ;D

    • Sandra

      jajaja, qué buena Antonio :-D

  • Leonardo Román

    Hola Sandra,

    Excelente tu aporte, sin embargo me parece que es mucho más fácil realizar plantillas para joomla o drupal, este es mi parecer y respeto todos los comentarios de los otros colaboradores.

    ¿Tú haces plantillas para joomla? Porque sería muy bueno tener la oportunidad de ver tu experiencia con joomla y poder comparar estos dos cms.

    Un gran saludo!

    • Sandra

      No, yo prefiero WordPress y soy de la opinión que es mejor especializarse que meterse en un montón de CMS..

  • Jose Antonio Vilar

    Muchas gracias! Buen tutorial!

  • Ani Mendez

    Yo sí quiero poner 2 sidebars :( no se como hacer

    • Sandra

      Este es un tutorial básico, imposible entrar en todos los detalles, es un post no un libro, jeje.. fuera bromas si buscas en Google lo encuentras fijo :-)

  • Jossue

    No puedo decir algo mejor que!!!… “Excelente” =D

    • Sandra

      Muchas gracias, Jossue :-)

  • Danyel

    Muy buen contenido Sandra. Todo muy bien explicado y paso a paso. Ojalá hubiera tenido esta documentación cuando empecé con wordpress =D !

    • Sandra

      jajaja, bueno, seguro que los libros te explican cosas que aquí no vemos :-)

  • Rafa

    Hola Sandra,
    Me ha sido imposible asistir a tu taller impartido esta mañana en el Congreso Web, a pesar de habérmelo propuesto de antemano.
    Intentaré con este tutorial y algo de paciencia poner en marcha mi primer tema en WordPress… no será fácil, pero seguro que son de mucha ayuda tus indicaciones.
    Muchas gracias del novato.

    • Sandra

      Hola Rafa, no te preocupes, aquí tienes las diapositivas del taller que di en el Congreso Web junto con un extenso tutorial y el material listo para descargar. Seguro que si sigues todo paso a paso lo acabas entendiendo todo. Un saludo!

  • Andres

    Muchas gracias por este gran trabajo, yo también llevaba tiempo buscando algo así. Lastima no haber podido asistir a tu charla en el Congreso Web. ¿Sabes si se va a publicar el vídeo? ¿Me puedes recomendar algún libro en Castellano de calidad sobre desarrollo en WordPress? ¿Has pensado en lanzarte y escribir uno?

    • Sandra

      No tengo ni idea del tema del vídeo, es algo que lleva la organización.. no conozco libros buenos en castellano sobre cómo crear un tema de WordPress desde cero. Cara a escribir uno, es una posibilidad, pero ahora mismo voy hasta arriba de trabajo, así que de momento no va a poder ser..

  • Boris

    Lo primero darte las gracias por compartir todo esto con los muchos que queremos crear propios temas en wordpress y dedicar todo el tiempo que has dedicado al explicarlo tan bien. Mi pregunta es: al haber incluido codigo como has hecho he de suponer que tienes conocimiento de php y saber “donde” tener que incluirlo, es asi? Puedes por favor comentar un poco acerca del nivel de php que uno a de tener para la creacion de plantillas propias? Gracias Sandra por compartir tu tiempo una vez mas.

    • Sandra

      Para crear un tema sencillo no son necesarios conocimientos avanzados de PHP, sólo entenderlo y conocer las funciones de WordPress más importantes. A partir de aquí, para temas más complejos sí que haría falta profundizar en PHP. Un saludo!

  • Bradis

    Hola Sandra excelente tutorial, vi tu hangout sobre wordpress y también fue bastante instructivo.

    Si puedes comparte los plugins que utilizas en Sublime para wordpress.

    Nota:No pude descargar el fuente de tu tema de ejemplo si pudieras enviármelo.

    Saludos desde Cuba.

  • Antonio

    Enhorabuena Sandra!!

    Me uno a la pregunta del video de tu ponencia en el congreso. Estaba apuntado pero el domingo me fue imposible asistir. Me encantaria verlo!!!

    Gracias!

    • Sandra

      Hola Antonio, lo mejor es que contactes al equipo que organizó el Congreso Web, ya que yo me limité a dar el taller de WordPress y no lo sé. Aquí al menos tienes las diapositivas, que creo te pueden ayudar mucho junto con este tutorial.

  • Miguel

    :0 Guau! Qué bueno el tutorial! Felicidades. Ya se echaba en falta un tutorial como este en castellano.
    Si me permites una preguntilla… Estoy intentando crear mi propio framework para no empezar de cero a la hora de crear un sitio web. Ahora mismo estoy analizando el código de varios, Underscores, Bones… también los temas del propio WordPress, Twenty Twelve, Twenty Eleven… he visto que en algunos que usan HTML5, en los listados de entradas, usan el encabezado h1 para el título de la entrada, por lo que te encuentras en una sóla página varios h1.
    Como sabes, en HTML5 está permitida la repetición de h1’s, pero de cara al SEO… ¿será perjudicial? ¿Sabes algo de esto o conoces algún artículo fiable donde se hable de este tema? Ya veo que en el tutorial tu has usado los h2.
    Ah, y otra cosa. Un plugin que me gustaría recomendaros muy útil a la hora de empezar a desarrollar themes es “What The File”, crea una opción en la barra de herramientas donde te muestra que archivos está usando la página que estás viendo en ese momento (archivos, template-parts, etc).

    Enhorauena de nuevo por el tutorial.
    Un saludo

  • Antonio Campos

    Hola Sandra, el domingo estuve en tu taller sobre programación de temas de WordPress en el Congreso Web.

    Te felicito, la exposición fue muy clara para tratarse de un tema tan complicado de explicar como es la progración. Para mi fue muy provechoso porque me aclaró algunas dudas que tenía sobre la creación de temas para WordPress, especialmente la creación de una segunda zona de widgets y una segunda sidebar.

    También quería preguntarte sobre los consejos de seguridad que comentaste al final del taller. ¿No crees que este tipo de funciones no estarían mejor agrupadas dentro de un plugin que puedieras importar a cualquier tema?

    Gracias!!

    • Sandra

      En sí ya existen plugins que lo hacen, pero en cualquier caso se trata de un plugin y no de un tema.. más todavía, hay cosas que requieren acceso a .htaccess, wp-config y la base de datos de WordPress, no es algo que crea vaya vinculado a un tema, por eso no lo incluyo aquí. Me alegro te gustara el taller :-)

  • Bruno

    Hay una paso (10) que no consigo entenderlo… podrías explicarlo algo mejor… ya que no entiendo a que te refieres exactamente…
    gracias

    • Sandra

      Se trata de una plantilla que creas tú diferente a la predeterminada.

      • Bruno

        Podrías desarrollar un poco mas tu contestación ya que no consigo entenderlo… :P y ya aprovecho para que me expliques tambien algo mejor como hacer el último paso de los tag y categorias… y archivos…

        Gracias por la ayuda…

        • Sandra

          Hola Bruno, entiendo que te queden dudas, pero comprende que yo no puedo dedicarme a entrar en las dudas detalladas de cada persona. En el Codex de WordPress o en el libro que menciono tienes todo en profundidad. Si no hablas inglés y necesitas ayuda personalizada, te animo a contratar clases online conmigo.
          Un saludo,
          Sandra

  • Omaro

    Hola, me encanto tu página y tu tutorial, muchas gracias por este gran aporte. Tengo una duda sobre el loop, ¿es una página aparte?

    • Omaro

      Hola, tengo otra consulta. Esta ese código en algún sitio para poder observar los archivos para comprender mejor el tutorial.
      Muchas gracias, saludos. :)

  • fran

    Buenas, necesito ayuda, por que me aparece que el tema esta dañado, dice que necesita la plantilla, ¿es debido al tema de plantillas hijos y plantillas padres?, gracias

    • Sandra

      Imposible de decir sin verlo..

  • Lester Fibla Saavedra

    Increíble. Espectacular. Muy cimpleto y muy claro.

    Muchas gracias.

    Fui siguiendo tus pasos y no tuve problema con ir creando el theme desde cero incluso agregando algunos pequeños cambios.

    El único problema que tuve fue al intentar poner más de un menú personalizado. Tu código no me resultaba. Finalmente tuve que usar:

    [functions.php]
    add_action( ‘init’, ‘my_custom_menus’ );
    function my_custom_menus() {
    register_nav_menus(
    array(
    ‘principal’ => __( ‘Menú Principal’ ),
    ‘secundario’ => __( ‘Menú Secundario’ ),
    ‘footer’ => __( ‘Menú Footer’ )
    )
    );
    }

    y luego en las páginas donde quería poner los menú usaba:

    ‘principal’ ) ); ?>
    ‘secundario’ ) ); ?>
    etc…

    • Sandra

      Hola Lester, muchas gracias por tu aportación! No había caído en explicarlo, gracias!

  • Paco

    Muy buen tutorial con mucho detalle, creo que suficiente para empezar mi primer tema despues mucho tiempo intentandolo, Gracias.

    • Sandra

      Muchas gracias, Paco, suerte con tu tema :-)

  • Eduardo Cervera

    buen día Sandra, estoy creando un nuevo sitio en el que incluyo un blog, y tu publicación me ayudo bastante para poder desarrollar un tema en le que se pareciera al tema de la pagina principal. observe un detalle con mi plantilla, le agregue el plugin de simple Lightbox, pero no funciona en mi plantilla, pero si cargo cualquier otra plantilla, ahí si funciona esa aplicación, a que se debe esta falla? y como podemos arreglarlo, saludos.

    • Eduardo Cervera

      Ya resolvi mi detalle, observando el contenido de otras plantillas, encontré que al final del footer agregan lo siguiente:

      y con eso ya funciona simple Lightbox :)

      Pero tengo otro detalle, cuando le doy formato a un div que contiene por ejemplo a comments_popup_link(‘0’, ‘1’, ‘%’) o the_permalink() o wp_get_archives(‘type=monthly’) se ven como enlaces(azules y subrayados) y no toman el formato establecido en el div que los contiene, que debo hacer para que se vena con el formato establecido? saludos

      • Eduardo Cervera

        jejeje ya vi cual es mi problema, no asignaba formato a los div como enlace, problema resuelto :)

        • Sandra

          Me alegro lo hayas solucionado!

  • Steven

    Hola Sandra, primero agradecerte por el enorme trabajo que haces al ayudar a muchxs, he seguido los pasos que indica el tutorial y pude levantar mi plantilla, el problema radica en que no lee mi css, es decir, está en la ruta correcta “http://localhost:8081/wordpress/wp-content/themes/mitema/style.css” pero al parecer no lo procesa, por decirlo así, y por lo tanto no le da ningún estilo a mi página. Espero puedas ayudarme. Saludos.

    • Steven

      Me respondo a mí mismo, y tal vez le suceda a otro, me di cuenta al final de que yo debí poner al div que iba después de abrir el body con el id “wrapper” y el section con el id “main” y luego llamarlo así en mi CSS, ahora ya se ve como lo tenía diseñado. Si a alguien le ha pasado algo similar a mi caso, ahí lo tienen.

      Saludos y siga así, estaré más pendiente de su página.

      • Sandra

        Hola Steven, me alegro lo hayas solucionado, gracias por compartir la manera en que lo has resuelto!

        • Steven

          Tengo una duda, yo he creé un archivo contacto.php que está enlazada a mi menú pero no me funciona al darle click al enlace. Lo he intentado editando en Apariencia > Temas poniendo el enlace en mi caso http://localhost:8081/wordpress/contacto.php pero nada.

          ¿Qué solución le puedo dar a esto? Gracias, otra vez.

        • Sandra

          Hola Steven,

          dentro de contacto.php arriba del todo has de poner esto dentro de las etiquetas de PHP:

          /*Template Name: Contacto */

          Después creas la página de contacto y en donde pone Atributos de página > Plantilla y seleccionas la plantilla que se llama Contacto.

          Ya me dices si lo solucionas :-)

        • Steven

          Grande, Sandra!!
          Muchas gracias de verdad.

  • Christian

    Hola

    soy medio novato en lo que refiere a html5 y wordpress per siguiendo un tutorial crea tu propio theme logre hacer primero una pagina web fluida con dreamweaver primero ella creo 3 archivos

    boilerplate.css
    respond.min.js
    index.php
    miestilo.css

    ahora bien instale un menu desplegable responsive que funciona bastante bien, veo que html5 se debe instalar los js antes de cerrar footer no como anteriormente que se ponian en head, solo si respond.min.js se mantiene antes del cierre de head.

    ahora bien esta pagina la lleve a wordpress, sacando los js llevandolos al footer.php (estoy bien), incluso el respond.min.js con este codido cada una de ellas incluso los js del menu responsive

    <script type="text/javascript" src="/js/respond.min.js”>

    todas las js en una carpeta js en wp-content/theme/js

    los css en wp-content/theme/css

    en el header.php puse

    para poder instalar plugins y widget antes del cierre de head

    he aqui los problemas

    instale para podr tener un banner slider con cyclone-slider 2 tambien easing slider uno solo a la vez
    instale para widget para ver videos youtube en el sidebar no se ve

    el sidebar en el caso de cyclone slider se pega y el menu responsive tambien se pega

    con easing-slider no se pega pero el menu responsive pierde su cualidad de desplegable osea solo se ven los primero item de la barra horizontal (menu horizontal desplegable), antes de llevarlo a wordpress cuando lo tenia solo en html lo implemente y funcionaba perfecto, tenia banner slider (nivo slider) pero lo implemente via codigo no como plugins y funcionaba en wordpres (nivo slider pasa lo mismo no deja desplagarse en menu).

    estoy en un mar de dudas de que sera lo que esta entorpeciendo de porque no funciona bien mi pagina al parecer no me esta permitiendo que funcione bien mis plugins y widget

  • romualdo

    Oh pero gracias, quedo impresionado con tu gentileza has respondido al 98% de los comentarios en tu web y tienes un articulo merecedor de nobel muchas gracias….

    • Sandra

      Muchas gracias, Romualdo, intento que mi blog aporte el máximo valor añadido :-)

      un saludo!
      Sandra

  • Ana

    Hola Sandra,

    Si la barra de navegacion como la tienes tú en creativaesfera se activa cada vez que vas de una pagina a otra (por ejemplo, si estas en Blog se activa otro color de fondo, y no solo en el efecto hover, si no cuando estas en blog), pero la barra de navegación se incluye en el “header” de forma “genérica”, ¿cómo se pueden activar esos diferentes estados según la página en la que estés?

    Ojalá publiques algunos tips de cómo hacerlo en un futuro porque yo no encuentro información sobre esto. Explicas muy bien todo. Gracias por tus artículos.

  • Rommel

    Hola Sandra q tal, muy excelente tu explicacion que das en tu blog, te felicito solo me gustaria saber de parte de ti enlaces disponibles para aprender mas a profundidad sobre la creacion de themes wordpress y si existen para en el caso d los plugins. GRACIAS

  • David

    Un articulo increible y perfectamente explicado, soy diseñador y programador php que todavía no me había puesto con themes de wordpress y este articulo me ha ayudado a entender todo el funcionamiento desde cero a la perfección y ahora ya puedo hacer mis propios themes optimizados desde cero.

    Gracias y gracias por el articulo tan interesante, ya puedo pasarme de mi propio CMS a wordpress que tanto reclaman los clientes.

    • eSandra

      De nada David, un placer haberte ayudado :-)

  • Jorge

    Buenos días, en primer lugar quería darte las gracias por el tutorial, está bastante bien explicado y es de mucha ayuda, aunque hay varias cosas que das por hecho que sabemos hacer, como por ejemplo lo de poner la copia de Modernizr y Respond en la carpeta js.
    Por otra parte, no se si no he entendido bien el tutorial, pero, la parte del Loop ¿dónde se debería de poner?
    Gracias.

    • eSandra

      Hola Jorge,

      si no sabes lo de copiar Modernizr y Respond en la carpeta JS, creo que antes deberías aprender bien la parte de diseño web, porque esto es muy básico..

      un abrazo,
      Sandra

  • Jorge

    Disculpa si he ofendido con lo de copiar Modernizr y Respond, no era mi intención. Solo lo he comentado porque se supone que esto es un tutorial para “aprender desde cero” y a modo de crítica constructiva.
    Sobre diseño web tengo ya conocimientos básicos previos y no conocía ni Modernizr ni Respond, así que tan básico desde luego que no lo es.
    Disculpa otra vez, actualizaré mis conocimientos antes de volver a visitar tus tutoriales de formación.
    Un abrazo.

    • eSandra

      Hola Jorge,

      para nada has ofendido, perdona si te he transmitido eso, por escrito se pierde el tono, no era mi intención hacerte sentir mal. No era porque no supieras que eran, había entendido que el problema era que no sabías cómo guardarlos en la carpeta de JS, un mal entendido.

      Modernizr básicamente sirve para que un navegador antiguo que no conoce las etiquetas de HTML5 las entienda, tiene otras funcionalidades pero básicamente es esto, igual que HTML5Shiv. Respond es un pequeño archivo JavaScript que lo que hace es que Internet Explorer entienda los media queries de CSS3 necesarios para diseño web responsive.

      Puedes preguntar cualquier duda que tengas, es sólo que en tu comentario ponías que lo que no sabías hacer es ” poner la copia de Modernizr y Respond en la carpeta js”, no que no sabías que eran estos archivos, de aquí mi respuesta. Saber colocar los archivos de JS es algo que se enseña en un curso básico de diseño web, por eso…

      Un abrazo,
      Sandra

  • sin h

    Hola,

    Quiero crear mi propio tema de WP. Conozco html y css pero php no. Básicamente quiero un tema responsive, multicolumna, sticky nav, … Y como no encuentro uno free, pues me gustaría saber si me voy a meter en un berenjenal demasiado gordo o seré capaz de hacerlo.

    Gracis

    • eSandra

      Hola,

      es difícil responder a esta pregunta sin conocerte y ver qué nivel tienes.. crear un tema de WP requiere muy buenos conocimientos de HTML, CSS y comprender las funciones de WP. Aquí es sólo una introducción, pero hay más.. ya te digo, depende de tu nivel de conocimientos..

      un abrazo,
      Sandra

  • Abel Pomares

    Hola Sandra, muy chevere tu post, sin embargo al igual que Jorge me perdí en la parte de donde exactamente se va a copiar el cogido del loop. Si pudieras responderme ese detalle seria de mucha ayuda, gracias.

    • eSandra

      Lo has de copiar donde quieras que aparezca, normalmente en index.php

  • marco

    hola sandra gracias por el tutorial.. esta muy bien logrado, ahora solo me falta investigar como puedo adaptar un framework como bootstrap en mi tema para simplificar un poco mas el trabajo.
    Saludos desde Paraguay

    • eSandra

      Es fácil, Marco, creas la web en Bootstrap y le añades las funciones de WordPress..

      un abrazo!
      Sandra

  • Karen

    Excelente artículo ! Era justo lo que buscaba, porque en todos lados explican cosas sueltas y no lograba entender el paso a paso, pero acá en este artículo lo explica todo muy bien para empezar desde cero hasta el final. Gracias !!

    • eSandra

      De nada, Karen, me alegro te haya ayudado.

  • Guille

    Hola,
    Esta disponible en algún sitio para descargar el proyecto completo de este post? Me ayudaría bastante para verlo ya estructurado, etc.

    Gracias

    • eSandra

      Hola Guille, no está disponible para su descarga, pero así puedes hacerlo tú mismo paso a paso.

  • Buenas Sandra

    Estoy siguiendo tu articulo paso por paso. Mi duda es.
    ¿el loop donde tengo que colocarlo?
    ¿Para que WordPress me aparezcan las paginas creadas por WordPress que tengo que hacer?

    Espero tu respuesta. Muchisimas gracias. Es un buen articulo.

    • eSandra

      El loop lo pones donde quieras que aparezcan las entradas de blog. Normalmente aparece en index.php. pero depende de cómo crees tu tema.

  • Edgar Vanegas

    Hola

    Le agradesco mucho por este tutorial tan completo.
    gracias por que se tomo el tiempo de realizar todo esto y yo estoy agradecido y me imagino con otros tambien.

    Le echare ganas a la programación.

    saludos y exitos en su vida.

    • eSandra

      Un placer, Edgar. Un abrazo!

  • Eva

    Hola Sandra, he estado siguiendo este tutorial y es muy bueno, por lo menos para empezar a desarrollar temas en wordpress.
    Pero, tengo una duda acerca de cómo ver mi tema desde el Administrador de WordPress, es decir, cuando desde el escritorio entras en Apariencia y luego Temas, aquí deberíamos ver nuestro nuevo tema, no?

    Gracias,

    Saludos,
    Eva

    • eSandra

      Si lo has instalado debería aparecer aquí, otra cosa es que no esté bien instalado..