Aprende A Crear Un Tema de WordPress Desde Cero

12/1/2016 AprendeacrearuntemadeWordPressdesdeceroeSandra
Tecnologa y Coaching para Emprendedores
CursosOnline Blog Contacto Iniciar Sesin Registro
Curso de Diseo Web

Aprende a crear un tema de WordPress desde cero
Responsive
Graciasporcompartir: 59 75 31
WordPress es un sistema gestor de contenidos muy potente con el que podemos crear sitios
web muy potentes y verstiles. Todava hay quien piensa que WordPress es slo una
Consigue un VPS en Gigas
plataforma para crear blogs, pero nada ms lejos de la realidad, con WordPress podemos crear como hosting
verdaderos portales web que incluyan incluso una tienda online.
Existen muchos sitios web donde adquirir plantillas de WordPress premium de gran valor
aadido, sin ir ms lejos aqu he recopilado 50 de las mejores plantillas de WordPress. Pero a
veces queremos ir un paso ms all y desarrollar nuestro propio tema, y las primeras veces
tenemos la tendencia a tirar de un framework como Thematic o de un tema bsico pensado
para desarrollo como Bones.
La primera vez que cre un tema de WordPress lo hice usando el framework Thematic. La
razn 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 difcil. 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 montn de funciones innecesarias para las prestaciones que
necesitas y adems tienes el control 100% sobre todos los archivos y contenidos de la plantilla
Aprende Ahora Bootstrap 3
de WordPress en cuestin.
He creado este artculo con el claro objetivo de ayudarte a crear un tema de WordPress desde
cero sin necesidad de conocimientos previos de cmo se estructura una plantilla de WordPress.
Se entiende que tienes slidos conocimientos de HTML y CSS, y algn conocimiento de PHP te
puede ser til, aunque no es imprescindible.
Notfound!
Thecontentyouarelookingforisno
longeravailable.
http://www.esandra.com/crearplantillawordpressdesdecero 1/25
Taller impartido en el Congreso Web 2013[/caption]
Cmo crear un tema de WordPress desde cero

Para poder seguir este tutorial, vamos a necesitar tener WordPress instalado. Si no lo tienes
instalado todava, este tutorial sobre cmo 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>wpcontent>themes, siendo carpetawordpress
la carpeta donde tenemos instalado WordPress. Dentro de themes veremos las carpetas de los
temas de WordPress que contiene nuestra instalacin. 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 artculo quieres tener una idea de qu va, te recomiendo estas diapositivas
de mi presentacin del taller de WordPress en el Congreso Web de Zaragoza, as como este
vdeo 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.
Notfound!
Thecontentyouarelookingforisno
longeravailable.
Hangout con el equipo de desarrolloweb.com
Y aqu el hangout con los tips para crear un tema de WordPress desde cero:
Tips para creacin de plantillas de Wordpress #designIO
Archivos de un tema de WordPress

Tal y como veremos, WordPress funciona por mdulos, as por ejemplo para insertar el footer
en una pgina 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, slo necesitar dos archivos:
index.php y style.css. Est claro que con slo estos dos archivos tendremos un tema muy bsico
y de ir por casa, pero a final de cuentas, ser considerado por WordPress un tema vlido si
estos dos archivos estn bien configurados.
Con esto estamos tambin 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 carpetamitema como un tema de
WordPress.
Aqu vamos a desarrollar un tema ms 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 ms complejos.
As, vamos a desarrollar un tema con la mayora de archivos y carpetas que utilizo para este
tema de CreativaSfera, y sern los siguientes:
/images. Carpeta con las imgenes 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 pgina principal.
screenshot.png. Muestra la imagen en miniatura que se ver en el panel de adminsitracin

