Tutorial Crear Theme Wordpress

Autor: Cristian Gil
Director
MarketingOptimo.com
COPYRIGHT
Este manual fue creado expresamente con fines EDUCATIVOS, es de libre distribución,
siempre y cuando no se altere su contenido. Está prohibido copiar o reproducir partes del
mismo sin permiso expreso del autor.
ACERCA DEL AUTOR
Hola, mi nombre es Cristian Gil, tenía por pasa tiempo diseñar y desarrollar aplicaciones
para la web, digo tenía porque ahora mi pasión es otra, es el Marketing por Internet.
Cuando era diseñador y desarrollador web, me gustaba mucho estudiar sobre nuevas
tecnologías, programación y temas técnicos, en ese entonces fue cuando aprendí a crear
Themes para Wordpress, cree un par de tutoriales al respecto que compartí en un blog
que tuve de diseño y desarrollo web, solo hasta hace poco decidí unir ese material en un
manual paso a paso para compartirlo en internet y que otras personas pudieran
beneficiarse de él. Así es como nace este tutorial Cómo Crear un Theme para Wordpress
Desde Cero.
Aprovecho este espacio para invitarte a mi sitio web MarketingOptimo.com, es allí donde
estoy compartiendo constantemente información relacionada con el Marketing en Internet
y los negocios online. Si consideras que es un tema importante para ti y quieres estar al
tanto, recuerda suscribirte a nuestros boletines electrónicos.
Un saludo muy especial,
Cristian Gil
Director: MarketingOptimo.com
Una de las plataformas de blogging más utilizada actualmente es Wordpress, y una de
sus características más fascinantes son los Themes, en este tutorial enseñamos paso a
paso como crear un theme desde cero.
Si realmente quieres aprender a crear tu propio Theme para Wordpress, este tutorial es
para ti.
TABLA DE CONTENIDO
Contenido
INTRODUCCIÓN ........................................................................................................................................... 5
INSTALACIÓN DE WORDPRESS ..................................................................................................................... 7
EL INDEX.PHP ............................................................................................................................................. 10
LA CABECERA (HEADER) ............................................................................................................................. 13
EL BUCLE (THE LOOP) ................................................................................................................................. 16
EL CONTENIDO ........................................................................................................................................... 19
POST META DATA ...................................................................................................................................... 23
LINKS SIGUIENTE Y ANTERIOR .................................................................................................................... 26
LA BARRA LATERAL (SIDEBAR) Y LAS CATEGORÍAS ..................................................................................... 28
LISTADO DE PÁGINAS COMO LINKS DENTRO DE LA BARRA LATERA (SIDEBAR) .......................................... 32
EXPLICACIÓN DE LAS ETIQUETAS UL Y LI .................................................................................................... 34
COMO INCLUIR LOS ARCHIVOS DENTRO DE NUESTRA BARRA LATERAL ..................................................... 36
CÓMO INCLUIR LOS LINKS RECOMENDADOS DENTRO DE NUESTRA BARRA LATERAL ................................ 39
FORMULARIO DE BÚSQUEDA..................................................................................................................... 41
PREPARA LA BARRA LATERAL PARA LOS WIDGETS .................................................................................... 43
CREAR EL PIE DE PÁGINA O FOOTER .......................................................................................................... 45
CREACIÓN DE LOS SUB-ARCHIVOS DE PLANTILLA ...................................................................................... 47
VALIDAR EL CÓDIGO .................................................................................................................................. 52
INTRODUCCIÓN CSS (STYLE.CSS) ................................................................................................................ 53
COMENCEMOS A CREAR EL CÓDIGO CSS .................................................................................................... 57
PLANTILLA DE COMENTARIOS .................................................................................................................... 61

INTRODUCCIÓN
Bueno, una breve introducción antes de comenzar, un Theme en wordpress es

básicamente una piel (diseño) para tu blog, con la cuál puedes controlar la apariencia de
tu blog y la forma en cómo la información es presentada al usuario.
Puedes cambiar el theme de tu blog fácilmente y de esta manera cambiar el diseño de

todo tu blog con unos cuantos clics, la idea detrás de este tutorial es que aprendas a crear
tus propios themes y de esta forma le des a tu blog un estilo único o que ofrezcas servicio
de diseñador web y crees themes para la venta.
Cada theme tiene al menos dos archivos, index.php y style.css, con el index.php le
indicas al theme donde va todo y con el style.css la apariencia que tendrá.
Pero la estructura de un theme la componen normalmente los siguientes archivos
-style.css
-index.php
-home.php
-single.php
-page.php
-archive.php
-category.php
-search.php
-404.php
-comments.php
-comments-popup.php
-author.php
-date.php
No te preocupes por esta lista, ya los veremos en su momento y te sorprenderás por lo

sencillo que es.
Herramientas
Para seguir este tutorial necesitas:
- Instalar Wordpress en tu computador o si tienes un sitio web y no quieres hacer la

instalación en tu PC entonces has una instalación de prueba en tu sitio web.
- El Bloc de notas o tu editor de texto favorito, también puedes usar DreamWeaver si lo
tienes.
- Incluye en tus favoritos Validador XTHML y Validador CSS , vamos a necesitar estas
herramientas para chequear el código y asegurarnos que no contengan errores.
Jerarquía dentro de un Theme de Wordpress
Los archivos tienen jerarquía dentro de un Theme de Wordpress, esto es útil básicamente
porque llegado el caso de que uno de los archivos no exista, Wordpress apuntaría al
index.php.
En la anterior imagen hacen falta archivos, es simplemente para que se den una idea,
ahora la jerarquía completa la pueden ver aquí
INSTALACIÓN DE WORDPRESS
Pasos
1. Descargar Wamp Server
Este es un paquete con el cuál instalarás el servidor Apache, bases de datos MySQL y
PHPMyAdmin, los cuales son necesarios para correr una instalación de wordpress (o un
blog) localmente.
Descargar: Wamp Server
2. Instalar Wamp Server
La instalación es muy sencilla y no requiere que cambies las opciones que trae por
defecto, lo que debes hacer es darle clic en siguiente, siguiente hasta que termine, te
preguntará al final si deseas ejecutar Wamp Server dile que si y listo, ahora tendrás un
nuevo icono en la barra de tareas cerca al reloj, desde allí puedes manipular las
herramientas del servidor, ten en cuenta que cada que prendas tu PC debes activar tu
servidor por inicio >> todos los programas >> wamp server >> start wamp server, para
verificar si quedó instalado tu servidor, abre tu navegador de internet y digita
http://localhost/ debes ver una página de Wamp Server.
3. Crear la base de datos para tu blog
Debes tener tu Wamp Server activo, Clic en el icono de Wamp Server en la barra de
tareas y luego selecciona PHPMyAdmin.
Se abrirá la página de phpMyAdmin, Digita "basedatos_blog" en el campo donde
dice crear nueva base de datos y dale clic al botón crear. tu puedes ponerle el nombre
que quieras a tu base de datos, para efectos de este ejemplo yo la llamaré
"basedatos_blog".
Listo ya tienes creada la base de datos para tu blog.
4. Descargar Wordpress
Ingresa a la página oficial de Wordpress y descarga el paquete en español
Descargar: Wordpress en español
5. Instalar Wordpress
- Descomprime el paquete que has descargado y copialo en esta

