WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

es:Theme Development

El siguiente articulo trata acerca de desarrollar o diseñar tu propio Tema para WordPress. Si deseas aprender mas de como instalar y usar Temas, por favor revisar la documentación en Using Themes. Este articulo es diferente ya que expone los aspectos técnicos de como escribir código para construir un Tema comparada a como activar y obtener Temas nuevos.

Puedes crear Temas para WordPress para tu propio uso o para distribución

El porqué de los Temas

Los Temas (o plantillas) son archivos y estilos que funcionan en conjunto para crear la presentación de un sitio en WordPress. Cada Tema puede ser diferente, ofreciendo opciones para mejorar la experiencia de los usuarios o para cambiar de forma instantánea el aspecto visual del sitio. He aquí algunas razones para crear tu propio tema:

  • Crear un look único para tu sitio WordPress.
  • Aprovechar las plantillas, etiquetas de plantilla, y El Loop de WordPress para generar diferentes diseños del sitio.
  • Proveer plantillas alternativas para características especificas, tales como paginas de categorías o páginas de resultados de búsqueda.
  • Permitir a los usuarios del sitio cambiar la plantilla a su gusto mediante un Plugins.
  • Diseñar Temas para distribución publica y/o comercial.

Un Tema de WordPress también cuenta con beneficios:

  • Separa los estilos de presentación y los archivos de plantilla del sistema, permitiendo al sitio actualizar a versiones nuevas de WordPress sin cambios drásticos en la presentación visual.
  • Permite la personalización de la presentación, convirtiéndola en algo único.
  • Permite cambios rápidos a la estructura y presentación del sitio.
  • Permite que el usuario final no necesite aprender CSS, HTML y PHP para tener un sitio agradable a la vista.

¿Por qué construir tu propio Tema en WordPress?, esa es la pregunta:

  • Es una oportunidad para aprender mas de CSS, HTML/HTML y PHP.
  • Te permite ejercitar tus habilidades en estos lenguajes.
  • Es creativo.
  • Es divertido (generalmente...).
  • Si creas un tema para distribución pública te permite contribuir a la comunidad. O sea, derecho a presumir :D

Anatomía de un Tema

Los Temas se ubican en sub directorios que, a su vez, se encuentran bajo el directorio wp-content/themes. El sub directorio del tema contiene las hojas de estilo, los archivos de plantilla y un archivo opcional de funciones (functions.php) e imágenes. Por ejemplo, un Tema llamado "prueba" se ubicaría en el directorio wp-content/themes/prueba/.

La descarga de Wordpress incluye dos Temas de serie, son los Temas "Classic" y "Default". Ambos Temas son diferentes y usan, asimismo, diferentes funciones y etiquetas XHTML para producir sus resultados, estructuras y diseños. Examina cuidadosamente los archivos que conforman estos Temas para obtener una mejor idea sobre cómo crear el tuyo propio.

Wordpress se basa en tres tipos principales de archivos además de las imágenes. Uno es la Hoja de Estilos denominada style.css que controla la presentación (el estilo) de las páginas web. El segundo es el archivo opcional de funciones (functions.php) que funciona como uno, o una serie, de plugins para el Tema. El resto de archivos son los archivos de plantilla que controlan la forma en que se genera la información, obtenida de la Base de Datos, para mostrarla como una página web. Veamos estos archivos uno por uno:

Temas: hojas de estilo

Además de la información de estilo CSS para su theme, la hoja de estilo, style.css debe proveer detalles acerca del theme en forma de comentarios. No esta permitido que dos theme contengan los mismos detalles que figuran en sus cabeceras comentario, ya que esto dará lugar a problemas en el Theme selection dialog. Si creas tu propio theme de la copia de otro existente, asegúrese de cambiar esta información primero.

El siguiente es un ejemplo de las primeras líneas de la hoja de estilo, llamado el encabezado de la hoja de estilo, para el theme "Rose":

/*   
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.
*/

Theme simple que incluye solo una style.css de archivo, además de las imágenes, si las hubiere. Para crear este tipo de theme, debe especificar un set de plantillas para heredar para su complementación con el theme de edición de laPlantilla: linea en la cabecera de comentarios de style.css. Por ejemplo, si busca el theme "Rosse" para ederar la plantilla para otro theme llamado "test", debes incluir Template: test en los comentarios al principio de Rose style.css. Ahora "test" es el theme principal para "Rose", que se compone sólo de un documento style.css y las imágenes asociadas, todos ubicados en el directoriowp-content/themes/Rose. (Nota esto especifica que el theme principal heredará todo de los archivos de la plantilla de este theme — significa que todo los archivos en el directorio secundario del theme hijo seran ignorados.)

Las lineas de comentarios en style.css necesarios para WordPress para ser capaces de identificar un theme y mostrarlo en Administration Panel debajo de Design > Themes como una opción theme disponibles junto con cualquier otro theme instalado.