enApariencia>Temas.
favicon.ico. La imagen que se ver en el navegador y al guardar el marcador.
header.php. Mdulo que contiene la cabecera del tema.
sidebar.php. La barra lateral del tema. Nota: Si queremos ms de una barra lateral, se
habrn de configurar de modo manual.
footer.php. Mdulo que contiene el pie de pgina del tema.
single.php. Este archivo indica cmo se ve una entrada de blog.
category.php. Muestra cmo se ve la pgina de resultados de una categora.
tag.php. Muestra cmo se ve la pgina de resultados de una etiqueta.
search.php. Muestra cmo se ve la pgina de resultados de bsqueda.
template.php. Plantilla de pgina que a ttulo de ejemplo llamaremostemplate.
functions.php. Archivo con las funciones de nuestro tema de WordPress.
Como comentaba, en esta plantilla utilizaremos prcticamente 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 entrarn temas como diseo, capacidad de crear un buen cdigo 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 tambin! Y como todos hemos empezado alguna vez de cero y visto
lo difcil que es encontrar buenos tutoriales de cmo 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 fcil lo supuestamente difcil, vamos a aplicar la
tcnica del divide y vencers. 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 informacin. 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 informacin:
1 /*
2 ThemeName:Mitema
3 ThemeURI:http://www.mitema.com
4 Description:MiprimertemadeWP.
5 Author:Tunombre
6 AuthorURI:http://www.tunombre.com
7 Version:1.0
8 */
Fjate 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:
1 /*
2 ThemeName:CreativaSfera
3 ThemeURI:http://www.esandra.com
4 Description:WebdeCreativaSfera.Todoslosderechosreservados.
5 Author:eSandra
6 AuthorURI:http://sandra.esandra.com
7 Version:4.0
8 */
En mi caso en descripcin 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 conitnuacin, 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 cdigo de CSS.
Paso 2: Imgenes 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, tambin necesitaremos respond.js. Modernizr es una librera 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 raz 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
cdigo de header.php:
01 <!DOCTYPEhtml>
02 <html<?phplanguage_attributes();?>>
03
04 <head>
05 <metacharset=<?phpbloginfo('charset');?>">
06 <title><?phpwp_title();?></title>
07
08 <!Definirviewportparadispositivoswebmviles>
09 <metaname="viewport"content="width=devicewidth,minimumscale=1">
10
11 <linkrel="shortcuticon"href="<?phpecho
get_stylesheet_directory_uri();?>/favicon.ico"/>
12 <linkrel="stylesheet"media="all"href="<?phpbloginfo(
'stylesheet_url');?>"/>
13
14 <linkrel="pingback"href="<?phpbloginfo('pingback_url');?>"/>
15
16 <?phpwp_head();?>
17
18 </head>
19 <body>
20 <divclass="wrapper">
21 <header>
22 <h1><ahref="<?phpechoget_option('home');?>"><?php
bloginfo('name');?></a></h1>
23 <hr>
23 <hr>
24 <?phpwp_nav_menu(array('menu'=>'Main','container'=>'nav'));
?>
25 </header>
Lo primero que hemos hecho ha sido declarar el doctype, en este caso para HTML5.
Seguidamente hemos abierto la etiquetahtml indicando que seleccione los atributos de idioma
de la instalacin de WordPress. Dentro de head hemos usado bloginfo('charset');para que
seleccione la codificacin predeterminada de nuestra instalacin de WordPress. La funcin
wp_title() selecciona y muestra el ttulo especificado en Ajustes>General del panel de
administracin de WordPress.
En el caso de estar diseando 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 instalacin de
WordPress, y para ello llamafremos a la funcin de PHP get_stylesheet_directory_uri();:
1 linkrel="shortcuticon"href="<?phpechoget_stylesheet_directory_uri();
?>/favicon.ico"/>
Otro modo de acceder a mitema ser:
1 <scriptsrc="<?phpbloginfo('stylesheet_directory');?
>/js/respond.min.js"></script>
Aqu hemos accedido al directorio de mitema con bloginfo('stylesheet_directory');.
Finalmente incluiremos la funcin 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.
Quizs aqu te ests preguntando por que incluir el body en header.php y no enindex.php. La
razn es sencilla: los contenidos de la cabecera del tema van a estar en todas las pginas, por lo
que al incluirlo aqu, evitamos duplicar cdigo y el mantenimiento del tema va a ser mucho ms
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 pgina de inicio:
1 <h1><ahref="<?phpechoget_option('home');?>"><?phpbloginfo('name');?
></a></h1>
Insertar el men de navegacin
Fjate que en la etiqueta header hemos escrito esta lnea:
1 <?phpwp_nav_menu(array('menu'=>'Main','container'=>'nav'));?>
Bien, para que esto funcione, primero deberemos aadir al archivo functions.php este cdigo:
01 <?php
02 //RegistrodelmendeWordPress
03
04 add_theme_support('navmenus');
05
06 if(function_exists('register_nav_menus')){
07 register_nav_menus(
08 array(
09 'main'=>'Main'
10 )
11 );
12 }
13 ?>
Este cdigo lo que hace es crear un men llamado Main que nos aparecer en el panel de
administracin de WordPress en Apariencia>Mens. Lo que est cdigo dice es que si existe una
funcin llamada register_nav_menus, que entonces cree un nuevo men de navegacin llamado
Main. Hemos aadido la funcin de WordPRess add_theme_support() para indicar que en este
tema queremos poder crear mens dinmicos.
A partir de aqu, simplemente habremos de ir a Apariencia>Mens y crear nuestro men y

guardarlo:
Con esto ya tenemos la cabecera del tema creada junto con su men de navegacin. Recuerda
que para aadir pginas al men de WordPress, primero hay que crear las pginas o no
podremos hacerlo.
Si quieres crear un men de navegacin complejo, que sea responsive, incluya imgenes,
mapas, submens 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 montn de horas de codificacin y
trabajo. Con sus ms de 17.000 ventas y una valoracuin de 5 sobre 5 estrellas, es algo a tener
en cuenta.
Paso 4: creamos la barra lateral

La mayora de temas de WordPress incluyen una barra lateral que no tiene por qu aparecer en
todas las pginas del tema. En las barras laterales acostumbramos a poder aadir widgets, por
lo que se van a tener que habilitar para widgets. Para ello, abriremos nuestro archivo
functions.php e incluiremos esta funcin:
01 <?php
02
03 //MainSidebar
04 if(function_exists('register_sidebar'))
05 register_sidebar(array(
06 'name'=>'MainSidebar',
07 'before_widget'=>'<hr>',
08 'after_widget'=>'',
09 'before_title'=>'<h3>',
10 'after_title'=>'</h3>',
11 ));
12
13 ?>
Al hacer esto, si vamos a Apariencia>Widgets, veremos que nos aparece una nueva zona de
widgets llamada MainSidebar. Si nunca has creado una zona de widgets, te recomiendo este
artculo 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:
1 <sectionid="sidebar">
2
3 <?phpif(!function_exists('dynamic_sidebar')||
!dynamic_sidebar('MainSidebar')):?>
4 <?phpendif;?>
5
6
7 </section>
He utilizado un id teniendo en cuenta que en este tema slo va a existir una barra lateral, pero
si quieres crear ms, quizs 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
despus integrarlo todo en index.php. Recordemos que WordPress funciona por mdulos, con lo
que lo que estamos haciendo ahora es crear los mdulos necesarios para que nuestra pgina
de inicio, en este caso index.php, se muestre correctamente.
El archivo footer.php
01 <footer>
02 <p>&amp;copy;<?phpbloginfo('name');?>,<?=date('Y');?>.Mi
primertemadeWP.</p>
03
04 </footer>
05
06 </div><!Findewrapper>
07
08 <?phpwp_footer();?>
09 </body>
10 </html>
Fjate 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 losdiv que abren y cierran wrapper.
Aqu aparece la funcin 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 dewp_footer va a ser adems necesaria si queremos ver la barra de administracin

