Cuándo se desarrolla un tema para WordPress, siempre llega la necesidad de hacer referencias a archivos localizados en el propio tema; también puedes verte en esta necesidad trabajando en plugins. Por ejemplo, puedes necesitar utilizar un archivo PHP del tema o cargar un stylesheet en el frontend. En el primer caso será necesario obtener la ruta del directorio del tema y en el segundo la URL.

En este post veremos ambos casos en diferentes situaciones. El set de funciones que se utilizarán son:

  1. get_template_directory_uri()
  2. get_template_directory()
  3. get_stylesheet_directory_uri()
  4. get_stylesheet_directory()
  5. get_stylesheet_uri()
  6. get_theme_file_uri()
  7. get_locale_stylesheet_uri()
  8. get_theme_root_uri()
  9. get_theme_root()
  10. get_theme_roots()

template vs stylesheet

Cuándo se habla de temas en WordPress hay que tener claros dos conceptos: stylesheet y template. Cada tema para WordPress requiere obligatoriamente un stylehseet, un archivo style.css con unas determinadas cabeceras. Las referencias al stylesheet siempre hacen referencia a este archivo y, por tanto, se refieren siempre al tema activo.

El template, por el contrario, no siempre se refiere al tema activo. En el caso de temas hijos (child themes) el template es el nombre del directorio del tema padre. En temas padres, o en temas sin hijos ni padres, el template es el nombre del directorio del propio tema.

Entender bien ambos conceptos es muy importante. Hay que tener claro que las referencias al stylesheet y al template serán iguales en cualquier tema excepto en temas hijos. En temas hijos las referencias al stylesheet son al tema hijo y las referencias al template son al tema padre. Se puede entender mejor si recuerdas que un tema hijo requiere obligatoriametne su propia hoja de estilos (su propio archivo style.css) mientras que las plantillas (templates) las toma del tema padre (aunque pueda sobreescribirlas).

Si ya tienes estos conceptos claros, podemos pasar a ver como obtener el directorio y URL de los temas en WordPress.

Referencias al template

1

get_template_directory_uri()

Esta función devuelve la URL del directorio del template asociado al tema activo. La URL devuelta no lleva trailing slash (barra diagonal al final) y utiliza protocolo HTTP o HTTPS si es necesario.

Por ejemplo, tanto si el tema activo es Twenty Fifteen como si es un tema hijo de Twenty Fifteen, y hacemos:

echo get_template_directory_uri();

Obtendremos:

http://misitio.com/wp-content/themes/twentyfifteen

Es útil cuándo es necesario obtener la URL del tema de referencia, tanto si es el activo como si es el tema padre. Por ejemplo, si tenemos un child theme y queremos añadir un script que está en el tema padre:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'some_script',
        get_template_directory_uri() . '/js/some_script.js',
        array('jquery')
    );
} );

Referencia: get_template_directory_uri(). Aplica el filtro template_directory_uri.

2

get_template_directory()

Es similar a get_template_directory_uri() pero devuelve la ruta en el sistema de archivos del servidor en lugar de la URL. Por ejemplo, si el tema activo es Twenty Fifteen o un tema hijo, obtendríamos algo así:

/home/user/public_html/wordpress/wp-content/themes/twentyfifteen

Es útil, en otros, para incluir scripts PHP que están localizados en un tema y que queremos que se incluyan incluso si se activa un tema hijo:

include( get_template_directory() . '/inc/template-tags.php' );

Referencia: get_template_directory(). Aplica el filtro template_directory.

Referencias al stylesheet

3

get_stylesheet_directory_uri()

Es similar a get_template_directory_uri(), se obtiene la URL que apunta al directorio del tema activo con la diferencia de que si estamos en un tema hijo, get_stylesheet_directory_uri() devuelve la URL hacia el tema hijo y no hacia el tema padre como hacia get_template_directory_uri().

Por ejemplo, si el tema activo es Twenty Fifteen y hacemos:

echo get_stylesheet_directory_uri();

Obtendremos:

http://misitio.com/wp-content/themes/twentyfifteen

