19th Ave New York, NY 95822, USA
+1 916-875-2235
+1 916-875-2235

Como crear un theme de Wordpress desde 0

En este post aprenderás a crear un theme de WordPress desde 0. Para ello, damos por supuesto que tienes conocimientos de HTML, CSS, PHP y algunos más básicos de WordPress, al menos cómo instalarlo y gestionarlo.

Crear un theme de WordPress no es complicado, pero explicarlo lleva algo de tiempo, por eso en vez de crear un super post, vamos a crear varios y en cada uno explicaremos una parte.

Si por el contrario, ya has creado tu theme y sólo buscas un manual de WordPress, puedes ojear el nuestro.

 

Tabla de contenidos:

#0 Dónde comprar un theme de WordPress
#1 Documentación técnica
#2 Archivos de un theme de WordPress
#3 El loop

Bonus:

#4 Breadcrumbs
#5 Recomendaciones de seguridad
#5 Plugins básicos [Proximamente]
#6 Vistas personalizadas [Proximamente]
#7 Algunas funciones de seguridad [Proximamente]
#8 Uso del plugin Types [Proximamente]

 

Archivos para tu theme de WordPress

 

Después de seguir todos estos pasos y recomendaciones, serás capaz de crear un theme de WordPress desde cero. Además, se debe tener en cuenta que antes de todos estos pasos, lo ideal es tener un diseño definido. También preparar los estilos para que tu nuevo theme sea Responsive.

0 Dónde comprar un theme de WordPress

Existen muchas webs donde comprar un theme de WordPress de calidad, pero si prefieres no gastarte un € en este aspecto también dispones de opciones gratuitas. La pega es que nunca sabes si contienen código malicioso (a no ser que lo revises, fichero a fichero), además de que no suelen contar con soporte técnico ni casi documentación.

Si lo que buscas es algo 100% adaptado a tus necesidades, la mejor opción es pagar a un diseñador y un programador para que creen un theme de WordPress a tu medida. Es la opción más cara, pero normalmente la que mejor funciona.

Y la tercera opción, que es comprar un theme. Hay muchos lugares en internet dónde comprarlo, aquí os listamos algunos de ellos:

1. ThemeForest

themeforest

2. Cyberchimps

cyberchimps

3. Elegant themes

elegantthemes

4. Wpzoom

wpzoom

Estas son sólo algunas de las más famosas. La lista puede aumentar con el paso del tiempo. El siguiente paso es conocer dónde está la documentación básica para crear o modificar un theme de WordPress.

1 Documentación técnica

El mejor lugar dónde buscar información sobre WordPress es en el codex.wordpress.org. Ahí puedes encontrar información de todo lo relacionado con WordPress. Lo que ahora queremos buscar es documentaciñon relacionada con los themes:

Página principal: http://codex.wordpress.org/Theme_Development
Sobre su estructura:  http://codex.wordpress.org/Theme_Development#Anatomy_of_a_Theme
Sobre sus ficheros: http://codex.wordpress.org/Theme_Development#Template_Files
Sobre header.php: http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29
Sobre menús: http://codex.wordpress.org/Theme_Development#Navigation_Menus_.28header.php.29
Sobre sidebar.php: http://codex.wordpress.org/Theme_Development#Widgets_.28sidebar.php.29
Sobre footer.php: http://codex.wordpress.org/Theme_Development#Footer_.28footer.php.29
Sobre index.php: http://codex.wordpress.org/Theme_Development#Index_.28index.php.29
Sobre archive.php: http://codex.wordpress.org/Theme_Development#Archive_.28archive.php.29
Sobre page.php: http://codex.wordpress.org/Theme_Development#Pages_.28page.php.29
Sobre single.php: http://codex.wordpress.org/Theme_Development#Single_Post_.28single.php.29
Sobre comments.php: http://codex.wordpress.org/Theme_Development#Comments_.28comments.php.29
Sobre search.php: http://codex.wordpress.org/Theme_Development#Search_Results_.28search.php.29

Si vas a la principal, tendrás un listado con todos los contenidos. Ya ves que toda la documentación está en inglés, pero aún no dominando el idioma, es fácil de seguir y entender.

 

Crear theme de WordPress desde cero

2 Archivos de un theme de WordPress

En tu instalación de WordPress se crea un directorio llamado wp-content y dentro de el otro llamado themes. En themes es donde se guardan las carpetas de cada theme, y es ahí donde vamos a crear un directorio con el nombre de nuestro nuevo theme.

Un theme de WordPress sólo necesita dos archivos para funcionar, el style.css y el index.php. Con estos dos archivos ya funcionaría, pero vamos a crear un theme, que aunque sencillo, nos permitirá personalizarlo mucho más.

Archivos que vamos a crear:

Archivo Descripción Código
style.css Hoja de estilos de nuestro tema Ver
index.php Es la página principal por defecto Ver
functions.php Archivo en el que guardaremos nuestras funciones Ver
404.php La página de error a la que nos redirigirá si no existe lo que buscamos Ver
sidebar.php Será la barra lateral Ver
single.php La vista de cada entrada del blog Ver
page.php La vista de cada página del blog Ver
search.php La vista de resultados cuando realizamos una búsqueda Ver
category.php La vista del listado de posts de una categoría  Ver
tag.php La vista del listado de posts de un tag  Ver
header.php Código para la cabecera de nuestro blog  Ver
footer.php Código para el pié de página de nuestro blog  Ver
vista1.php Una vista específica para nuestras páginas  Ver
/img Directorio para guardar imágenes
/js Directorio para guardar archivos javascripts
screenshot.png Imagen que mostrará WordPress para mostrar nuestro tema
favicon.ico Nuestro favicon

Opcionalmente podemos crear más archivos, como otros templates/vistas, pero ahora vamos a trabajar con estos archivos y directorios. En el apartado Ver  de cada fichero encontraréis el código de ese archivo y una explicación de lo que hace. Es altamente personalizable, tanto con HTML y CSS como con PHP.

3 El loop

Descripción:

El Loop de WordPress es donde reside todo el potencial de este CMS. Es un bucle, que nos muestra todas las entradas, post, páginas u otros tipos que creemos, y que además nos permite filtrarlas.

Código:

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

    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
   <small>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author_posts_link() ? </small>
    <?php the_excerpt(); ?>
<?php endwhile; else: ?>
   <p><?php _e('No hay entradas .'); ?></p>
<?php endif; ?>

4 Breadcrumbs

Descripción:

Es una pequeña función que podemos añadir a functions.php para poder mostrar la ruta o el camino de migas de pan en nuestro theme.

Código:

//Migas de pan
function breadcrumbs(){
 $sep = " &gt; ";
 $home_breadcrumb = '<a href="'.get_bloginfo('url').'" title="'.esc_attr(__('Go to main page','theme')).'">'."Inicio".'</a>';
 $search_breadcrumb = '';
 $single_breadcrumbs = '';
 $cat_breadcrumbs = '';
 
 if (is_search()){
 $search_breadcrumb .= $sep.'<span>'.__('Search on site','theme').'</span>';
 $search_breadcrumb .= $sep.'<span>'.get_query_var('s').'</span>';
 }elseif (is_home() || is_front_page()){
 // nada más
 }elseif (is_singular()){
 global $post;
 $post_ancestors = get_post_ancestors($post);
 if ($post_ancestors) {
 $post_ancestors = array_reverse($post_ancestors);
 $post_ancestors[] = $post;
 foreach ($post_ancestors as $p){
 $single_breadcrumbs .= $sep.'<a href="'.get_permalink($p).'" title="'.esc_attr(sprintf(__('Go to page %s','theme'),get_the_title($p))).'">'.get_the_title($p).'</a>';
 }
 }
 if (is_single() && has_category()){
 $post_cats = wp_get_post_categories($post->ID);
 if (!empty($_SESSION['last_cat']) && in_array($_SESSION['last_cat'],$post_cats)){
 $cat_id = $_SESSION['last_cat'];
 }else{
 $cat_id = is_array($post_cats) && count($post_cats) ? $post_cats[0] : false;
 }
 }
 }
 
 if (is_category()){
 $cat_id = (int)get_query_var('cat');
 $_SESSION['last_cat'] = $cat_id;
 }
 
 while ($cat_id){
 $cat = get_category($cat_id);
 $cat_breadcrumbs = $sep.'<a href="'.esc_url(get_category_link($cat_id)).'">'.$cat->name.'</a>'
 .$cat_breadcrumbs;
 if ($cat->parent){
 $cat_id = (int)$cat->parent;
 }else{
 $cat_id = false;
 }
 }
 
 return $home_breadcrumb.$cat_breadcrumbs.$single_breadcrumbs.$search_breadcrumb;
}

Después de añadir esto en functions.php, para mostralo bastará con añadir el siguiente código donde queramos.

<?php echo breadcrumbs(); ?>

Código de cada archivo del theme

style.css


Descripción:

En el archivo style.css de nuestro theme de WordPress es dónde se guardarán los estilos. Es necesario comenzar este archivo con las siguientes líneas, ya que WordPress leerá esta información y la utilizará en el listado de themes.

Código:

/*
Theme Name: motorland
Theme URI: http://www.motorland.com
Description: Blog de motorland. 
Author: Tu nombre
Author URI: http://tuwebpersonal.com
Version: 1.0
*/

index.php


Descripción:

En el archivo index.php de nuestro theme de WordPress es dónde se encuentran los contenidos de la página principal. Éstos pueden ser estáticos o dinámicos. Las funciones get_header, get_sidebar y get_footer lo que hacen es cargar el contenido de los archivos header.php, sidebar.php y footer.php. Si en la página principal no quieres mostrar el sidebar, basta con que elimines esa línea.

Código:

<?php get_header(); ?>
<div id="main"></div>
<?php  get_sidebar()?>
<?php get_footer(); ?>