de WordPress. Lo comento ms que nada porque no sers el primero que se vuelve loco
buscando el por qu no aparece la barra de administracin hasta que descubre que es porque
no ha llamado a este hook de WordPress.
Paso 6: creamos la pgina principal

Como ya he comentado, en este tutorial la pgina principal se va a corresponder a los
contenidos de index.php. As, creamos este archivo tal y como indico a continuacin.
El archivo index.php
01 <?phpget_header();?>
02
03
04 <sectionid="main">
05
06
07
08 </section><!Findemain>
09
10 <?phpget_sidebar()?>
11
12
13 <?phpget_footer();?>
Fjate 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 haceget_header() es insertar los contenidos del archivo header.php en el lugar donde se
encuentra esta funcin. Lo mismo pasa conget_sidebar() para los contenidos desidebar.phpy
get_footer() para los contenidos de footer.php. Es lo que comentaba de que WordPress
funciona por mdulos.
Paso 6. El loop de WordPress

La potencia de WordPress reside en el loop. Qu es el loop? Significa bucle en ingls y lo que
hace es mostrar las entradas de la instalacin de WordPress de la forma en que nosotros lo
programemos. Es gracias al loop de WordPress que podemos ver un listado de entradas
A continuacin te muestro el cdigo del loop que utilizo aqu en CreativaSfera:
01 <?phpif(have_posts()):while(have_posts()):the_post();?>
02
02
03 <h2><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>
</h2>
04 <small>Publicadoel<?phpthe_time('j/m/Y')?>por<?php
the_author_posts_link()?</small>
05 <?phpthe_excerpt();?>
06
07
08 <?phpendwhile;else:?>
09 <p><?php_e('Nohayentradas.');?></p>
10 <?phpendif;?>
Vayamos paso a paso. En la primera lnea tenemos:
1 <?phpif(have_posts()):?><?phpwhile(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()). Fjate en el if, significa que slo ejecute el resto si esta
condicin se cumple, esto es, que exista algn 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 cmo ha de mostrar los
contenidos del post.
As pues, ahora mostraremos el ttulo de la entrada con una enlace a la misma:
1 <h3class="title"><ahref="<?phpthe_permalink()?>"rel="bookmark"
title="Enlacepermanentea<?phpthe_title_attribute();?>"><?php
the_title();?></a></h3>
La funcin the_permalink() se encarga de encontrar el enlace permanente a la entrada, para que

podamos ir a la misma. Y la funcin the_title() mostrar en pantalla el ttulo de la entrada.
Si queremos que debajo del ttulo se vean datos como la fecha de publicacin, la categora, el
autor, etc., se lo tendremos que especificar a continuacin:
the_author_posts_link()?></small>
La funcin the_time() muestra la fecha de publicacin y en el parntesis podemos definir el

formato de la fecha entre comillas. Con la funcin the_author_posts_link() estamos mostrando el
nombre del autor con un enlace a su pgina de autor.
Si queremos mostrar las etiquetas, lo haremos con la funcin the_tags(), y si lo quisiramos

hacer es mostrar la categora de la entrada, utilizaramos la funcin the_category().
Seguidamente, con la funcin 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 cdigo:
3 <?phpendif;?>
En el caso que no hayan entradas, se mostrar el mensaje de No hay entradas.
Paso 7. Aadir thumbnails al loop
Si queremos aadir thumbnails al loop como sucede en este blog, lo que haremos es lo
siguiente: vamos al archivo functions.php y aadimos este cdigo:
1 <?php
2 //Habilitarthumbnails
3 add_theme_support('postthumbnails');
4 set_post_thumbnail_size(150,150,true);
5 ?>
Con este cdigo hemos habilitado los thumbnials o imgenes destacadas de nuestras entradas
y hemos establecido un tamao para las mismas de 150 por 150 pxeles. Una vez hecho esto,
modificaremos nuestro loop como sigue:
02
</h2>
05 <divclass="thumbnail">
06 <?php
07 if(has_post_thumbnail()){
08 the_post_thumbnail();
09 }
10 ?>
11 </div>
13
16 <?phpendif;?>
Fjate que hemos aadido:
1 <?php
4 }
5 ?>
if(has_post_thumbnail())significa que compruebe si la entrada en cuestin 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 lnea con la imagen destacada, lo
haremos a travs del CSS.
Con esto ya hemos creado nuestra pgina principal, con su cabecera, zona de contenidos con
las ltimas entradas, barra lateral y pie de pgina. Para aadir una paginacin de las entradas,
te recomiendo este post sobre cmo crear la paginacin de las entradas en WordPress. Aunque
est en ingls, como es slo cdigo es fcil de entender. En cualquier caso, si descargas los
archivos de este tema, viene ya incluida la paginacin 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 bsqueda
Vimos ya cmo crear un campo de bsqueda en WordPress. Lo vamos a adaptar ahora a