ubicación C:\wamp\www\, luego abre el archivo wp-config-sample con tu bloc de notas o
con tu editor de texto y rellena los datos de tu conexión a la base de datos así:
define('DB_NAME', 'basedatos_blog');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_HOST', 'localhost');
- Guarda los cambios y renombra el archivo de wp-config-sample a wp-config.
- Ejecuta el instalador de Wordpress digitando la siguiente dirección en tu navegador de

internet http://localhost/wordpress/wp-admin/install.php
- Digita el nombre que quieres para tu blog y la dirección de tu e-mail.
- Listo Wordpress se ha instalado, toma nota del nombre de usuario y contraseña que vez
en pantalla, si quieres de una vez inicia sesión para mostrate algo, una vez hayas
ingresado, ubica en el lado izquierdo de la página el menú que dice Aspecto y allí ubica el
link que dice Temas, dale clic, verás por defecto dos temas Wordpress Default y
Wordpress Classic, estos temas o Themes son los que le dan el aspecto visual al blog,
con solo darle clic sobre uno u otro mi blog cambiará de apariencia. En este tutorial vamos
a aprender precisamente a crear un Theme para que nuestro Blog tenga un diseño único.
Quieres ver actualmente como luce tu blog, digita esta dirección en tu navegador de
internet http://localhost/wordpress/
EL Index.php
Ahora sí comienza lo entretenido.
Pasos
1. Abre el Wamp Server:
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Crea la carpeta para tu Them:
Ve a la carpeta Themes de la instalación de Wordpress, la ruta

es C:\wamp\www\wordpress\wp-content\themes, dentro de Themes crea una carpeta
que se llame tutorial, dentro de la carpeta tutorial guardaremos todos los archivos que
vayamos creando.
3. Crea el archivo index.php:
Abre tu bloc de notas o tu editor de texto favorito, copia y pega el código de este
archivo index a tu bloc de notas y guárdalo con el nombre de index.php
4. Crea el archivo style.css:
Abre el bloc de notas y copia el código de este archivo style a tu bloc de notas y guárdalo
con el nombre de style.css
Explicación código index.php
La siguiente imagen contiene exactamente el código que tu acabas de pegar en tu archivo

index.php, en la imagen ves letras de diferentes colores, eso es porque lo estoy
visualizando con DreamWeaver el cual tiene funcionalidades como marcar el código de
colores para mayor claridad.
<html> Es la etiqueta con la que se inicia todo documento HTML.
<head> es donde inicia la cabecera del documento HTML
<?php bloginfo(’stylesheet_url’); ?> es una función php con la cuál llamamos el archivo
style.css, el código php se abre con <?php y se cierra con ?>
</head> de esta forma cerramos la etiqueta head, es decir es donde el head (cabecera)
termina
<body> es donde el cuerpo del documento HTML comienza
</body> final del cuerpo
</html> final del documento HTML

Muy bien, ingresa ahora al área de administración de tu blog, para eso copia y pega la
siguiente dirección en tu navegador de internet http://localhost/wordpress/wp-admin e
ingresa con el usuario y contraseña que te dio Wordpress cuando lo instalaste.
Una vez hayas ingresado, ubica la opción Temas, cuando entres selecciona el tema
llamado Tutorial, que es el que estamos creando, Wordpress te preguntará si deseas
activarlo, dile que sí.
Ahora copia y pega la siguiente dirección en tu

navegador http://localhost/wordpress/ no verás nada, es decir una página totalmente en
blanco, ese es tu blog, iremos avanzando para que veas como comienza a tomar forma.
LA CABECERA (Header)
Es allí donde normalmente mostramos el nombre del blog, su descripción y también se

utiliza para el menú de navegación.
Pasos
2. Abre el archivo index.php con el bloc de notas o con el editor de texto que estés
usando, recuerda que el index.php debe estar en la carpeta tutorial en la siguiente
ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
En estos momentos si pegas esta dirección en tu

navegador http://localhost/wordpress/ verás una página en blanco.
3. Escribe el siguiente código <h1><a href=”<?php bloginfo(’url’); ?>”><?php

bloginfo(’name’); ?></a></h1> entre la etiqueta <body> y </body> de tu archivo
index.php
Ahora guarda los cambios, ve nuevamente a http://localhost/wordpress/ y refresca la

página, ahora vez el título de tu blog.
Explicación
<?php bloginfo('name');? es una función de php que llama el título de tu blog, el título de
tu blog lo puedes ver y cambiar yendo al área de administración de tu blog y dando clic en
el menú General.
<?php bloginfo(’url’); ?> es una función de php que llama la URL de tu blog, en este
caso el dato que obtiene es http://localhost/wordpress/
<a href=" "></a> son etiquetas HTML lo que haya dentro de las comillas se convierte en
un link.
<h1> Esta etiqueta HTML significa heading 1, en HTML existen H1, H2, H3, H4, H5, H6,
siendo H1 la de mayor tamaño y H6 la de menor.
Basicamente la línea de código que acabamos de escribir <h1><a href=”<?php

bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1> obtiene la URL del blog, y la
convierte en un link con el título de tu blog y además con <h1> le damos el valor de título
principal.
Ve nuevamente a la página http://localhost/wordpress/ y verás que el título de tu blog

es tutorial, pero a su vez es un link que apunta a la URL del blog, ese es un
comportamiento muy usual, la mayoría de páginas web en su logo o título de la web
apuntan a la página principal.
4. Escribe el siguiente código <?php bloginfo('description'); ?> después de la línea de