functions.php


Descripción:

En el archivo functions.php de nuestro theme de WordPress es dónde se guardan las funciones para que nuestro theme funcione correctamente, y además, podamos añadir nuevas funcionalidades. A continuación el código de alguna de ellas.

Código:

<?php
//Menú
add_theme_support( 'nav-menu' );
if ( function_exists( 'register_nav_menu' ) ) {
    register_nav_menu(
        array(
          'main' => 'Main'
        )
    );
}

//Sidebar
if(function_exists('register_sidebar'))
    register_sidebar(array(
    'name' => 'Barra lateral',
    'before_title' => '<h4>',
    'after_title' => '</h4>',
));

//Habilitar thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(160, 160, true);

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

?>

404.php


Descripción:

En el archivo 404.php de nuestro theme de WordPress es la página que se mostrará en caso de que no exista la página que busca el visitante. Más info

Código:

<?php get_header(); ?>
<div id="main">
<h1>Error 404</h1>
<p>La página que está buscando no existe, si lo desea, póngase en contacto con nosotros.</p>
<!--Mostrar formulario de contacto -->
</div>
<?php  get_sidebar()?>
<?php get_footer(); ?>

sidebar.php


Descripción:

En el archivo sidebar.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la barra lateral. En muchos casos, quizás prefiramos no mostrarla. Para que esto funcione, es necesario añadir la función en functions.php

Código:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Barra lateral') ) : ?>
<?php endif; ?>
</div>

single.php


Descripción:

En el archivo single.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de los contenidos o posts.

Código:

<?php get_header(); ?>

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

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

      		<div class="post">

      		   <?php the_content(); ?>

	      </div>

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

<?php endif; ?>
</article>
</div>
<?php get_sidebar()?>
<?php get_footer(); ?>

page.php


Descripción:

En el archivo page.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las páginas que creas.

Código:

<?php get_header(); ?>

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

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

      		<div class="post">

      		   <?php the_content(); ?>

	      </div>
 <?php endwhile; ?>
<?php endif; ?>
</article>
</div>
<?php get_sidebar()?>
<?php get_footer(); ?>

Descripción:

En el archivo search.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las consultas realizadas en nuestro formulario.

Código:

<?php get_header(); ?>

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

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

 <?php endwhile; ?>
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>
<?php  else: ?>
<div class="entry"><?php _e('Sin resultados.'); ?></div>
<?php endif; ?>

</div>

<?php  get_sidebar()?>

<?php get_footer(); ?>

category.php


Descripción:

En el archivo category.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las categorías.

Código:

<?php get_header(); ?>
$args = array(
 'orderby' => 'id',
 'hide_empty'=> 0,
 );
 $categories = get_categories($args);
 foreach ($categories as $cat) {

 $titulo=$cat->name;
 if($cat->term_id!=1){
 echo '<a href="'.get_category_link($cat).'" title="'. $this_category->cat_name.'">';
 echo '<h3>'.$titulo.'</h3>';
 echo '</a>';
 }
 }
<?php get_sidebar()?>
<?php get_footer(); ?>

tag.php


Descripción:

En el archivo tag.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las tag o etiquetas. El código es el mismo que en category.php

Código:

<?php get_header(); ?>
$args = array(
 'orderby' => 'id',
 'hide_empty'=> 0,
 );
 $categories = get_categories($args);
 foreach ($categories as $cat) {

 $titulo=$cat->name;
 if($cat->term_id!=1){
 echo '<a href="'.get_category_link($cat).'" title="'. $this_category->cat_name.'">';
 echo '<h3>'.$titulo.'</h3>';
 echo '</a>';
 }
 }
<?php get_sidebar()?>
<?php get_footer(); ?>

header.php


Descripción:

En el archivo header.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la cabecera o header. Utilizamos varias funciones para mostrar el título y otras configuraciones. Tambien mostramos el menú de forma dinámica gracias a la función que añadimos a nuestro functions.php

Código:

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

<head>
	<meta charset=	<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
	<link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
	<?php wp_head(); ?>

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

Descripción:

En el archivo footer.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo al pié o footer.

Código:

<footer>
	<p>&amp;amp;amp;copy; <?php bloginfo('name'); ?>, <?=date('Y');?>. Theme: motorland.</p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

vista1.php


Descripción:

En el archivo vista1.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a una nueva vistaque hemos creado. El nombre es uno al azar, y podemos crear tantas vistas como necesitemos.

Código:

<?php
/*Template Name: vista1*/
?>
<?php get_header(); ?>

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

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

      		<div class="post">

      		   <?php the_content(); ?>

	      </div>
 <?php endwhile; ?>
<?php endif; ?>
</article>
</div>
<?php get_sidebar()?>
<?php get_footer(); ?>

En este manual te hemos explicado la forma de crear tú mismo un theme de WordPress a medida, desde cero. Si aún así crees que no estás capacitado o no tienes el tiempo suficiente, puedes ponerte en contacto con nosotros y lo crearemos por tí.