nuestro tema.
El archivo search.php
02
04 <h2>Resultadosdelabsqueda</h2>
06
</h2>
09 <divclass="thumbnail">
10 <?php
13 }
14 ?>
15 </div>
17
18 <?phpendwhile;?>
19 <?phpif(function_exists("pagination")){
20 pagination($additional_loop>max_num_pages);
21 }?>
22 <?phpelse:?>
23 <divclass="entry"><?php_e('Losentimos,nohayresultadosconeste
trminodebsqueda.');?></div>
24 <?phpendif;?>
25
27
29
Fjate que se parece mucho a index.php. Esta pgina es la que va a mostrar los resultados de una
bsqueda en cuestin. As, vamos a necesitar crear un buscador. Vamos al archivo sidebar.php y
justo antes de la funcin que habilita la zona de widgets en el sidebar, incluimos este cdigo:
1 <formmethod="get"id="searchform"action="<?phpbloginfo('url');?>/">
2 <inputtype="text"placeholder="Buscar"value="<?php
the_search_query();?>"name="s"id="s"/>
3 <buttontype="submit"class="icononly"id="searchsubmit"></button>
4 </form>
4 </form>
Con esto tenemos un campo de bsqueda en nuestra barra lateral. Para que se visualice como
queremos, simplemente har falta crear el cdigo CSS necesario.
Paso 9.Configurar la pgina que muestra la entrada

La pgina del post es aquella donde vamos a ver la entrada en cuestin. Vamos a poder definir
cmo se ve, incluir o no comentarios, etc.
El archivo single.php
02
04 <articleid="single">
05 <?phpif(have_posts()):?><?phpwhile(have_posts()):
the_post();?>
06
07 <h2><ahref="<?phpthe_permalink()?>"rel="bookmark"
title="Enlacepermanentea<?phpthe_title_attribute();?>"><?php
the_title();?>.</a></h2>
08 <small>Publicadopor<?phpthe_author_posts_link()?>el
<?phpthe_time('j/m/Y')?>.Categora:<?phpthe_category(',');?>
</small><br>
09
10 <divclass="post">
11
12 <?phpthe_content();?>
13
14 </div>
15
16
17 <?phpendwhile;?>
18
19 <?phpendif;?>
20
21 </article><!Findesingle>
22
25
Este cdigo es el mismo que utilizo en CreativaSfera, con lo que es fcil de entender con todo lo
que hemos explicado ya. Faltara aadir 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 funcin the_content()para que se muestre el contenido de la
entrada.
Mostrar las entradas relacionadas en single.php
Para mostrar las entradas relacionadas, aadiremos este cdigo justo despus de mostrar el
contenidos de la entrada:
01 <?php
02 $tags=wp_get_post_tags($post>ID);
03 if($tags){
04 $tag_ids=array();
05 foreach($tagsas$individual_tag)$tag_ids[]=$individual_tag
>term_id;
06 $args=array(
07 'tag__in'=>$tag_ids,
08 'post__not_in'=>array($post>ID),
09 'showposts'=>5,//Numberofrelatedpoststhatwillbeshown.
10 'caller_get_posts'=>1
11 );
12 $my_query=newwp_query($args);
13 if($my_query>have_posts()){
14 echo'<h3>Artculosrelacionados</h3><ul>';
15 while($my_query>have_posts()){
16 $my_query>the_post();
17 ?>
18 <li><ahref="<?phpthe_permalink()?>"rel="bookmark"
title="PermanentLinkto<?phpthe_title_attribute();?>"><?php
the_title();?></a></li>
19 <?php
20 }
21 echo'</ul>';
22 }
23 wp_reset_query();
24 }
25 ?>
Explicar este cdigo 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, aadiremos este cdigo a nuestro archivo
functions.php:
1 //Permitircomentariosencadenados
2 functionenable_threaded_comments(){
3 if(is_singular()ANDcomments_open()AND
(get_option('thread_comments')==1)){
4 wp_enqueue_script('commentreply');
5 }
6 }
7 add_action('get_header','enable_threaded_comments');
Y en single.php justo antes de la lnea que contiene el endwhile aadiremos:
1 <divclass="comentarios">
2 <?phpcomments_template();?>
3 </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:
01 .commentlistli{
02 liststyle:none!important;
03 }
04
05
06 .commentbody{
07 padding:15px;
08 }
09
10 .commentauthor{
11 margintop:5px;
12 }
13
14 .reply,.commentmetadata{
15 fontsize:0.9em;
16 }
17
18
19 .depth1,.depth2,.depth3,.depth4{
20 border:1pxsolid#eaeaea;
21 borderradius:4px;
22 }
23
24 .depth1,.depth3{
25 backgroundcolor:#fafafa;
26 }
27
28 .depth2,.depth4{
29 backgroundcolor:#fff;
30 }
31
32 .commentauthoreSandra{
33 border:3pxsolid#eaeaea;
34 borderleft:3pxsolid#fbc356;
35 }
36
37 .depth1{
38 margin:20px0;
39 }
40 /*Respuestaacomentarios*/
41
42
43 .depth2{
44 margin:2%5%!important;
45 }
46
47 .depth3{
48 margin:2%7%!important;
49 }
50
51
52 .depth4{
53 margin:2%5%4%10%!important;
54 }0
55 1
56 +
57 #comment,#author,#email{
58 borderradius:4px;
59 border:2pxsolid#ccc;
60 }
Con todo esto, ya tenemos la pgina 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 administracin
de WordPress cuando creemos o editemos una pgina, simplemente hemos de aadir en la
parte superior este cdigo:
1 <?php
2 /*TemplateName:Nombre_de_la_plantilla*/
3 ?>
A partir de aqu, le daremos el formato que queramos.
Paso 11: Pgina de categoras y etiquetas
Las pginas de category.php y etiquetas.php son prcticamente iguales. Simplemente