código que escribiste en el punto anterior.
Guarda los cambios, ve nuevamente a http://localhost/wordpress/ y refresca la página.
Explicación
<?php bloginfo('description'); ?> es una función php con la que llamamos la descripción
de tu blog, esta al igual que el título de tu blog se puede cambiar desde el área de
administración en el menú General.
5. Introduce una nueva etiqueta <div> y ciérrala </div> dentro de esta etiqueta debe ir el
código que acabas de escribir, quedaría de la siguiente forma.
<div>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
La etiqueta <div> lo que hace es crear un caja invisible, la cual separa el título y la
descripción de tu blog de todo lo demás, adicionalmente más adelante nos será de mucha
utilidad cuando estemos trabajando con el archivo style.css
6. Adiciónale un id a la etiqueta <div> que acabas de crear así.
<div id="header">
Entonces nuestro código ahora luce así:
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
Ahora nuestra etiqueta <div> tiene un nombre.
7. Copia todo el código que hay desde la etiqueta </div> hacía arriba, absolutamente todo
y pégalo en un nuevo archivo, guarda el archivo en tu carpeta tutorial con el nombre de
header.php
Aquí tienes una muestra de mi código header.php
8. Reemplaza todo el código que copiaste del index.php al header.php con la siguiente
línea de código <?php get_header(); ?>
<?php get_header(); ?> es una función de php la cuál llama otro archivo php en este
caso el header.php, básicamente lo que estamos haciendo es fragmentar el código y
dividirlo en diferentes archivos por orden y para respetar la estructura de Wordpress.
Por ahora el código de tu index.php debe estar así:
<?php get_header(); ?>
</body>
</html>
El BUCLE (The Loop)
3. Introduce una nueva etiqueta <div id="container"> después del código <?php
get_header(); ?> de tu archivo index.php así:
<div id="container">
</div>
3. Escribe el siguiente código dentro de la etiqueta <div> que acabas de crear:
<?php if(have_posts()):?><?php while(have_posts()):the_post();?>
<?php endwhile;?>
<?php endif;?>
Entonces tenemos nuestro index.php de la siguiente forma:
Explicación
Creo que es en estos momentos es donde vale la pena explicar un poquito el concepto de
Bucle o en inglés The Loop en Wordpress.
El Bucle (The Loop) es un término que se refiere al proceso principal de WordPress, se
llama bucle o en inglés the loop, porque un bucle es un trozo de código que se repite
mientras se cumpla una condición, luego cuando no se cumpla más se termina el bucle.
Wordpress utiliza el Bucle (The Loop) para mostrar cada uno de los artículos, por ejemplo
el título, la fecha y la categoría pueden ser codificados dentro del Bucle para que se
repitan por cada artículo.
Entonces nuestro Bucle consiste en el código que se encuentra dentro de la etiqueta <div
id="container">
if(have_posts()) revisa tu base de datos para verificar si hay posts.
while(have_posts()) mientras hayan posts, ejecuta the_post().
the_post() llama los posts para que sean mostrados
endwhile; cierra el while (mientras que), es decir cuando ya no hayan mas posts para
mostrar endwhile; cierra el ciclo.
endif; cierra el if (sí).
Este código es el que hace que si tú tienes 10 posts actualmente en tu blog, éstos sean
mostrados en tu página uno tras otro desde el más reciente, seguido del siguiente artículo
más reciente y así sucesivamente.
4. Escribe el siguiente código <h2><a href=”<?php the_permalink(); ?>”><?php

the_title(); ?></a></h2> exactamente antes de la línea <?php endwhile; ?>
Entonces tenemos nuestro index.php de la siguiente forma.
Explicación
Para que veas que hace la línea de código que acabas de adicionar, ve a tu
blog http://localhost/wordpress/ ahora puedes notar que adicional al título y descripción
de tu blog, tienes ahora un subtítulo ¡Hola, mundo! el cuál es el título del único post que
hay en tu blog, puedes entrar al área de administración de tu blog y crear varios posts
como prueba para que veas cómo se listan, yo por ejemplo cree dos post más, así que mi
blog por ahora luce como lo muestra la siguiente imagen.
<h2> Esta etiqueta HTML significa heading 2, en HTML existen H1, H2, H3, H4, H5, H6,
siendo H1 la de mayor tamaño la cuál utilizamos para el título de blog, ahora utilizaremos
<h2> para los títulos de cada uno de los artículos.
<a href=" "></a> son etiquetas HTML lo que haya dentro de las comillas se convierte en
un link.
<?php the_permalink();?> es una función php que llama la URL de cada artículo o post,
los Permalinks son las URLs permanentes de cada uno de tus artículos.
<?php the_title();?> es una función php que llama el título de tu artículo
Básicamente la línea de código que acabamos de escribir obtiene la URL de cada uno de
tus artículos, y la convierte en un link con el nombre del título del artículo y además
con <h2> le damos el valor de subtítulo dentro de tu blog.
El CONTENIDO
El contenido del blog corresponde al título y al cuerpo de cada post.
Pasos
3. Escribe el siguiente código exactamente una línea antes del <?php endwhile;?>
<?php the_content(); ?>
Abre tu explorador de internet http://localhost/wordpress/ ahora verás el contenido de

cada uno de tus artículos, si aún no has creado posts de prueba, ve al área de
administración de tu blog http://localhost/wordpress/wp-admin y crea varios posts.
Así se ve por lo pronto el mío.
4. Introduce una nueva etiqueta <div class="entry"> alrededor del código que creaste en
el punto anterior, para qué? para que sepas donde finalizan los títulos de los posts y
donde comienza su contenido, además porqué será muy útil cuando estés trabajando con
el archivo style.css, ya que puedes definir la apariencia que tendrá el contenido de tus
posts sin afectar lo demás.
Explicación
<?php the_content(); ?> Es una función php con la que se llama el contenido de cada
uno de los posts.
Cuál es la diferencia entre id y class?
Con el id le damos nombre a los bloques DIV, recuerdas el <div id="container">, la

diferencia radica en que id es para darle un nombre único a un DIV, en
cambio class puede ser aplicado a varios DIV u otros elementos dentro del código HTML.
En conclusión no puedes tener un DIV con el mismo id, es decir no puede existir en la
misma página dos <div id="container"> cuando quieras reutilizar algo una y otra vez
utiliza class.
Ve a tu explorador de internet http://localhost/wordpress/ y da clic en ver >> código

fuente, notarás como dentro del código sólo encontrarás un id="header" un sólo
id="container" pero verás multiples class="entry" los cuales están alrededor del contenido
de cada posts que hayas creado.
5. Introduce una nueva etiqueta <div class="post"> alrededor del título y del contenido
de tus posts, para qué? para separar un post del otro.
Puedes ver una muestra de cómo va el código de mi index.

Mi index.php
POST META DATA
El Post Meta Data es información que les puedes mostrar a los visitantes de tu blog sobre
cada post, esta información es usualmente, el autor del post, la fecha y la hora de
publicación, bajo que categoría está ese post en particular y cuantos comentarios ha
tenido.
Cada que tú creas un post en tu blog, la información Post Meta Data es guardada en la
base de datos de tu blog de forma automática, lo que vamos a hacer es llamar esa
información de la base de datos para mostrársela a los usuarios del blog.
Pasos
3. Copia y pega el código que hay en este link PostMetaData y pégalo exactamente
debajo del código <?php the_content(); ?> de tu archivo index.php
Este código es muy estandar, muchos Themes lo tienen así, tu puedes utilizar este mismo
código para los diferentes Themes que crees, o puedes modificar algunas líneas, por
ejemplo si borras la parte del código que dice <?php the_time(' g:ia') ?> no se mostraría
la hora.
Abre tu explorador de internet http://localhost/wordpress/ ahora verás la información

Post Meta Data de cada uno de tus posts.
Explicación
<p class="postmetadata"> la p es la etiqueta HTML de parrafo y class="postmetadata"