Pero si el tema activo es un tema hijo de Twenty Fifteen, el resultado ya es diferente. Por ejemplo, si el tema hijo está en el directorio themes/mitema, obtendremos:

http://misitio.com/wp-content/themes/mitema

Referencia: get_stylesheet_directory_uri(). Aplica el filtro stylesheet_directory_uri.

4

get_stylesheet_directory()

Igual a get_stylesheet_directory_uri() pero devuelve el path físico en lugar de la URL.

Referencia: get_stylesheet_directory(). Aplica el filtro stylesheet_directory.

5

get_stylesheet_uri()

Esta función devuelve la URL del archivo style.css del tema activo.

echo get_stylesheet_uri();
// Sería algo equivalente a
// echo get_stylesheet_directory_uri() . '/style.css';

Referencia: get_stylesheet_uri(). Utiliza el filtro stylesheet_uri.

6

get_theme_file_uri()

Con esta función se obtiene la URL de un archivo localizado en el theme. Si el tema activo es un child theme, primero se busca en el child theme y luego en el padre. Utilizar esta función para cargar CSS y JavaScripts en los temas permite que puedan ser sobreescritos fácilmente en temas hijos; basta copiar los archivos del tema padre al tema hijo manteniendo la misma ruta relativa.

echo get_theme_file_uri( '/assets/css/colors-dark.css' );

Referencia: get_theme_file_uri(). Utiliza el filtro theme_file_uri.

7

get_locale_stylesheet_uri()

Esta función devuelve la URL del archivo CSS especifico por idioma. En un tema para WordPress puedes tener el stylesheet general style.css y otros adicionales específicos por idioma. Estos archivos han de estar en el directorio principal del tema y su nombre ha de ser el código de idioma; por ejemplo, es_ES.css.

Además, si la dirección del texto en el idioma activo es right-to-left se buscará el archivo rtl.css; si es left-to-right se buscará el archivo ltr.css. De esta forma se estandariza la carga de hojas de estilo específicas según las características del idioma utilizado; muy útil en webs multiidioma.

Referencia: get_locale_stylesheet_uri(). Utiliza el filtro locale_stylesheet_uri.

Referencias al directorio de instalación de temas

Si nos interesa conocer la URL o ruta al directorio dónde están instalados los temas (directorio raíz del tema) podemos utilizar las siguientes funciones:

8

get_theme_root_uri()

Esta función devuelve la URL del directorio dónde está instalado el tema activo. Si en una instalación WordPress estándar hacemos:

echo get_theme_root_uri();

Obtendríamos algo así:

http://misitio.com/wp-content/themes

Si queremos obtener la URL al directorio raíz de otro tema diferente al tema activo, podemos pasar el nombre del tema. Por ejemplo:

echo get_theme_root_uri( 'oro-tema' );

Cómo en la mayoría de instalaciones de WordPress todos los temas están bajo el mismo directorio raíz, obtendríamos el mismo resultado que antes. Este uso sería útil en instalaciones dónde puede haber varios directorios de instalación de temas.

Referencia: get_theme_root_uri(). Utiliza el filtro theme_root_uri.

9

get_theme_root()

Esta función devuelve la ruta en el sistema de archivos del servidor del directorio de temas. Si en una instalación WordPress estándar hacemos:

echo get_theme_root();

Obtendríamos algo así:

/home/user/public_html/wp-content/themes

Al igual que con get_theme_root_uri(), si queremos calcular el path del directorio raíz de un tema específico, podemos pasar su nombre a la función. Útil en instalaciones en las que no todos los temas comparten el mismo directorio raíz:

echo get_theme_root( 'otro-tema' );

Referencia: get_theme_root(). Utiliza el filtro theme_root.

10

get_theme_roots()

Esta función devuelve el nombre (no la ruta) del directorio raíz de temas. En una instalación normal de WrodPress en la que todos los temas comparten el mismo directorio raíz, si hacemos:

echo get_theme_roots();

Obtendremos:

/themes

Pero si hay temas instalados en diferentes directorios, es decir, si no todos los temas comparten el mismo directorio raíz, get_theme_roots() devuelve un array con cada tema y su directorio raíz correspondiente.

Referencia: get_theme_roots().