Source code

<div class=”navigation”>
<?php posts_nav_link(); ?>
 
</div>

Que deben colocarse en el bucle entre las sentencias:

Source code

<?php endwhile; ?>
<div class=”navigation”>
 
 
<?php posts_nav_link(); ?>
</div>
 
<?php else : ?>

Barra Lateral.

La barra lateral la situaremos justo por encima del </body> despues de la etiqueta de cierre del

Source code

</div><!-- Fin Container-->
<div class = "sidebar">
</div><!--Fin Sidebar-->
</body><!--TERMINA EL BODY-->
</html>

Y para crear la misma usaremos etiquetas de listas desordenadas:

Source code

<ul>
<li><h2>Categorías</h2> </li>
<ul>
<?php wp_list_cats(); ?>
</ul>
</ul>

Guardamos y actualizamos el navegador.

La razón por la cual se usa ul para envolver la funcion wp_list_cats es porque wordpress automaticamente asigna la etiqueta li a las mismas, cuando invocamos la funcion. Paginas.Ahora que hemos obtenido las categorias bien podemos querer obtener nuestro listado de paginas. Por defecto WordPress viene solo con una para el famoso “Acerca de”. Nosotros podemos crear muchas e incluso usar una de forma estatica en nuestro home page. Pero por el momento para mostrar el listado de paginas en la barra lateral usaremos:

Source code
   
<?php wp_list_pages(); ?>

Que lo cierto es que como cualquiera de las funciones antes mencionadas puede estar en cualquier lado. Bien podria yo querer mostrar este listado en mi footer y no al costado. Pero como me dijeron una vez para romper las reglas primero hay que conocerlas. Asi que de momento las paginas quedaran en el sidebar de la siguiente forma:

Source code

<ul>
<?php wp_list_pages( ‘title_li=<h2>Paginas</h2>); ?>
<li><h2>Categorías</h2> </li>
    <ul>
    <?php wp_list_cats(); ?>
    </ul>
 </ul>

Blogroll

Colocaremos debajo de:

Source code

<ul>
<?php wp_list_pages( ‘title_li=<h2>Paginas</h2>); ?>
<li><h2>Categorías</h2> </li>
    <ul>
    <?php wp_list_cats(); ?>
    </ul>
</ul>
 <?php get_links_list(); ?>

Buscador del blog:

Para crear el famoso boton de busqueda, deberemos crear un archivo externo llamado searchform.php que luego podremos llamar desde el theme.

El codigo del archivo searchform es el siguiente:

Source code

<?php
 /**
  * The template for displaying search forms in Twenty Eleven
  *
  * @package WordPress
  * @subpackage Twenty_Eleven
  * @since Twenty Eleven 1.0
  */
 ?>
     <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
         <label for="s"><?php _e( 'Search', 'twentyeleven' ); ?></label>
         <input type="text" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
         <input type="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
     </form>

Guardamos el archivo y procedemos a colocar el código en index.php. Que deberá estar por encima de la funcion wp_list_pages ya que se opto por ponerlo en la barra lateral.

Source code
   
<ul>
 <li id=”search”>
 <?php get_search_form(); ?>
 </li>
 <?php wp_list_pages( ‘title_li=<h2>Paginas</h2>); ?>
 <li><h2>Categorías</h2> </li>
     <ul>
     <?php wp_list_cats(); ?>
     </ul>
 </ul>

Si guardamos el documento y actualizamos el navegador podemos ver el resultado.

También se asigno un id a la caja de búsqueda para optimizar con CSS.

Tambien si quisieramos podriamos añadir un calendario introduciendo lo siguiente:

Source code
   
<li id=”calendar”><h2>‘Calendar’ </h2>
 <?php get_calendar(); ?>
 </li>

Tambien utilizando listas desordenadas en caso de querer ubicarlo en la barra lateral.

Barra lateral y Widgets.

Para poder otorgarle a nuestra barra la posibilidad de usar Widgets es necesario crear el archivos functions.php
El mismo debera encontrarse en el mismo directorio de nuestro tema y debera contener el siguiente codigo:

Source code

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

Y luego en el index debajo de la primer etiqueta <ul> colocar