sirve para separar el código Post Meta Data de los Posts, de esta forma me queda el
código más organizado y más adelante puedo darle la apariencia que yo quiera a esta
parte del código sin afectar nada más, la apariencia se controla con el archivo style.css
<? php the_time() ?> es una función php que me devuelve la fecha y la hora en la que el
post fue publicado.
<?php the_category(', ') ?> es la función php que llama las categorías que fijaste para el
post, la coma (,) sirve para separar cada una las categorías si es que el post tiene más de
una.
<?php the_author(); ?> es la función php que llama el nombre del autor del post.
<?php comments_popup_link, 'No hay comentarios »' será lo que se muestre
cuando tu post no tenga ningún comentario, '1 Comentario »' para cuando tu post
tenga un comentario y '% Comentarios »' para cuando tu post tenga más de un
comentario.
LINKS SIGUIENTE Y ANTERIOR
Los links Siguiente y Anterior permiten que los usuarios y lectores naveguen a través de
tu blog, por defecto Wordpress tiene configurado mostrar 10 Post por cada página, es
decir si tú has creado ya más de 10 Posts, verás al final de la página los links Siguiente y
Anterior que permiten avanzar y retroceder para ver los demás Posts.
El valor por defecto de 10 Posts puede ser cambiado por el número de Posts que quieras
que sea mostrado por cada página, para cambiarlo puedes ir al área de administración de
tu blog http://localhost/wordpress/wp-admin, entra al menú opciones de lectura, y allí
hay una casilla que dice " las páginas del blog mostrarán un máximo de " (10) entradas,
modifica el valor por el número que tú quieras.
Pasos
3. Escribe el siguiente código exactamente después de la línea <?php endwhile;?>
Explicación
<div class="navigation"> crea un Div (Caja invisible) el cuál como lo habíamos dicho
antes, sirve para separar este código de todo lo demás, si si... exacto tienes razón y
también podemos manipular su apariencia desde el archivo style.css sin afectar lo demás.
Muy Bien! ya lo tienes claro.
Abre tu explorador de internet http://localhost/wordpress/ , seguramente no veas el link
de siguiente, recuerda que por defecto Wordpress está configurado para mostrar estos
links después de tener más de 10 posts, entonces abre el panel de administración de tu
blog http://localhost/wordpress/wp-admin ubica el menú opciones de lectura y cambia
el valor de 10 a un número que sea menor al total de posts que tienes, si tienes 5 posts
entonces cámbialo a 4, para que puedas ver cómo funciona.
Por ejemplo yo tengo tres post que he creado en este tutorial, entonces cambié el valor a
2, para que muestre dos Post por página, y así el link siguiente se activará.
LA BARRA LATERAL (Sidebar) Y LAS CATEGORÍAS
La Barra Lateral es la columna vertical que tienen casi todos los blogs, también es
conocida como el menú, la barra lateral puede estar ubicada al lado izquierdo o derecho
del blog y es allí donde normalmente encontramos por ejemplo los últimos posts
publicados, información sobre el autor, vínculos a otros blogs recomendados por el autor,
es en la barra lateral donde los usuarios de tu blog encontrarán los vínculos que le
permitirán navegar en todo el sitio de una manera fácil.
Pasos
3. Escribe la siguiente línea de código exactamente antes de la etiqueta </body>
<?php get_sidebar(); ?>
Explicación
<?php get_sidebar(); ?> función php que llama el archivo sidebar.php
4. Crea un nuevo archivo con el editor de texto que estés trabajando y guarda el archivo
con el nombre de sidebar.php dentro de la carpeta tutorial.
5. Escribe el siguiente código dentro del archivo sidebar.php
<div class="sidebar">
<ul>
<li><h2>Categorías</h2>
</li>
</ul>
</div>
Recuerda que es muy importante que tabules tu código, mira como se ve el mío.
Explicación
<div class="sidebar"> creamos un Div (Caja invisible) con la clase "sidebar", creo que ya
sabes para que hacemos esto, es para separar nuestra barra lateral de todo lo demás.
<ul> Etiqueta HTML para crear una lista desordenada.
<li> Etiqueta HTML para crear un elemento dentro de la lista desordenada.
<h2> Etiqueta HTML para subtítulos.
Guarda los cambios del index.php y del sidebar.php y abre tu explorador de

internet http://localhost/wordpress/ ahora verás el subtítulo Categorías
6. Copia y pega el siguiente código después de la siguiente línea de
código <li><h2>Categorías</h2> y antes de la etiqueta </li>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1'); ?>
</ul>
Entonces el código del sidebar va así.

Explicación
Esta función php requiere de una etiqueta UL a su alrededor, pero no necesita de la

etiqueta LI ya que ésta es generada automáticamente, puedes comprobarlo yendo a tu
blog http://localhost/wordpress/, luego clic en ver >> código fuente, y verás que cada
categoría tiene una etiqueta LI alrededor.
Para que veas esta parte del código en funcionamiento, debes ir al panel de
administración de tu blog http://localhost/wordpress/wp-admin y selecciona la
opción Entradas >> Categorías, allí crea dos categorías más, por defecto Wordpress trae
una categoría llamada General, pero tú puedes crear cuantas más quieras.
Posteriormente crea dos posts más, pero asegúrate que queden bajo las categorías que
acabas de crear, cuando tu creas un post puedes seleccionar bajo que categorías quieres
que quede, si una categoría no tiene ningún post, entonces no será mostrada.
Por ejemplo, yo cree 3 Categorías Cursos, Tutoriales y CSS como pueden ver la
categoría CSS no está listada, porque no tiene ningún post, si voy y creo un post que
quede bajo esa categoría, automáticamente será listada en el blog.
LISTADO DE PÁGINAS COMO LINKS DENTRO DE LA BARRA LATERA
(sidebar)
La mayoría de los blogs tienen en su barra lateral un listado similar a un menú, donde el
usuario puede navegar a través de estos links por todas las páginas del blog.
Pasos
2. Abre el archivo sidebar.php con el bloc de notas o con el editor de texto que estés
usando, recuerda que el sidebar.php debe estar en la carpeta tutorial en la siguiente
3. Escribe la siguiente línea de código exactamente antes de esta línea de

código <li><h2>Categorías</h2>
<?php wp_list_pages('title_li=<h2>Páginas</h2>'); ?>
Así como lo muestra la siguiente imagen

Explicación
Esta función php llama la lista de las páginas de tu blog y las convierte en links, esta
función tiene varios parámetros entre los cuales está el title_li, este parámetro sirve para
darle el nombre a la lista, por ejemplo Páginas, después de agregar esa línea de código
mi blog se ve así.
Abre tu explorador de internet http://localhost/wordpress/ ahora puedes ver algo similar