aadiremos antes del loop:
01 <?php$post=$posts[0];?>
02 <?phpif(is_category()){?>
03 <?php}elseif(is_tag()){?>
04 <h2>Etiqueta&amp;#8216;<?phpsingle_tag_title();?
>&amp;#8217;</h2>
05 <?php}elseif(is_day()){?>
06 <h2>Archivopara<?phpthe_time('FjSY');?>:</h2>
07 <?php}elseif(is_month()){?><h2>Archivopara<?phpthe_time('F,
Y');?>:</h2>
08 <?php}elseif(is_year()){?>
09 <h2>Archivopara<?phpthe_time('Y');?>:</h2>
10 <?php/}elseif(is_author()){?>
11 <h2>Archivodelautor</h2>
12 <?php}elseif(isset($_GET['paged'])&amp;&amp;
!empty($_GET['paged'])){?>
13 <h2>Archivosdelblog</h2>
14 <?php}?>
Haremos lo mismo si queremos crear una pgina con nuestros archivos.
Para acabar
En este artculo hemos visto cmo crear un tema de WordPress desde cero. Este tutorial tiene
una extensin de ms de 4000 palabras, con lo que debera ser suficiente para sentir que se
tiene una buena base para desarrollar un tema de WordPress desde cero. Se pueden aadir
otros archivos, como author.php para mostrar la pgina de autor, o404.php para crear nuestra
propia pgina de error, pero creo que con los conocimientos mostrados en este artculo no
debera haber ninguna dificultad para crearlos.
Si quieres profundizar un poco ms, 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 diseo web, te recomiendo el curso de diseo web desde cero con HTML5
y CSS3 as como el curso de diseo web responsive, con los que vas a aprender todo lo que
necesitas saber sobre diseo web a nivel profesional.
Te animo a compartir el artculo y a dejar un comentario.
Un abrazo!
Graciasporcompartir: 59 75 31
26/05/2013por Sandraen Tecnologa Web tutoriales wordpress
Artculos relacionados
WooCommerce: Cmo Validar un Pedido Automticamente
Cmo Hacer WordPress Privado Con y Sin Plugins
Cmo Crear Imgenes Responsive en WordPress
Cmo Hacer un Backup de WordPress
Tips para creacin de temas de WordPress #designIO
Comentarios
Javier Platn 26/05/2013

Buenas Sandra,
Impresionante el nivel de detalle, mil gracias por el esfuerzo, muy muy TIL
Gracias
Sandra 26/05/2013
Muchas gracias, Javier, la verdad es que he trabajado muchas horas en
este post, pero quera llenar el vaco que haba en los blogs en espaol
sobre la creacin de un tema de WordPress desde cero. Me alegro de
que te haya servido :-)
Jos A. Marco 27/05/2013

Hola Sandra, he ledo tu tutorial. Muy bueno, yo haba 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 08/06/2013
Gracias Jos, me alegro te haya servido :-)
Pablo Lpez 27/05/2013

Muy buena gua para iniciarse en el desarrollo de un tema de WordPress desde
cero. Lo que hubiera dado por tener este tutorial en su da!!
Enhorabuena
Sandra 27/05/2013
Gracias Pablo, yo tambin ech de menos una gua as cuando di mis
primeros pasos en WordPress, por eso me decid a crearla yo :-D
Luis Suarez 27/05/2013

Tena conocimientos de varios lenguajes de programacin 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 muchsimo ms fcil.
Sandra 27/05/2013
Gracias Luis, espero que la gua te sirva. Un saludo!
David 27/05/2013
Tan slo 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 27/05/2013
Muchas gracias David, te recomiendo descargar los archivos para
tenerlos de referencia si surge algn problema :-)
Pablo 27/05/2013
Muchas gracias! Lo he probado y los post se cargan correctamente. Mi duda es si
resultara muy complicado aadir la funcionalidad de cargar pginas, porque ahora

mismo cuando intento cargar una me salta a la pgina de inicio.
Muchas gracias de nuevo, un saludo!
Sandra 27/05/2013
Hola Pablo, a qu te refieres con cargar pginas?
Pablo 28/05/2013
A mostrar las pginas que creas con wordpress, con el cdigo
que pusiste en este tutorial se cargan los post, pero cuando
intento cargar una pgina 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 pginas lo hago desde el men de

administracin de wordpress, en pginas, aadir nueva.
Gracias.
Pablo 28/05/2013
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 28/05/2013
Ah fantstico, gracias por compartir, se me olvid
publicarlo :-)
Impulso Creativo Diseo Web 27/05/2013

Hola Sandra, muy bueno t artculo, 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
artculo tan bien explicado, saludos.
Sandra 27/05/2013
Hola, deseo que esta vez sea la definitiva y crees tu primer tema desde
cero :-)
Adhara Diseo Web 28/05/2013

Muchas Gracias estoy haciendo el traspaso de mi web comun a WordPress,
Me ayuda mucho saber como hacer una plantilla.
Gracias!
Sandra 28/05/2013
A ti por comentar :-)
vxd 28/05/2013
Buen tutorial para los que no tenemos ni idea de PHP,es asi y me lio un
montonqueria hacerte una pregunta, seria posible dar a cada categoria un
estilo diferente.con menus diferentes de la pagina principal?
Sandra 28/05/2013
Hola, s, deberas crear otro men y con el CSS darle otro estilo.
vxd 28/05/2013
Pero como doy estilos diferentes a cada categoria? tambien
incluiria las subcategorias?Es posible juntar dos themes para el
mismo dominio?
Javier Melenchn 30/05/2013

Sandra, slo quera 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 gestin de contenidos.
Sandra 30/05/2013
Muchas gracias, Javier, es el tema de la conferencia que voy a dar en el
Congreso Web de Zaragoza, as los participantes tendrn la gua por
escrito :-)
Juan Luis Romero 04/06/2013