Source code
   
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

Y antes del </ul> de cierre colocar:

Source code
   
<?php endif; ?>

Si nosotros quisieramos implementar en nuestro tema multiples barras laterales deberiamos utilizar la funcion:

register_sidebars();

A la cual deberemos pasarle como parametro (entre los parentesis) el numero de barras a registrar. Esto hara que las mismas esten preparadas para incorporar Widgets.

Footer.

Incorporar el footer es tan simple como crear un div a continuacion de la barra lateral.

<div id=”footer”>

</div>

Y aqui dentro podemos colocar lo que consideremos pertinente que deba ir en un pie de pagina. Siendo simplistas podemos poner:

Source code
   
<p>
  Copyright &#169; 2007 <?php bloginfo(‘name’); ?>
</p>

Pero tambien podriamos intentar colocar los archivos del blog, las paginas o el blogroll. De la misma forma que se hizo con la barra lateral.

Al dia de hoy esta bastante en boga colocar diversas cosas en el footer. Ya sean iconos sociales o Widgets.

Es por eso que debemos entender como se comporta cada funcion. Y tambien nos sirve para darnos cuenta lo flexible que puede llegar a ser WordPress como CMS.

Validacion HTML.

Esta parte es odiosa. Se trata nada mas y nada menos que de validar el codigo en w3c.org. Sucede que en el 70% de las veces aparece un error.

Si uno esta diseñando su propio theme para uso personal poco puede importarle que haya 10 o 15 errores que hacen referencia a cosas que no nos implican un problema.
Pero si queremos vender nuestra plantilla es obligatorio que este validado todo el codigo. Porque aparte despues sera un argumento mas que utilizaremos para la venta del mismo. Validado al 100% y sin errores.

Para eso accedemos a nuestro local host y cargamos el blog con nuestro tema activado. Hacemos click en Ver -> Codigo Fuente y seleccionamos todo el codigo.

Por ultimo lo pegamos en seccion de validacion de codigo de la w3c y rezamos.

Como alternativa se puede utilizar el validador que trae el Web Developer Tools de Mozilla que se comenta en este post.

CSS.

Y ahora llega la parte de estilizacion de todo lo anterior a traves del archivo style.css que al momento contiene solamente los datos del tema que son:

Source code