a la imagen anterior, seguramente en tu lista sólo aparezca Información, ya que es la
página que viene por defecto en la instalación de Wordpress, pero tú puedes crear todas
las páginas que quieras, e inclusive crear sub-páginas, para eso ve al panel de
administración de tu blog http://localhost/wordpress/wp-admin, y selecciona la
opción Páginas >> Crear.
Bueno, en el siguiente link puedes ver el código de cómo va hasta ahora mi sidebar.php
EXPLICACIÓN DE LAS ETIQUETAS UL y LI
Quiero hacer un paréntesis en este capítulo y explicar las etiquetas HTML UL y LI, en este
capítulo sólo vamos a ver una explicación no hay que hacer nada, seguiremos con la
creación de nuestro theme en el próximo capítulo.
La etiqueta UL sirve para definir una lista no ordenada de elementos y la etiqueta LI define
cada elemento de la lista.
También puedes tener una lista dentro de otra lista.
Bueno y esto para qué? porque lo estoy explicando? en el capítulo anterior listado de
páginas como links, estuvimos trabajando con estas etiquetas HTML de igual forma
utilizamos UL para definir la lista y LI para definir cada elemento de la lista, pero resulta
que hay algunas funciones de php en Wordpress que crean automáticamente estas
etiquetas haciendo parte del trabajo por nosotros.
Veamos…
El anterior código corresponde a nuestro sidebar.php, así es como lo llevamos, si vas a tu

blog http://localhost/wordpress/ y vez el código fuente (ver >> código fuente) verás
como encuentras las etiquetas LI alrededor de cada link de tus páginas y de igual forma
pasa con las categorías, en el código fuente puedes notar que hay una etiqueta LI
alrededor de cada una de las categorías.
COMO INCLUIR LOS ARCHIVOS DENTRO DE NUESTRA BARRA LATERAL
Normalmente los blogs muestran en su barra la lateral unos links con el nombre de los
meses donde están agrupados todos los posts que has publicado, esos son los archivos,
vamos a ver en este capítulo como incluirlos dentro de nuestra barra lateral.
Pasos
3. Escribe la siguiente línea de código exactamente después de la lista de categorías
<li><h2>Archivos por mes</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
Después de incluir estas líneas de código guarda los cambios, ahora nuestro sidebar.php
lucirá así.
Para recordar lo que llevamos hasta ahora dentro de nuestro sidebar.php encerré como lo
puedes ver en la imagen anterior tres grupitos, el primero es el que hace que se listen los
links de las páginas, el segundo lista las categorías y el tercero que fue el que acabamos
de añadir y que lista los archivos por mes.
Explicación

a la siguiente imagen.
Bueno, en el siguiente link puedes ver el código de cómo va hasta ahora mi sidebar.php
CÓMO INCLUIR LOS LINKS RECOMENDADOS DENTRO DE NUESTRA
BARRA LATERAL
Es común encontrar dentro de la barra lateral de muchos blogs un listado de links

recomendados a otros blogs o sitios web, es lo que se conoce como Blogroll o links
recomendados, vamos a ver en este capítulo como incluir el blogroll dentro de nuestra
barra lateral.
Pasos
3. Escribe la siguiente línea de código después de la lista archivos.
<?php get_links_list(); ?>
Explicación
Toda instalación de Wordpress trae por defecto un listado de enlaces o links

recomendados (Blogroll), lo que debemos hacer es ir al área de administración de nuestro
blog y borrar los que no queramos, e ir adicionando los links a los blogs que queremos
recomendar.
Para esto ve al panel de administración de tu blog http://localhost/wordpress/wp-

admin, entra a la opción Enlaces y desde allí puedes borrar y añadir los que quieras.
En el siguiente link puedes ver el código de mi sidebar.php hasta ahora.

FORMULARIO DE BÚSQUEDA
Dentro de los elementos más comunes, necesarios e imprescindibles de un blog está el

formulario de búsqueda, con el cual los usuarios pueden realizar búsquedas dentro de los
archivos de nuestro blog, el cuadro de búsqueda puede estar ubicado en el header o en la
barra lateral, para nuestro ejemplo vamos a ubicarlo en la barra lateral.
Pasos
2. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando,
copia el código de mi searchform a este nuevo archivo y guárdalo dentro de la carpeta
tutorial con el nombre de searchform.php.
4. Dentro del archivo sidebar.php escribe las siguientes líneas de código exactamente
antes de la lista de las páginas.
<li id="search">
<?php include(TEMPLATEPATH.'/searchform.php'); ?>
</li>
La siguiente imagen muestra donde van esas líneas de código.
Explicación
Además, esa línea de código está dentro de un <li> al cual le hemos dado un id="search",
si le das un ID puedes darle más tarde estilo con CSS.

En el siguiente link puedes ver el código de cómo va mi sidebar.php

PREPARA LA BARRA LATERAL PARA LOS WIDGETS
Preparar la barra lateral para admitir widgets se conoce como "widgetize", consiste en
preparar tu barra lateral para que funcione con el widget plugin con el cual se pueden
adicionar elementos a tu barra lateral sin necesidad de modificar el código, por ejemplo tu
puedes poner un calendario en tu barra lateral añadiendo un código especifico en tu
sidebar.php, pero también puedes hacer eso mismo sin necesidad de añadir el código
añadiendo un widget llamado calendario, esto se hace desde el panel de administración
de tu blog.
Para que los widgets funcionen en tu blog, vamos a "widgetize" la barra lateral
(sidebar.php)
Pasos
2. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando,
copia el código de mi functions a este nuevo archivo y guárdalo dentro de la carpeta
tutorial con el nombre de functions.php.
4. Dentro del archivo sidebar.php escribe la siguiente línea de código exactamente

después de la primera etiqueta <ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
Y esta otra línea de código exactamente antes de la última etiqueta </ul>
<?php endif; ?>
En el siguiente link puedes ver el código de cómo va hasta ahora mi sidebar.php
Bueno, con esas dos líneas de código hemos conseguido que nuestro sidebar o barra
lateral sea dinámica, que quiere decir eso, muy simple, que ahora puedes añadirle
elementos y quitárselos sin necesidad de escribir una sola línea de código y todo desde el
panel de administración de tu blog.
Quieres ver un ejemplo? la barra lateral de nuestro blog luce actualmente así: Un
formulario de búsqueda, el listado de links de las páginas, el listado de links de las
categorías, los archivos por mes y los enlaces, pero ahora puedes quitar, añadir y cambiar
el orden de los elementos que hay en esta barra lateral y todo eso desde el panel de
administración, porqué? porque ahora tenemos una barra lateral dinámica.
Quieres ver cómo funciona, sencillo ve al panel de administración de tu

blog http://localhost/wordpress/wp-admin, ubica el menú widgets, añade los que
quieras y luego chequea como va cambiando tu barra lateral.
Cuando ya hayas practicado con esto, te pido un favor, ve y desactiva todos los widgets
que añadiste, para que quede igual a como lo teníamos, así podrás seguir el tutorial sin
confundirte.
CREAR EL PIE DE PÁGINA O FOOTER
El footer es la parte final que normalmente tienen los blogs o sitios web donde se puede
poner por ejemplo el copyright del blog, quién diseño el theme (a partir de ahora
aparecerá tu nombre, porque dejarás de utilizar themes creados por otros).
Pasos
3. Escribe la siguiente línea de código exactamente después de la línea de código