Gracias Sandra por el tutorial, estoy comenzando en este mundillo del diseo web,
y francamente me ha parecido fantastico y bastante bien explicado. Gracias
tambien por el tutorial de Instalacin de WordPress, por fn 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 explicacin.
Sandra 11/06/2013
Hola Juan Luis, me alegro que te haya servido y motivado a crear tu
primer tema!
Antonio 05/06/2013
Muy buen tutorial Sandra, y yo comprando libritos de 400 pginas sobre
wordpress ;D
Sandra 08/06/2013
jajaja, qu buena Antonio :-D
Leonardo Romn 05/06/2013

Hola Sandra,
Excelente tu aporte, sin embargo me parece que es mucho ms fcil 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 sera muy bueno tener la oportunidad de
ver tu experiencia con joomla y poder comparar estos dos cms.
Un gran saludo!
Sandra 08/06/2013
No, yo prefiero WordPress y soy de la opinin que es mejor
especializarse que meterse en un montn de CMS..
Jose Antonio Vilar 06/06/2013

Muchas gracias! Buen tutorial!
Ani Mendez 06/06/2013

Yo s quiero poner 2 sidebars :( no se como hacer
Sandra 07/06/2013
Este es un tutorial bsico, imposible entrar en todos los detalles, es un
post no un libro, jeje.. fuera bromas si buscas en Google lo encuentras
fijo :-)
Jossue 06/06/2013
No puedo decir algo mejor que!!! Excelente =D
Sandra 07/06/2013
Muchas gracias, Jossue :-)
Danyel 09/06/2013
Muy buen contenido Sandra. Todo muy bien explicado y paso a paso. Ojal
hubiera tenido esta documentacin cuando empec con wordpress =D !
Sandra 11/06/2013
jajaja, bueno, seguro que los libros te explican cosas que aqu no vemos
:-)
Rafa 09/06/2013
Hola Sandra,
Me ha sido imposible asistir a tu taller impartido esta maana en el Congreso Web,
a pesar de habrmelo propuesto de antemano.
Intentar con este tutorial y algo de paciencia poner en marcha mi primer tema en
WordPress no ser fcil, pero seguro que son de mucha ayuda tus indicaciones.
Muchas gracias del novato.
Sandra 11/06/2013
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 10/06/2013
Muchas gracias por este gran trabajo, yo tambin llevaba tiempo buscando algo
as. Lastima no haber podido asistir a tu charla en el Congreso Web. Sabes si se va
a publicar el vdeo? Me puedes recomendar algn libro en Castellano de calidad
sobre desarrollo en WordPress? Has pensado en lanzarte y escribir uno?
Sandra 11/06/2013
No tengo ni idea del tema del vdeo, es algo que lleva la organizacin..
no conozco libros buenos en castellano sobre cmo 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 10/06/2013
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 11/06/2013
Para crear un tema sencillo no son necesarios conocimientos avanzados
de PHP, slo entenderlo y conocer las funciones de WordPress ms
importantes. A partir de aqu, para temas ms complejos s que hara
falta profundizar en PHP. Un saludo!
Bradis 10/06/2013
Hola Sandra excelente tutorial, vi tu hangout sobre wordpress y tambin 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 envirmelo.
Saludos desde Cuba.
Sandra 11/06/2013
Hola Bradis, aqu tienes muchos plugins para Sublime de WordPress:
http://speckyboy.com/2013/02/18/wordpress-extensions-for-sublime-
text-2/
un saludo,
Sandra
Antonio 11/06/2013
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 11/06/2013
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 12/06/2013
: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 cdigo de varios, Underscores, Bones tambin 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 ttulo de la entrada, por lo que
te encuentras en una sla pgina varios h1.
Como sabes, en HTML5 est permitida la repeticin de h1s, pero de cara al SEO
ser perjudicial? Sabes algo de esto o conoces algn artculo 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 gustara recomendaros muy til a la hora de
empezar a desarrollar themes es What The File, crea una opcin en la barra de
herramientas donde te muestra que archivos est usando la pgina que ests
viendo en ese momento (archivos, template-parts, etc).
Enhorauena de nuevo por el tutorial.

Un saludo
Antonio Campos 12/06/2013

Hola Sandra, el domingo estuve en tu taller sobre programacin de temas de
WordPress en el Congreso Web.
Te felicito, la exposicin fue muy clara para tratarse de un tema tan complicado de
explicar como es la progracin. Para mi fue muy provechoso porque me aclar
algunas dudas que tena sobre la creacin de temas para WordPress,
especialmente la creacin de una segunda zona de widgets y una segunda sidebar.
Tambin quera preguntarte sobre los consejos de seguridad que comentaste al

final del taller. No crees que este tipo de funciones no estaran mejor agrupadas
dentro de un plugin que puedieras importar a cualquier tema?
Gracias!!
Sandra 14/06/2013
En s ya existen plugins que lo hacen, pero en cualquier caso se trata de
un plugin y no de un tema.. ms todava, 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 18/06/2013
Hay una paso (10) que no consigo entenderlo podras explicarlo algo mejor ya
que no entiendo a que te refieres exactamente
gracias
Sandra 18/06/2013
Se trata de una plantilla que creas t diferente a la predeterminada.
Bruno 18/06/2013
Podras desarrollar un poco mas tu contestacin 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 18/06/2013
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 ingls y necesitas ayuda
personalizada, te animo a contratar clases online
conmigo.
Un saludo,
Sandra
Omaro 25/06/2013
Hola, me encanto tu pgina y tu tutorial, muchas gracias por este gran aporte.
Tengo una duda sobre el loop, es una pgina aparte?
Omaro 25/06/2013
Hola, tengo otra consulta. Esta ese cdigo en algn sitio para poder
observar los archivos para comprender mejor el tutorial.
Muchas gracias, saludos. :)
fran 09/07/2013
Buenas, necesito ayuda, por que me aparece que el tema esta daado, dice que
necesita la plantilla, es debido al tema de plantillas hijos y plantillas padres?,
gracias
Sandra 11/07/2013
Imposible de decir sin verlo..
Lester Fibla Saavedra 13/10/2013