/*
 Theme Name: El nombre del mismo.
Theme URL: La url donde se encuentra disponible.
Desciption: La descripcion.
Version: La version del tema. (1.0 por ejemplo)
Author: El nombre del autor.
Author URI: Y la url del autor.
 /*

Todos estos datos englobados con los tags de comentarios que se usan en css: /* /* Lo optimo aqui es ir revisando en todos los browsers como va quedando el tema. Lo primero es asignarle las siguientes propiedades y atributos al body:

Source code
   
body{
  margin: 0;
  font-family: Arial, Helvetica, Georgia, Sans-serif;
  font-size: 12px;
  text-align: left;
  vertical-align: top;
  background: #ffffff;
  color: #000000;
  }

Donde se determina un margen de 0 pixeles un tipo de letra, tamaño y alineacion a la izquierda de la misma.
vertical-align: top: hace que todo comience DESDE arriba.
Fondo blanco color de texto negro.

Luego procedemos a colocar estilos a los enlaces:

a:link, a:visited{
  text-decoration: underline;
  color: #336699;
  }

Donde a:link hace referencia a los hipervinculos.
a: visited:  vinculo en uso o sobre el que se hizo click.
text-decoration:underline: vinculo subrayado.
color:  Un azul raro.
Quitamos el subrayado al posicionar el cursor sobre el enlace:

a:hover{
  text-decoration: none;
  }

Tambien podriamos hacer que el mismo cambie de color agregando:

Source code

a:hover{ text-decoration: none; color: #algun-color }

(Recordemos que los colores usan notacion hexadecimal del tipo #000000)

Y la parte que mas dolores de cabeza suele traer (al menos a los que estan poco familiarizados con el modelo de bloques) que es definir el tamaño y posicion de cada caja.

Supongamos entonces que queremos que el ancho del tema sea de 750px. Buena medida si queremos que el mismo pueda ser visualizado en pantallas de 1024×768.

Deberemos crear un DIV contenedor o wrapper que albergue al encabezado, al contenedor, la barra lateral y al pie de pagina.

Entonces justo despues del <body> en el index.php añadiremos:

<body>
 <div id= wrapper>

Y justo antes de la etiqueta de cierre </body> cerraremos el mismo con </div>

</div><!--Fin del Wrapper-->
 </body>

Ahora en style.css podemos darle propiedades al contenedor:

Source code

#wrapper {
margin: 0 auto 0 auto;
  width: 750px;
  text-align: left;
  }

Siendo 0 para el margen superior, automatico para el derecho, 0 para inferior y automatico para el izquierdo. text-align: left;hara que todo el texto DENTRO del contenedor wrapper este a la izquierda. Siguiendo con la cabecera añadimos:

Source code
   
#header{
  float: left;
  width: 750px;
  }

Donde se la flota a la izquierda y se le asigna un ancho de 750px. Luego flotamos el DIV “container” a la izquierda y le damos un ancho de 550px.

Source code
   
#container{
  float: left;
  width: 500px;
  }

Y flotamos la barra lateral a la izquiera tambien con un tamaño de 240 pixeles, que sumados a los 500 del contenedor nos da 740. Es importante notar que la sumatoria del tamaño del container y del sidebar no exceden el tamaño del bloque wrapper.

Source code
   
.sidebar{
  float: left;
  width: 240px;
  background: #eeeeee;
  }

Al tratarse de una clase en lugar de llamarla con un signo # la llamamos con un signo de puntuacion. Y por ultimo el pie de pagina o footer:

Source code
   
#footer{
  clear: both;
  float: left;
  width: 750px;
  }

En el cual vemos que aparece una nueva propiedad que es “clear-both” que lo que hace es no permitir elementos flotantes ni a la izquierda ni a la derecha del bloque.

Y ahora correjimos el margen izquierdo de la barra lateral asignandole 10 pixeles:

Source code
   
sidebar{
  float: left;
  width: 240px;
  background: #eeeeee;
  margin: 0 0 0 10px;
  }

Y ahora viene una de las partes que al menos para mi son clave para entender esto en su totalidad.

El desglose.

Cuando se llega a esta etapa se da por asumido que ya se tiene hecha toda la parte de estilos. Se da por entendido que se trabajo sobre un único archivo para hacer todo mas simple.

Lo que viene ahora es simplemente comenzar a tomar pequeños fragmentos de codigo de nuestro index y colocarlos en archivos separados.

Creamos un archivo en la carpeta de nuestro tema llamado header.php y en el colocamos todo el comienzo de nuestro index.php HASTA la etiqueta donde comienza el container, cortandolo y pegandolo. Que comienza en:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Y concluye en:

Source code

<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>

Esto ya deberias verlo en tu index asi que poco sentido tiene que te de todo el codigo. Entonces ahora en el index.php antes del <div id= “container”>simplemente colocamos:

Source code
   
<?php get_header(); ?>

Para que traiga la cabecera del arhivo header.php

Si ahora guardamos el documento y actualizamos el navegador deberiamos seguir viendo la cabecera como si no hubieramos tocado nada.

Con la barra lateral se sigue el mismo procedemiento que antes pero creando el archivo sidebar.php en el cual colocaremos todo el segmento de codigo que hace referencia a esta.

Y reemplazaremos las lineas que recortamos con:

<?php get_sidebar(); ?>

Que deberia estar antes de:

Source code

<div id="footer">
<p>
Copyright &#169; 2007 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</p>
</div>
</div></body>
</html>

Fragmento que tambien habra que quitar y ponerlo en un archivo llamado footer.phpque luego invocaremos desde el index con:

<php get_footer(); ?>

Y asi a nuestro tema se le han sumado entonces tres archivos que son: header.php sidebar.php y footer.php que fueron invocados con las funciones get_header(), get_sidebar() y get_footer()

Habiendo ya dividido el index, ahora resulta mas facil crear los siguientes archivos del tema que son: archive.php, single.php, y page.php

Para crear el primero de estos solo deberemos seleccionar todo el contenido del index y copiarlo en un nuevo archivo llamado archive.php

En este deberemos reemplazar the_content por  the_excerpt. Con esto conseguimos que cuando accedemos a los archivos se muestren solo fragmentos de las notas y no todas ellas. Esto se hace tambien para evitar que Google nos penalice por contenido duplicado.

Si nosotros no tuviesemos un archivo de categorias (archive.php) las mismas serian tomadas directamente del index.php

Luego creamos un archivo llamado search.php para el cual copiaremos y pegaremos todo el contenido de archive.php. Lo guardamos y listo.

Creamos dos nuevos archivos: page.php y single.php

Copiamos y pegamos todo desde el index.php a page.php y single.php.

Primero, en page.php, se agrega lo siguiente debajo de <?php the_content(); ?>:

Source code
   
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>Y:<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>

Segundo, removemos todo el codigo que hace alusion a postmetadata de page.php.

Tercero removemos:

posts_nav_link()

En single.php, tipeamos bajo de: <?php the_content() ?>:

<?php wp_link_pages(); ?>

Segundo en el area de postmetadata removemos <?php comments_popup_link(); ?> y la etiqueta </br>

Aquí no se borran las funciones referentes a metadatos.

Tercero reemplazamos <?php posts_nav_link(); ?> con:

Source code
   
<?php previous_post_link(‘&laquo; %link’) ?> <?php next_post_link(‘ %link &raquo;’) ?>

Guardamos el archivo single.php y listo.

Comentarios.

Creamos el archivo comments.php y pegamos el codigo de comentarios que esta aca.

Luego en style.css al final de todo agregamos las lineas que hay en el CSS de los comentarios.

En el single.php abajo del div llamado “entry” agregamos:

<div class=”comments-template”> <?php comments_template(); ?> </div>

Que lo que hace es cargar el template de los comentarios como se puede ver aquí.

Tips:

La diferencia entre the_content() y the_excerpt() es que con la primera se obtiene el contenido entero de un post con la segunda solo las primeras 120 palabras.

A la hora de realizar diseños mas complejos, es posible que debamos utilizar múltiples loops. Aquí se muestra una forma bastante simple.

Porque puede darse el caso de que uno quiera traer por un lado las ultimas entradas pero por el otro algunas destacadas.

No obstante encontré mas interesante la solución que implementaron aquí. La razón es que utilizan la función wp_reset query() que va de la mano con query_posts()

Con la funcion wp_enqueue_script() podemos agregar java script o algun que otro plugin jquery.

Tutoriales sobre creacion de temas que están “de puta madre” o “de ostias”.

El oficial de WordPress “el posta”.

Aquí el primero.

Este es excelente.

El que se necesita para hacer uno con formato diario o revista tirando a profesional. Basado en 960 Grid System y WP_Query.

Uno mas que no me dijo nada.

Uno de CSS Tricks en vídeo.

Uno que no me gusto.

Conclusión.

Puede parecerle a muchos que desarrollar un tema en WordPress no tiene demasiado sentido. Disiento completamente. Si bien es cierto que hay mucho gratis para bajar pasan dos cosas: o es malo o es viejo.

Desarrollar y vender nuestros propios temas es tentador. Surgen dos problemas con esto:

El primero es que en el mercado de habla hispana, pocos lo compran.

El segundo es Theme Forest. En ese mercado en particular se venden. Pero los requisitos para entrar en esa elite, son altos.

El diseño tiene que estar validado sin errores y ser bueno para el criterio de ellos. Deben estar en html5 y CSS3. Si bien aun no están duros con eso lo estarán en breve.

Y por supuesto deben tener algún efecto en jQuery (o Java Script) que lo haga impactante a nivel visual.

Si se pasa este filtro, he visto temas de 8 dolares con 30 ventas. Los hay de 35 dolares con muchas mas.

Dejando de lado eso puede hacerle bastante bien a tu currículo diseñar uno y donarlo a la comunidad WordPress. Poco probable es que te hagas famoso. Nunca se sabe…

Es un buen comienzo para el que desea crear un theme wordpress.