get_sidebar
<?php get_footer(); ?>
Explicación
<?php get_footer(); ?> función php que llama el archivo footer.php
4. Borra las etiquetas </body> y </html> del archivo index.php son las dos etiquetas que
siguen después de la línea que acabas de adicionar, esas dos etiquetas se deben borrar
porque deben ir al final del archivo que vamos a crear a continuación.
5. Crea un nuevo archivo con el editor de texto que estés trabajando y guarda el archivo
con el nombre de footer.php dentro de la carpeta tutorial.
6. Escribe el siguiente código dentro del archivo footer.php que acabas de crear.
<div id="footer">
<p>
Copyright © 2009 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name');

?></a>
</p>
</div>
Explicación
En este caso una breve explicación, porque la línea de código utilizada ya la habíamos
usado.
Bueno como puedes ver esas dos funciones están dentro de la etiqueta <a href></a> y
básicamente lo que hicimos es que el nombre del blog aparezca en el footer como un link.
7. Digita las dos etiquetas que borraste en el punto 4, al final del archivo footer.php
Guarda los cambios del index.php y del footer.php y abre tu explorador de

internet http://localhost/wordpress/ ahora verás en la parte inferior de la página el
footer.
Puedes ver el código de mi index y del footer.

CREACIÓN DE LOS SUB-ARCHIVOS DE PLANTILLA
Aún nos falta crear algunos archivos que son utilizados por Wordpress para desplegar la
información en tu blog, por ejemplo el resultado de una búsqueda en wordpress es
desplegada en base al archivo search.php.
Si quieres puedes ir al capítulo de introducción donde habíamos hablado sobre los

archivos que normalmente componen un theme de wordpress.
Lo mejor de todo es que muchos de estos archivos son iguales al index.php basta con
copiar el código y hacerle algunos cambios mínimos y listo.
Pasos
1. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando y
guárdalo con el nombre de archive.php
2. Copia todo el código del index.php a archive.php y guarda los cambios.
3. En archive.php cambia el código the_content por the_excerpt
4. Guarda los cambios.
Explicación
Cambiar esa línea de código hace que ahora los archivos muestren sólo un extracto de
cada post y no el post completo, como una especie de resumen, puedes ir a tu blog y
luego le das clic en el enlace de archivos para que veas el cambio, esa página de
archivos es desplegada en base al archivo llamado archive.php, vale la pena resaltar algo,
seguro ya lo tienes claro, si el archive.php no existe, wordpress se basa en la jerarquía de
archivos de plantilla para ubicar el archivo que le sirve para desplegar la información,
entonces si archive.php no existe, wordpress utilizará el index.php.
guárdalo con el nombre de category.php
6. Copia todo el código de archive.php a category.php

Explicación
Simple, cuando vayas a tu blog y le des clic al enlace de categorías, wordpress buscará
inicialmente el archivo category.php para mostrar la información, si category.php no existe
entonces buscará el archive.php y si este no existe buscará el index.php.
Es bueno tener un archivo category.php pues te permite personalizar las categorías de

forma diferente a la página de archivos o al propio home o index.
guárdalo con el nombre de search.php
9. Copia todo el código de archive.php a search.php
11. Crea dos nuevos archivos y guárdalos con los nombres de page.php y single.php
respectivamente.
12. Copia y pega el código del index.php en cada uno de estos dos archivos.
14. En el archivo page.php adiciona el siguiente código exactamente después de la

línea <?php the_content(); ?>:
<?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?>
<?php edit_post_link('Edit','<p>','</p>');?>
Explicación
La primera línea de código crea links para las sub-páginas
La segunda línea crea el botón editar páginas, siempre y cuando estés logueado como
administrador.
Mira como se ve en mi blog

Para dividir una página en subpáginas, basta con ir el panel de administración de tu blog,
editas una página dividiendo el texto con la etiqueta  y listo.
15. Mira la imagen anterior, borra el código Post Meta Data del archivo page.php
16. Borra también el código Post Nav Links de page.php