Increble. 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 pequeos cambios.
El nico problema que tuve fue al intentar poner ms de un men personalizado.

Tu cdigo 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 pginas donde quera poner los men usaba:
principal ) ); ?>
secundario ) ); ?>
etc
Sandra 13/10/2013
Hola Lester, muchas gracias por tu aportacin! No haba cado en
explicarlo, gracias!
Paco 14/10/2013
Muy buen tutorial con mucho detalle, creo que suficiente para empezar mi primer
tema despues mucho tiempo intentandolo, Gracias.
Sandra 17/10/2013
Muchas gracias, Paco, suerte con tu tema :-)
Eduardo Cervera 18/10/2013

buen da Sandra, estoy creando un nuevo sitio en el que incluyo un blog, y tu
publicacin 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 aplicacin, a que se debe esta
falla? y como podemos arreglarlo, saludos.

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

jejeje ya vi cual es mi problema, no asignaba formato a los div
como enlace, problema resuelto :)
Sandra 22/10/2013
Me alegro lo hayas solucionado!
Steven 23/10/2013
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 ningn estilo a mi
pgina. Espero puedas ayudarme. Saludos.
Steven 23/10/2013
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 despus 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 tena diseado. Si a alguien le ha pasado algo
similar a mi caso, ah lo tienen.
Saludos y siga as, estar ms pendiente de su pgina.
Sandra 23/10/2013
Hola Steven, me alegro lo hayas solucionado, gracias por
compartir la manera en que lo has resuelto!
Steven 23/10/2013
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 solucin le puedo dar a esto? Gracias, otra vez.
Sandra 24/10/2013
Hola Steven,
dentro de contacto.php arriba del todo has de poner

esto dentro de las etiquetas de PHP:
/*Template Name: Contacto */
Despus creas la pgina de contacto y en donde pone

Atributos de pgina > Plantilla y seleccionas la plantilla
que se llama Contacto.
Ya me dices si lo solucionas :-)
Steven 24/10/2013
Grande, Sandra!!
Muchas gracias de verdad.
Christian 29/10/2013
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 07/11/2013
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 07/11/2013
Muchas gracias, Romualdo, intento que mi blog aporte el mximo valor
aadido :-)
un saludo!
Sandra
Ana 10/11/2013
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
navegacin se incluye en el header de forma genrica, cmo se pueden activar
esos diferentes estados segn la pgina en la que ests?
Ojal publiques algunos tips de cmo hacerlo en un futuro porque yo no

encuentro informacin sobre esto. Explicas muy bien todo. Gracias por tus
artculos.
Rommel 09/01/2014
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
Sandra 10/01/2014
Hola Rommel, lo mejor es el CODEX de WordPress:
http://codex.wordpress.org/
un saludo!
Sandra
David 09/06/2015
Un articulo increible y perfectamente explicado, soy diseador y programador php
que todava no me haba puesto con themes de wordpress y este articulo me ha
ayudado a entender todo el funcionamiento desde cero a la perfeccin 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 09/06/2015
De nada David, un placer haberte ayudado :-)
Jorge 10/06/2015
Buenos das, en primer lugar quera 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
dnde se debera de poner?
Gracias.
eSandra 10/06/2015
Hola Jorge,
si no sabes lo de copiar Modernizr y Respond en la carpeta JS, creo que

antes deberas aprender bien la parte de diseo web, porque esto es
muy bsico..
un abrazo,
Sandra
Jorge 10/06/2015
Disculpa si he ofendido con lo de copiar Modernizr y Respond, no era mi intencin.
Solo lo he comentado porque se supone que esto es un tutorial para aprender
desde cero y a modo de crtica constructiva.
Sobre diseo web tengo ya conocimientos bsicos previos y no conoca ni
Modernizr ni Respond, as que tan bsico desde luego que no lo es.
Disculpa otra vez, actualizar mis conocimientos antes de volver a visitar tus
tutoriales de formacin.
Un abrazo.
eSandra 10/06/2015
Hola Jorge,
para nada has ofendido, perdona si te he transmitido eso, por escrito se

pierde el tono, no era mi intencin hacerte sentir mal. No era porque no
supieras que eran, haba entendido que el problema era que no sabas
cmo guardarlos en la carpeta de JS, un mal entendido.
Modernizr bsicamente sirve para que un navegador antiguo que no

conoce las etiquetas de HTML5 las entienda, tiene otras funcionalidades
pero bsicamente es esto, igual que HTML5Shiv. Respond es un
pequeo archivo JavaScript que lo que hace es que Internet Explorer
entienda los media queries de CSS3 necesarios para diseo web
responsive.
Puedes preguntar cualquier duda que tengas, es slo que en tu