Nota : Cuando definimos el theme padre, en la Template: la sección de la cabecera de un comentario, debe utilizar el nombre de la guía del estilo. Por ejemplo, para utilizar como plantilla padre el theme de Wordpress por defecto, no escriba Template: WordPress Default, para Template: default, porque es el directorio por defecto para este theme.

Traducciónes : Theme = Tema

Archivo de Funciones: functions.php

Un Theme puede usar opcionalmente el archivo functions, que se encuentra en el subdirectorio del theme, cuyo nombre es functions.php. Este archivo básicamente actúa como un plugin, y si esta presente en el thema que esta usando, es cargado automáticamente durante la inicializacion de WordPress (tanto para páginas de administración y las páginas externas). Recomendamos usar este archivo para:

  • Definir las funciones utilizadas en varios archivos de plantilla de su tema de
  • Establecimiento de una pantalla de administración, dando a los usuarios las opciones de colores, estilos, y otros aspectos de su tema

El theme que viene por "Default" en WordPress contiene un archivo functions.php que define las funciones y una pantalla de administración, lo que podría querer usarlo como modelo. Desde functions.php básicamente funciona como un plug-in, la Function_Reference lista es el mejor lugar para obtener más información sobre lo que puedes hacer con este archivo.

Theme Template Files

Templates are PHP source files used to generate the pages requested by visitors. Let's look at the various templates that can be defined as part of a Theme.

WordPress allows you to define separate templates for the various aspects of your weblog; however, it is not essential to have all these different template files for your blog to function fully. Templates are chosen and generated based upon the Template Hierarchy, depending upon what templates are available in a particular Theme. As a Theme developer, you can choose the amount of customization you want to implement using templates. For example, as an extreme case, you can use only one template file, called index.php as the template for all pages generated and displayed by the weblog. A more common use is to have different template files generate different results, to allow maximum customization.

Basic Templates

At the very minimum, a WordPress Theme consists of two files:

  • style.css
  • index.php

Both of these files go into the Theme's directory. The index.php template file is very flexible. It can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error, and other web pages generated by the user on your site. Or it can be subdivided into modular template files, each one taking on part of the workload. If you do not provide any other template files, WordPress will use the built-in default files. For example, if you do not have either a comments.php or comments-popup.php template file, then WordPress will automatically use the wp-comments.php and wp-comments-popup.php template files using Template Hierarchy. These default templates may not match your Theme very well, so you probably will want to provide your own. The basic files normally used to subdivide (which go into the Theme's directory) are:

  • header.php
  • sidebar.php
  • footer.php
  • comments.php
  • comments-popup.php

Using these modular template files, you can put template tags within the index.php master file to include or get these units where you want them to appear in the final generated web page.

Here is an example of the include usage:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

For more on how these various Templates work and how to generate different information within them, read the Templates documentation.

Query-based Templates

WordPress can load different Templates for different query types. There are two ways to do this: as part of the built-in Template Hierarchy, and through the use of Conditional Tags within The Loop of a template file.

To use the Template Hierarchy, you basically need to provide special-purpose Template files, which will automatically be used to override index.php. For instance, if your Theme provides a template called category.php and a category is being queried, category.php will be loaded instead of index.php. If category.php is not present, index.php is used as usual.

You can get even more specific in the Template Hierarchy by providing a file called, for instance, category-6.php -- this file will be used rather than category.php when generating the page for the category whose ID number is 6. (You can find category ID numbers in Manage > Categories if you are logged in as the site administrator in WordPress version 2.3 and below. In WordPress 2.5 the ID column was removed from the Admin panels. You can locate the category id by clicking 'Edit Category' and looking on the URL address bar for the cat_ID value. It will look '...categories.php?action=edit&cat_ID=3' where '3' is the category id). For a more detailed look at how this process works, see Category Templates.

If your Theme needs to have even more control over which Template files are used than what is provided in the Template Hierarchy, you can use Conditional Tags. The Conditional Tag basically checks to see if some particular condition is true, within the WordPress Loop, and then you can load a particular template, or put some particular text on the screen, based on that condition.

For example, to generate a distinctive style sheet in a post only found within a specific category, the code might look like this:

<?php
if (is_category(9)) {
   // looking for category 9 posts
   include(TEMPLATEPATH . '/single2.php');
} else {
   // put this on every other category post
   include(TEMPLATEPATH . '/single1.php');
}
?>

Or, using a query, it might look like this:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
   include(TEMPLATEPATH . '/single2.php');
} else {
   include(TEMPLATEPATH . '/single1.php');
}
?>

In either case, this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories, however -- see the Conditional Tags article to look at all the options.

Media Icons

This feature is currently broken in WordPress 2.5.

Wordpress uses media icons to represent attachment files on your blog and in the Admin interface, if those icons are available.

It looks for image files named by media type in the images directory of the current theme. (As of Wordpress 2.2, the default theme comes with only one media icon, audio.jpg.)