17. En el archivo single.php adiciona el siguiente código exactamente después del la
línea <?php the_content() ?>:
<?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?>
Explicación
Al igual que hicimos en el page.php esa línea permite dividir un post en varios sub-posts
18. Reemplaza la función <?php posts_nav_link();?> con la siguiente línea de código
<?php previous_post_link('« %link') ?> <?php next_post_link(' %link

»') ?>
Explicación
Reemplazamos esa línea de código, porque en el archivo single.php no queremos llamar

el link de la siguiente o anterior página, sino del siguiente o anterior post.
Puedes ir ahora a tu blog http://localhost/wordpress/ y navegar dando clic en el título de

un post para que veas los cambios.
Aquí tienes los códigos de mis archivos para que
compares, index, archive, search, page, single, category.
VALIDAR EL CÓDIGO
En el capítulo de introducción mencioné que necesitaríamos unas herramientas entre las

cuales está el validador XHTML para asegurarnos que nuestro código no contenga
errores, es importante hacer esta revisión antes de continuar.
Pasos
2. Abre tu explorador de internet y ve a tu blog http://localhost/wordpress/
3. Una vez estés en tu blog, clic derecho >> ver código fuente, copia todo el código que
veas en pantalla desde el inicio hasta el final.
4. Ve a siguiente link para validar el código, Validador XHTML, pega el código y presiona
el botón "Check"
Puedes ver que el resultado es que pasó, si hay algún error allí aparecería el número de
errores, además te mostraría donde están los errores y una posible solución, si has
seguido el tutorial desde el inicio, entonces te debe estar mostrando también que pasaste
la verificación.
INTRODUCCIÓN CSS (style.css)
En el capítulo de introducción, comenté que con el archivo style.css vamos a diseñar

mediante código CSS (Hojas de estilo en cascada) la apariencia que tendrá nuestro blog.
Podemos decir que lo que llevamos hasta ahora es como un 30% de la creación de un
theme, el 70% restante corresponde al diseño con CSS, hasta aquí has aprendido XHTML
y PHP, vamos muy bien, prepárate para aprender un poco de CSS, y sí digo un poco
porque esta tecnología es muy potente así que lo que te voy a mostrar no es sino una
mínima parte de lo que puedes hacer.
Una vez termines este tutorial, te aconsejaría que te hagas a un manual de CSS para que
le saques todo el potencial que tiene este fabuloso lenguaje.
La mejor forma de aprender CSS es practicando, tenlo en cuenta.
Comencemos!
Pasos
2. Abre el archivo style.css con el bloc de notas o con el editor de texto que estés usando,
recuerda que el style.css debe estar en la carpeta tutorial en la siguiente
3. Verifica que el contenido del archivo style.css sea el siguiente.
/*
Theme Name: Tutorial
Theme URI: http://www.unapunte.com
Description: Theme para un Tutorial
Version: 1.0
Author: Cristian Gil

Author URI: http://www.unapunte.com
*/
Explicación
Esa información la interpreta wordpress, por eso cuando entras al panel de administración
de tu blog, al apartado de estilo >> temas, verás que hay un tema con el nombre tutorial y
la descripción que dice Theme para un Tutorial, esa es la información que ponemos
inicialmente en el archivo CSS.
Ten presente como se abre un comentario y como se cierra en CSS, la información

anterior y que está dentro de nuestro archivo CSS es un comentario, recuerda utilizar el /*
para abrir tus comentarios y */ para cerrarlos, es muy útil comentar nuestro código por
orden y para recordar más adelante que es lo que hace.
Mientras vamos creando nuestro código CSS, debemos abrir varios navegadores de
internet como (Firefox, Internet Explorer, Google Chrome) ya que hay una mala noticia,
los navegadores interpretan algunas líneas de código CSS de forma diferente, entonces
tenemos que ir revisando que el diseño se vea igual en todos los navegadores o al menos
en los más populares.
Vamos a ver de manera resumida una explicación sobre la sintaxis del CSS y cómo es
que funciona.
1. Estructura de una regla CSS
SELECTOR {propiedad:valor;}
Ejemplo:
H1 {color:#000000;}
En el ejemplo el selector es una etiqueta HTML, porque en CSS podemos utilizar
etiquetas HTML o selectores propios creados por nosotros, esa línea de código hace que
todos los textos que estén alrededor de una etiqueta <H1> siempre tengan color negro.
2. Agrupamiento
Selectores: Si se desea definir una regla que aplique a varios selectores, desde 2 hasta
los que queramos.
SELECTOR, SELECTOR {propiedad:valor;}
Ejemplo:
H1, P {color:#000000;}
En el ejemplo estamos dándole estilo a dos selectores al mismo tiempo, tanto la etiqueta
<H1> como <p> tendrán su texto color negro.
Declaraciones: Si se desea se pueden agrupar varias declaraciones para un mismo

selector, separadas por punto y coma, hay algunas propiedades como por ejemplo font
que admiten varios valores.
SELECTOR: {propiedad:valor valor; ropiedad:valor; propiedad:valor;}
Ejemplo:
H1 {font: 18pt helvetica; color:#000000; background:#FF0026;}
3. Selectores de Clase (Clases)
Los selectores de clase, que se conocen comúnmente como clases, son selectores que
podemos reutilizar a lo largo de nuestro código HTML para darle el mismo estilo a
diferentes partes de nuestra página, son utilizados normalmente para agrupar estilos que
se repiten constantemente, Las clases siempre comienzan con un punto.
.NOMBRE_CLASE {propiedad:valor;}
Ejemplo:
.float-left{float:left;}
Esta clase la podemos utilizar todas las veces que queramos hacer flotar un elemento a la
izquierda.
4. Selectores ID
Los selectores ID deben ser usados una sola vez a diferencia de los selectores de clase.
#NOMBRE_SELECTOR_ID {propiedad:valor;}
Ejemplo:
#Header {float: left; width: 980px;}

Recuerdas que en una parte del código digitamos <div id="header"> pues bien eso lo
hicimos precisamente para darle estilo mediante CSS al header.
Entonces como es que funciona HTML con CSS, muy simple.
En el archivo header.php hay una línea de código <link rel="stylesheet" href="<?php

bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> que es la encargada
de vincular el archivo style.css al blog.
Bueno, esto es solo una breve introducción que te servirá para entender mejor el código
CSS con el que vamos a darle estilo a nuestro Theme, pero no olvides que CSS es de
práctica, así que no pretendamos entenderlo de la noche a la mañana, verás cómo te irá
pareciendo cada vez más fácil y práctico.
COMENCEMOS A CREAR EL CÓDIGO CSS
Pasos
2. Abre el archivo style.css, header.php y footer.php con el bloc de notas o con el editor
de texto que estés usando, recuerda estos archivos deben estar en la carpeta tutorial en
la siguiente ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
3. Digita el siguiente código después de la etiqueta <body> del archivo header.php
<div id="wrapper">
4. Digita el siguiente código antes de la etiqueta </body> del archivo footer.php
</div>
5. Digita el siguiente código en el archivo style.css
#wrapper{
margin: 0 auto 0 auto;
width: 980px;
text-align: left;
Explicación
<div id="wrapper"> esta línea de código crea un div o caja que contendrá todos los
elementos de nuestro theme, como es el header, el contenido, la barra lateral, el footer,
con ese div vamos a definir el tamaño que tendrá el theme, si 750px (resolución de
800x600) ó 980px (resolución 1024 x 768)
Como puedes notar le dimos un id con el nombre de "wrapper" para poderle dar estilo con
CSS, es en el archivo CSS donde le indicaremos el tamaño en pixeles.
</div> Esta etiqueta cierra la línea de código anterior.
Y esta es la explicación del código CSS
6. Copia el código CSS de mi style.css y pégalo en tu archivo style.css
Mi consejo es que no copies y pegues, sería bueno que al principio digites el código así
aprenderás más rápido, luego si podrás copiar y pegar, además si utilizas un editor de
CSS o por ejemplo DreamWeaver verás que es muy fácil escribirlo, el mismo programa te
va mostrando los valores que tiene cada propiedad.
Explicación
Cada línea es una propiedad con su respectivo valor, como lo había comentado en el
capítulo anterior, la estructura del código CSS normalmente es:
Selector {propiedad:valor;}
Un selector puede ser una etiqueta HTML como es el caso anterior, el <body> es una
etiqueta HTML, lo que estamos haciendo con el código CSS anterior y en orden es lo
siguiente:
background color blanco, color de texto negro, el tipo de fuente verdana, arial, helvetica,
sans-serif , el tamaño de fuente de 12px, el margen de cero, que el texto siempre esté
alineado a la izquierda y por último asegurarse que todo comience alineado arriba.
Todos estos estilos serán aplicados a todo el blog, porqué? porque todo está dentro de
las etiquetas <body></body>, ahora tu preguntarás y que pasa si yo quiero que el texto de
mi barra lateral sea de tamaño 14px y que el color de fuente sea blanco y no negro.
Fácil, el código CSS da "prioridades", si tu defines para la barra lateral otro texto el tomará
ese y no el del <body>.
Explicación del resto del código CSS
7. Guarda los cambios en el archivo style.css, header.php y footer.php

8. Abre tu explorador y ve a la dirección de tu blog http://localhost/wordpress/ ves todos
los cambios que han surgido, mi blog luce ahora así.
El header tiene un color azúl de fondo, el área del container es donde se muestran los
posts, la barra lateral de color gris y finalmente el footer color verde.
Puedes ver el código de mi archivo style.css
9. Valida tu código CSS al igual que hicimos con el código HTML, para eso ingresa
a Validar CSS y copia y pega todo el código de tu archivo style.css y da clic en botón
Check.
Si no encuentra errores mostrará un mensaje como este:
Como lo había comentado anteriormente el trabajo con nuestro archivo style.css

corresponde a un 70% del diseño de un theme para wordpress, por eso como dice Mr.
Maker mi tiempo de trabajo ha terminado pero el suyo acaba de comenzar.
PLANTILLA DE COMENTARIOS
Los comentarios son una parte muy importante de los blogs, en parte es lo que los ha
hecho tan populares, mediante la plantilla de comentarios permitiremos que los usuarios
de nuestro blog puedan expresarse y compartir con nosotros y los demás usuarios del
blog.
Pasos
2. Crea un archivo con el bloc de notas o con el editor de texto que estés usando, y
guárdalo con el nombre comments.php en la carpeta tutorial que está ubicada en la ruta
C:\wamp\www\wordpress\wp-content\themes\tutorial
3. Copia el código de mi archivo comments en el archivo que acabas de crear.
4. Digite el siguiente código debajo del </div>  del archivo single.php
<div class=”comments-template”>
<?php comments_template(); ?>
</div>
5. Guarde los cambios
6. Abre tu explorador y ve a la dirección de tu blog http://localhost/wordpress/
7. Clic sobre un título de alguno de tus posts.

8. Ahora verás como al final del post aparece un formulario de comentarios como el que
puedes ver en la siguiente imagen.
Felicitaciones, Así llegamos al termino de este tutorial para el diseño y creación de un

Theme para Wordpress, espero lo hayan disfrutado y lo más importante que les haya
servido para lo que estaban buscando.
Ahora puedes conservar este primer theme como base para crear todos los demás
themes que quieras, lo único que tendrás que hacer más adelante será modificar el
style.css para darle el estilo que quieras, pero en esencia la estructura que acabas de
crear te servirá para cualquier theme que desees crear en el futuro.
Por favor cuando hayan creado su primer theme y quieran compartirlo, no olviden
escribirme un e-mail con seguridad visitaré su blog.
Sí estás interesado en los Negocios Online y quieres aprender técnicas efectivas de
Marketing en Internet, visita mi sitio web MarketingOptimo.com, constantemente estoy
publicando contenidos relacionados con los negocios en la red. Si consideras que es un
tema importante e interesante para ti y quieres estar al tanto, recuerda suscribirte a
nuestros boletines electrónicos.
Saludos,
Cristian Gil
Director: MarketingOptimo.com

Tutorial Crear Theme Wordpress

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tutorial Crear Theme Wordpress

Hochgeladen von

Copyright:

Verfügbare Formate

Autor: Cristian Gil

Un saludo muy especial,

INSTALACIÓN DE WORDPRESS ..................................................................................................................... 7

LA CABECERA (HEADER) ............................................................................................................................. 13

EL BUCLE (THE LOOP) ................................................................................................................................. 16

POST META DATA ...................................................................................................................................... 23

LINKS SIGUIENTE Y ANTERIOR .................................................................................................................... 26

LA BARRA LATERAL (SIDEBAR) Y LAS CATEGORÍAS ..................................................................................... 28

LISTADO DE PÁGINAS COMO LINKS DENTRO DE LA BARRA LATERA (SIDEBAR) .......................................... 32

EXPLICACIÓN DE LAS ETIQUETAS UL Y LI .................................................................................................... 34

COMO INCLUIR LOS ARCHIVOS DENTRO DE NUESTRA BARRA LATERAL ..................................................... 36

PREPARA LA BARRA LATERAL PARA LOS WIDGETS .................................................................................... 43

CREAR EL PIE DE PÁGINA O FOOTER .......................................................................................................... 45

CREACIÓN DE LOS SUB-ARCHIVOS DE PLANTILLA ...................................................................................... 47

VALIDAR EL CÓDIGO .................................................................................................................................. 52

INTRODUCCIÓN CSS (STYLE.CSS) ................................................................................................................ 53

COMENCEMOS A CREAR EL CÓDIGO CSS .................................................................................................... 57

PLANTILLA DE COMENTARIOS .................................................................................................................... 61

Bueno, una breve introducción antes de comenzar, un Theme en wordpress es

Puedes cambiar el theme de tu blog fácilmente y de esta manera cambiar el diseño de

Pero la estructura de un theme la componen normalmente los siguientes archivos

No te preocupes por esta lista, ya los veremos en su momento y te sorprenderás por lo

Para seguir este tutorial necesitas:

- Instalar Wordpress en tu computador o si tienes un sitio web y no quieres hacer la

Jerarquía dentro de un Theme de Wordpress

1. Descargar Wamp Server

Descargar: Wamp Server

2. Instalar Wamp Server

3. Crear la base de datos para tu blog

Listo ya tienes creada la base de datos para tu blog.

Ingresa a la página oficial de Wordpress y descarga el paquete en español

Descargar: Wordpress en español

- Descomprime el paquete que has descargado y copialo en esta

- Guarda los cambios y renombra el archivo de wp-config-sample a wp-config.

- Ejecuta el instalador de Wordpress digitando la siguiente dirección en tu navegador de

- Digita el nombre que quieres para tu blog y la dirección de tu e-mail.

Ahora sí comienza lo entretenido.

1. Abre el Wamp Server:

2. Crea la carpeta para tu Them:

Ve a la carpeta Themes de la instalación de Wordpress, la ruta

3. Crea el archivo index.php:

4. Crea el archivo style.css:

Explicación código index.php

La siguiente imagen contiene exactamente el código que tu acabas de pegar en tu archivo

<head> es donde inicia la cabecera del documento HTML

<body> es donde el cuerpo del documento HTML comienza

</body> final del cuerpo

</html> final del documento HTML

Ahora copia y pega la siguiente dirección en tu

Es allí donde normalmente mostramos el nombre del blog, su descripción y también se

1. Abre el Wamp Server:

En estos momentos si pegas esta dirección en tu

3. Escribe el siguiente código <h1><a href=”<?php bloginfo(’url’); ?>”><?php

Ahora guarda los cambios, ve nuevamente a http://localhost/wordpress/ y refresca la

Basicamente la línea de código que acabamos de escribir <h1><a href=”<?php

Ve nuevamente a la página http://localhost/wordpress/ y verás que el título de tu blog

4. Escribe el siguiente código <?php bloginfo('description'); ?> después de la línea de

Guarda los cambios, ve nuevamente a http://localhost/wordpress/ y refresca la página.

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

<?php bloginfo('description'); ?>

6. Adiciónale un id a la etiqueta <div> que acabas de crear así.

Entonces nuestro código ahora luce así:

<?php bloginfo('description'); ?>

Ahora nuestra etiqueta <div> tiene un nombre.