comentario ponas que lo que no sabas hacer es poner la copia de
Modernizr y Respond en la carpeta js, no que no sabas que eran estos
archivos, de aqu mi respuesta. Saber colocar los archivos de JS es algo
que se ensea en un curso bsico de diseo web, por eso
Un abrazo,
Sandra
sin h 11/06/2015
Hola,
Quiero crear mi propio tema de WP. Conozco html y css pero php no. Bsicamente
quiero un tema responsive, multicolumna, sticky nav, Y como no encuentro uno
free, pues me gustara saber si me voy a meter en un berenjenal demasiado gordo
o ser capaz de hacerlo.
Gracis
eSandra 12/06/2015
Hola,
es difcil 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 slo una introduccin,
pero hay ms.. ya te digo, depende de tu nivel de conocimientos..
un abrazo,
Sandra
Abel Pomares 12/06/2015

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 12/06/2015
Lo has de copiar donde quieras que aparezca, normalmente en
index.php
marco 21/06/2015
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 22/06/2015
Es fcil, Marco, creas la web en Bootstrap y le aades las funciones de
WordPress..
un abrazo!
Sandra
Karen 25/06/2015
Excelente artculo ! Era justo lo que buscaba, porque en todos lados explican cosas
sueltas y no lograba entender el paso a paso, pero ac en este artculo lo explica
todo muy bien para empezar desde cero hasta el final. Gracias !!
eSandra 28/06/2015
De nada, Karen, me alegro te haya ayudado.
Guille 26/06/2015
Hola,
Esta disponible en algn sitio para descargar el proyecto completo de este post?
Me ayudara bastante para verlo ya estructurado, etc.
Gracias
eSandra 28/06/2015
Hola Guille, no est disponible para su descarga, pero as puedes
hacerlo t mismo paso a paso.
Buenas Sandra 29/06/2015

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 30/06/2015
El loop lo pones donde quieras que aparezcan las entradas de blog.
Normalmente aparece en index.php. pero depende de cmo crees tu
tema.
Edgar Vanegas 05/07/2015

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 programacin.
saludos y exitos en su vida.
eSandra 06/07/2015
Un placer, Edgar. Un abrazo!
Eva 17/07/2015
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 cmo ver mi tema desde el Administrador de
WordPress, es decir, cuando desde el escritorio entras en Apariencia y luego
Temas, aqu deberamos ver nuestro nuevo tema, no?
Gracias,
Saludos,
Eva
eSandra 19/07/2015
Si lo has instalado debera aparecer aqu, otra cosa es que no est bien
instalado..
2016 eSandra | Aviso Legal y Poltica de Privacidad

Aprende A Crear Un Tema de WordPress Desde Cero

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aprende A Crear Un Tema de WordPress Desde Cero

Uploaded by

Copyright:

Available Formats

12/1/2016 AprendeacrearuntemadeWordPressdesdeceroeSandra

Tecnologa y Coaching para Emprendedores

CursosOnline Blog Contacto Iniciar Sesin Registro

Curso de Diseo Web

Taller impartido en el Congreso Web 2013[/caption]

Cmo crear un tema de WordPress desde cero

Suponiendo pues que tenemos WordPress instalado y en correcto funcionamiento, lo primero

Diapositivas del Congreso Web

Hangout con el equipo de desarrolloweb.com

Tips para creacin de plantillas de Wordpress #designIO

Archivos de un tema de WordPress

/images. Carpeta con las imgenes del tema.

/js. Carpeta con los archivos de JavaScript

screenshot.png. Muestra la imagen en miniatura que se ver en el panel de adminsitracin

favicon.ico. La imagen que se ver en el navegador y al guardar el marcador.

header.php. Mdulo que contiene la cabecera del tema.

footer.php. Mdulo que contiene el pie de pgina del tema.

single.php. Este archivo indica cmo se ve una entrada de blog.

category.php. Muestra cmo se ve la pgina de resultados de una categora.

tag.php. Muestra cmo se ve la pgina de resultados de una etiqueta.

search.php. Muestra cmo se ve la pgina de resultados de bsqueda.

template.php. Plantilla de pgina que a ttulo de ejemplo llamaremostemplate.

functions.php. Archivo con las funciones de nuestro tema de WordPress.

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

En mi caso en descripcin aparece Todos los derechos reservados ya que es un tema

A conitnuacin, si vamos a utilizar HTML5, es conveniente insertar normalize.css. Lo podemos

A partir de aqu, podemos ya crear nuestro propio cdigo de CSS.

Paso 2: Imgenes y JavaScript

Paso 3: creamos la cabecera del tema

En el caso de estar diseando un tema responsive, especificaremos el viewport. Para mostrar la

Otro modo de acceder a mitema ser:

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

Insertar el men de navegacin

Fjate que en la etiqueta header hemos escrito esta lnea:

A partir de aqu, simplemente habremos de ir a Apariencia>Mens y crear nuestro men y

Paso 4: creamos la barra lateral

Paso 5: creamos el footer

de inicio, en este caso index.php, se muestre correctamente.

En el caso dewp_footer va a ser adems necesaria si queremos ver la barra de administracin

Paso 6: creamos la pgina principal

Fjate en estas tres funciones:

Paso 6. El loop de WordPress

A continuacin te muestro el cdigo del loop que utilizo aqu en CreativaSfera:

Vayamos paso a paso. En la primera lnea tenemos:

As pues, ahora mostraremos el ttulo de la entrada con una enlace a la misma:

La funcin the_permalink() se encarga de encontrar el enlace permanente a la entrada, para que

La funcin the_time() muestra la fecha de publicacin y en el parntesis podemos definir el

Si queremos mostrar las etiquetas, lo haremos con la funcin the_tags(), y si lo quisiramos

Seguidamente, con la funcin the_excerpt() mostraremos el resumen de la entrada. Si no hemos

Para cerrar el loop, llamamos este cdigo:

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

Paso 7. Aadir thumbnails al loop

Fjate que hemos aadido:

if(has_post_thumbnail())significa que compruebe si la entrada en cuestin tiene una imagen

Paso 8. Crear un campo de bsqueda

Vimos ya cmo crear un campo de bsqueda en WordPress. Lo vamos a adaptar ahora a

Paso 9.Configurar la pgina que muestra la entrada

Mostrar las entradas relacionadas en single.php

Habilitar y mostrar los comentarios

Y en single.php justo antes de la lnea que contiene el endwhile aadiremos:

Con todo esto, ya tenemos la pgina de la entrada como la de CreativaSfera.

Paso 10. Crear una nueva plantilla

/Template Name: Contacto /