For example, for an attachment of MIME type audio/mpeg, Wordpress would look for an icon file at these locations, stopping after the first match (see wp_mime_type_icon):

  1. my_theme/images/audio.jpg
  2. my_theme/images/audio.gif
  3. my_theme/images/audio.png
  4. my_theme/images/mpeg.jpg
  5. my_theme/images/mpeg.gif
  6. my_theme/images/mpeg.png
  7. my_theme/images/audio_mpeg.jpg
  8. my_theme/images/audio_mpeg.gif
  9. my_theme/images/audio_mpeg.png

Theme Template Files List

Here is the list of Theme template files recognized by WordPress. Of course, your Theme can contain any other style sheets, images, or files. Just keep in mind that the following have special meaning to WordPress -- see Template Hierarchy for more information.

style.css
The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.
index.php
The main template. If your Theme provides its own templates, index.php must be present.
comments.php
The comments template. If not present, comments.php from the "default" Theme is used.
comments-popup.php
The popup comments template. If not present, comments-popup.php from the "default" Theme is used.
home.php
The home page template.
single.php
The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
page.php
The page template. Used when an individual Page is queried.
category.php
The category template. Used when a category is queried.
author.php
The author template. Used when an author is queried.
date.php
The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
archive.php
The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
search.php
The search results template. Used when a search is performed.
404.php
The 404 Not Found template. Used when WordPress cannot find a post or page that matches the query.

These files have a special meaning with regard to WordPress because they are used as a replacement for index.php, when available, according to the Template Hierarchy, and when the corresponding Conditional Tag (a.k.a is_*(); function) returns true. For example, if only a single post is being displayed, the is_single() function returns 'true', and, if there is a single.php file in the active Theme, that template is used to generate the page.

Referencing Files From a Template

The WordPress Default Theme (based on Michael Heilemann's Kubrick layout for WordPress 1.2) provides a good example of how queries are mapped onto templates.

The code <?php bloginfo('template_directory'); ?> inserts the URL of the template directory into the template output. You can append any additional URI information to this output to reference files in your Theme.

The code <?php bloginfo('stylesheet_directory'); ?> inserts the URL of the directory that contains the current Theme stylesheet into the template output. You can append any additional URI information to this output to reference files for your Theme, specifically those that are used by the stylesheet.

The constant TEMPLATEPATH is a reference to the absolute path to the template directory for the current Theme (without the / at the end).

Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. This obviates the need to include PHP code in the CSS file to specify directories. For example, if you include an images/ directory in your Theme, you need only specify this relative directory in the CSS, like so:

h1 { background-image: URL(images/my_background.jpg); }

It is a good practice to use URIs in the manner described above to reference files from within a template, since, then your template will not depend on absolute paths.

Defining Custom Templates

It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the template_redirect action hook. More information about creating plugins can be found in the Plugin API reference.

Plugin API Hooks

When developing Themes, it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins you (or another Theme user) might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see Plugin API for more information). Most Action Hooks are within the core PHP code of WordPress, so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme, in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Here is a list of the special Action Hook Template Tags you need to include:

wp_head
Goes in the HTML <head> element of a theme; header.php template. Example plugin use: add javascript code.
Usage: <?php do_action('wp_head'); ?>
-or-  <?php wp_head(); ?>
wp_footer
Goes in the "footer" of a theme; footer.php template. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer.
Usage: <?php do_action('wp_footer'); ?>
-or-  <?php wp_footer(); ?>
wp_meta
Typically goes in the <li>Meta</li> section of a theme's menu or sidebar; sidebar.php template. Example plugin use: include a rotating advertisement or a tag cloud.
Usage: <?php do_action('wp_meta'); ?>
-or-  <?php wp_meta(); ?>
comment_form
Goes in comments.php and comments-popup.php, directly before the comment form's closing tag (</form>). Example plugin use: display a comment preview.
Usage: <?php do_action('comment_form', $post->ID); ?>

For a real world usage example, you'll find these plugin hooks included in the default theme's templates.

Theme Development General Guidelines

Please be clear about the following in your documentation (a README file included with your Theme helps many users over any potential stumbling blocks):

  1. Indicate precisely what your Theme and template files will achieve.
  2. Indicate deficiencies in your Themes, if any.
  3. Clearly reference any special modifications in comments within the template and style sheet files. Add comments to modifications, template sections, and CSS styles, especially those which cross template files.
  4. If you have any special requirements, which may include custom RewriteRules, or the use of some additional, special templates, images or files, please explicitly state the steps of action a user should take to get your Theme working.
  5. Try and test your Theme across browsers to catch at least a few of the problems the users of the Theme may find later.
  6. Provide contact information (web page or email), if possible, for support information and questions.

Take time to read through Designing Themes for Public Release, an article with good tips on preparing your Theme for the public.

References and Resources

There is a comprehensive list of WordPress Theme and Template File resources in the Templates article.