Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com
Desarrollo de Temas
Archivos y plantillas del tema, Uso de plantillas, El Loop, Custom Post Types,
Metaboxes, Functions.php, Crear tema desde cero, Child Themes, Starter Themes.

#1
¿Qué es un tema?
¿Y cómo crearlo?

dariobf.com
¿Qué es un tema?
Un tema es un conjunto de archivos que permite cambiar la
apariencia de nuestro gestor de contenidos.
Un tema WordPress nos permitirá personalizar las fuentes de los
textos, el tamaño de la letra, los colores del texto, de los links, el
fondo de la página; en definitiva, el aspecto del sitio web.
•Blog.
•Tienda online.
•Sitio web corporativo.
•Institucionales.
•Educativos.
•Comunidad.
•Wiki.
•Portal.
•etc.

dariobf.com
index.phpstyle.css
¿Cómo es un tema?

dariobf.com
style.css
Sin style.css no hay tema.
function search_theme_directories(){
…
if ( $theme_file == ‘style.css’ ) {
$theme_files[$theme_dir] = array( ‘theme_file’ =>
$theme_dir . ‘/’ . $theme_file, ‘theme_root’ => $theme_root );
$found_stylesheet = true;
break;
…
}
…
}

dariobf.com
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the
blog, featuring a full range of post formats, each displayed
beautifully in their own unique way. Design details abound,
starting with a vibrant color scheme and matching header images,
beautiful typography and icons, and a flexible layout that looks
great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-
column, two-columns, right-sidebar, flexible-width, custom-
header, custom-menu, editor-style, featured-images,
microformats, post-formats, rtl-language-support, sticky-post,
translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've
learned with others.
*/

dariobf.com
index.php
Plantilla más genérica.
Se muestra si no hay otra plantilla más específica para el
contenido que estamos mostrando.
»
home.php index.php
»

dariobf.com
WordPress nos permite modularizar el código; esto es, crear
ficheros para jerarquizar el diseño (front-end).
Además, nos permite modularizar funciones (plugins), de manera
que podemos reciclar trozos de código en diferentes proyectos.
Modularización

dariobf.com
Ficheros habituales de un
tema WordPress
header.php footer.php sidebar.php

dariobf.com
header.php
footer.php
index.php sidebar.php

dariobf.com
header.php
Declaración del documento.
Inclusión de los estilos.
Función wp_head();

dariobf.com
wp_head()
Función IMPRESCINDIBLE.
Sinónimo de do_action(‘wp_head’);
No acepta parámetros.
Es dependiente del tema.
Todos los plugins vuelcan sobre ella sus estilos y scripts.
add_action('wp_head','hook_css');
function hook_css()
{
$output="<style> .wp_head_example { background-color :
#f1f1f1;} </style>";
echo $output;
}

dariobf.com
footer.php
Pié de página.
Inclusión de Javascript.
Función wp_footer();

dariobf.com
wp_footer()
Función IMPRESCINDIBLE.
Sinónimo de do_action(‘wp_footer’);
No acepta parámetros.
Es dependiente del tema.
Todos los plugins vuelcan sobre ella sus scripts.
add_action('wp_footer','hook_javascript');
function hook_javascript()
{
$output="<script> //Mi función javascript. </script>";
echo $output;
}

dariobf.com
sidebar.php
Barra lateral.
Widgets.

dariobf.com
Plantillas para contenidos
home.php page.php
single.php archive.php

dariobf.com
page.php y single.php

dariobf.com
Más plantillas
404.php category.php
tag.php author.php
…

dariobf.com
index
404
archive
author
category
tag
taxonomy
date
home
front_page
page
paged
search
single
text, plain, text_plain (all mime types)
attachment
comments
Todas las plantillas

dariobf.com
Plantillas personalizadas
contacto.php about.php
location.php whatever.php
…

dariobf.com
Página especializada. Para una entrada, autor, página
concretos.
1. page-{slug}.php
2. page-{ID}.php
3. category-{ID}.php
4. tag-{ID}.php
5. author-{ID}.php
…
Plantillas personalizadas

dariobf.com
header.php
footer.php
index.php
sidebar.php

El bucle (Loop)
Determina qué contenido debe mostrar WordPress.
Un sólo post o página.
Un grupo de posts o páginas.
Consulta parámetros (URL)
<?php
if(have_posts()) :
while(have_posts()) :
the_post();
?>
<h1><?php the_title() ?></h1>
<div class='post-content'><?php the_content() ?></div>
<?php
endwhile;
else:
?>
Vaya, no hay entradas.
<?php
endif;
?>

Objeto $wp_query
El Loop es utilizado para extraer y mostrar contenido de artículos
(o posts), páginas y tipos de entrada personalizados (Custom Post
Types).
Los datos que obtenemos al consultar (consulta original,
query_posts o WP_Query), estos se guardan en $wp_query (un
objeto).

dariobf.com
Objeto $wp_query
Ejemplo - Ver posts o artículos:
<pre>
<?php print_r($wp_query->posts); ?>
</pre>
Ejemplo - Loop básico:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

dariobf.com
Objeto $wp_query
Funciones del objeto $wp_query:
<?php
function the_post() {
global $wp_query;
$wp_query->the_post();
}
?>

dariobf.com
Objeto $wp_query
Objeto automático.
WordPress basa el funcionamiento de $wp_query en la dirección
web actual y configuraciones del wp-admin.
WordPress necesita la URL para filtrar parámetros o páginas
concretas. Por ejemplo, la URL http://ejemplo.com/etiqueta/pony
le dice a WordPress que configure el objeto $wp_query con los
artículos etiquetados con pony, exclusivamente. Mientras que
http://ejemplo.com/ obtiene todos los artículos.

<?php
if(have_posts()) :
while(have_posts()) :
the_post();
?>
<?php
endwhile;
else:
?>
<?php
endif;
?>
Clase que modifica (o crea) el objeto $wp_query
Loop por defecto:
Clase WP_Query

<?php
$args = array('cat' => 4);
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<?php
endwhile;
else:
?>
<?php
endif;
?>
Loop de WordPress con WP_Query
Clase WP_Query

dariobf.com
Loop normal vs Loop WP_Query:
1.Construir la consulta: Con WP_Query hay que indicar
qué contenido queremos extraer de la base de datos.
2.Inicializar WP_Query y consultar.
3.Crear el loop.
4.Trabaja como siempre.
Clase WP_Query

dariobf.com
1 - Construir la consulta: Con WP_Query hay
que indicar qué contenido queremos extraer
de la base de datos.
1. Controla los valores por defecto:
• post_per_page
• post_type
• post_status
• Más información.
Clase WP_Query

<?php
?>
<?php
endwhile;
else:
?>
<?php
endif;
?>
2 - Iniciar WP_Query y consultar.
Clase WP_Query

<?php
?>
<?php
endwhile;
else:
?>
<?php
endif;
?>
3 - Crear el Loop.
Clase WP_Query

dariobf.com
4. Trabaja como siempre.
1. Añade tus etiquetas html, estructura o diseño.
Consejos:
No hagas consultas muy pesadas, sobretodo en
alojamientos compartidos.
– Más consultas a la base de datos = más consumo del
servidor.
– Siempre que puedas, utiliza la consulta por defecto de
WordPress y el motor de plantillas.
Clase WP_Query

dariobf.com
/* Restore original Post Data
* NB: Because we are using new WP_Query we aren't stomping on the
* original $wp_query and it does not need to be reset with
* wp_reset_query(). We just need to set the post data back up with
* wp_reset_postdata().
*/
wp_reset_postdata();
5 - Resetea parámetros (evita problemas)
Clase WP_Query

#3
Añadiendo menús
personalizados

Podemos registrar tantos menús como queramos
// Añado un menú sólo
function register_my_menu() {
register_nav_menu('header-menu',__( ‘Primary Navigation' ));
}
// Añado varios menús
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( ‘Primary Navigation’ ),
'extra-menu' => __( ‘Top Bar Navigation’ )
)
);
}
add_action( 'init', 'register_my_menus' );
Añadiendo menús
Apariencia»Menús {

dariobf.com
Para mostrarlo en el front-end:
<?php wp_nav_menu(array( 'theme_location' => 'header-menu')); ?>
Añadiendo menús
Más información
<?php
wp_nav_menu(array(
'theme_location' => ‘extra-menu',
'container_class' => ‘my_extra_menu_class'
));
?>

dariobf.com
• Es un fichero de nuestro tema.
• Es una de las formas de cambiar las características que
WordPress ofrece por defecto.
• El functions.php funciona como un plugin:
• Añade mejoras y funcionalidades a un sitio WordPress.
• Puedes utilizarlo para llamar funciones, tanto PHP como de
WordPress.
functions.php

dariobf.com
Un plugin:
• Requiere una cabecera específica, única
• Se guarda en wp-content/plugins (Normalmente en
subdirectorio
• Se ejecuta sólo cuando está activado, a través del panel de
plugins
• Aplica sus funciones independientemente del tema
• Debe tener un propósito; por ejemplo: convertir artículos en
páginas, ofrecer mejoras de posicionamiento o ayudar con los
backups
functions.php
Diferencias con un plugin

dariobf.com
El fichero functions.php:
• No requiere una cabecera única/propia.
• Se guarda en el directorio de cada tema; wp-content/
themes/theme
• Sólo se ejecuta cuando el tema al que aplica está activado.
• Aplica sus funciones/cambios sólo al tema. Si se cambia el
tema, la funcionalidad se pierde.
• Puede tener varios bloques de código utilizados para
diferentes propósitos.
functions.php
Diferencias con un plugin

¡CUIDADO!: Si un plugin de
WordPress llama a la misma función
o ﬁltro que tu functions.php, los
resultados pueden ser…

dariobf.com
Custom Post Types
Por defecto:
• Entradas
• Páginas
• Adjuntos
• Revisión
• Menús de navegación.

dariobf.com
Custom Post Types
Utilidades:
• Catálogos de productos.
• El custom post type es el producto.
• Portfolios.
• Editorial.
…

Custom Post Types
1 - Mostrar etiquetas del nuevo Post Type.
// La función no será utilizada antes del 'init'.
add_action( 'init', 'my_custom_init' );
/* Creamos labels personalizados para nuestro Post Type */
function my_custom_init() {
$labels = array(
‘name’ => _x( 'Libros', 'post type general name' ),
'singular_name' => _x( 'Libro', 'post type singular
name' ),
'add_new' => _x( 'Añadir nuevo', 'book' ),
'add_new_item' => __( 'Añadir nuevo Libro' ),
'edit_item' => __( 'Editar Libro' ),
'new_item' => __( 'Nuevo Libro' ),
'view_item' => __( 'Ver Libro' ),
'search_items' => __( 'Buscar Libros' ),
'not_found' => __( 'No se han encontrado Libros' ),
'not_found_in_trash' => __( 'No se han encontrado
Libros en la papelera' ),
'parent_item_colon' => ''
);

Custom Post Types
2- Definir propiedades del post type nuevo.
// Creamos un array para $args
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => ‘post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author',
'thumbnail', 'excerpt', 'comments' )
);
//Registramos el Post Type
register_post_type( 'libro', $args ); /* Registramos y a
funcionar */
}

dariobf.com
Custom Post Types
Funciones para controlar el Custom Post Type:
• post_type_exists() – Revisa si existe un custom post type.
• is_post_type_hierarchical( $post_type ) – Cuándo el tipo de
post es jerárquico. Si retorna falso es que no lo es.
• get_post_type( $post ) – Recupera el tipo de entrada del
artículo en cuestión o un post específico.
• get_post_type_object( $post_type ) – Recupera un objeto del
tipo de entrada por nombre.
• get_post_types( $post ) – Obtiene una lista de todos los tipos
de entrada.
• register_post_type() – Registra un nuevo tipo de entrada. No
utilizar antes del init.
• get_post_type_capabilities() – Crea un objeto con todos los
permisos de los tipos de entrada personalizados.
Más información

Taxonomías
Custom Post Types
// Lo enganchamos en la acción init y llamamos a la función
create_book_taxonomies() cuando arranque
add_action( 'init', 'create_book_taxonomies', 0 );
// Creamos dos taxonomías, género y autor para el custom post
type "libro"
function create_book_taxonomies() {
// Añadimos nueva taxonomía y la hacemos jerárquica (como
las categorías por defecto)
$labels = array(
'name' => _x( 'Géneros', 'taxonomy general name' ),
'singular_name' => _x( 'Género', 'taxonomy singular name' ),
'search_items' => __( 'Buscar por Género' ),
'all_items' => __( 'Todos los Géneros' ),
'parent_item' => __( 'Género padre' ),
'parent_item_colon' => __( 'Género padre:' ),
'edit_item' => __( 'Editar Género' ),
'update_item' => __( 'Actualizar Género' ),
'add_new_item' => __( 'Añadir nuevo Género' ),
'new_item_name' => __( 'Nombre del nuevo Género' ),
);

Taxonomías
Custom Post Types
register_taxonomy( 'genero', array( 'libro' ), array(
'hierarchical' => true,
'labels' => $labels, /* ADVERTENCIA: Aquí es donde se
utiliza la variable $labels */
'show_ui' => true,
'rewrite' => array( 'slug' => 'genero' ),
));

Taxonomías
Custom Post Types
// Añado otra taxonomía, esta vez no es jerárquica, como las
etiquetas.
$labels = array(
'name' => _x( 'Escritores', 'taxonomy general name' ),
'singular_name' => _x( 'Escritor', 'taxonomy singular name' ),
'search_items' => __( 'Buscar Escritores' ),
'popular_items' => __( 'Escritores populares' ),
'all_items' => __( 'Todos los escritores' ),
'parent_item' => null,
'parent_item_colon' => null,
'edit_item' => __( 'Editar Escritor' ),
'update_item' => __( 'Actualizar Escritor' ),
'add_new_item' => __( 'Añadir nuevo Escritor' ),
'new_item_name' => __( 'Nombre del nuevo Escritor' ),
'separate_items_with_commas' => __( 'Separar Escritores por
comas' ),
'add_or_remove_items' => __( 'Añadir o eliminar Escritores' ),
'choose_from_most_used' => __( 'Escoger entre los Escritores
más utilizados' )
);

Taxonomías
Custom Post Types
register_taxonomy( 'escritor', 'libro', array(
'hierarchical' => false,
'labels' => $labels, /* ADVERTENCIA: Aquí es donde se
utiliza la variable $labels */
'show_ui' => true,
'rewrite' => array( 'slug' => 'escritor' ),
));
} // Fin de la función create_book_taxonomies().

Taxonomías
Custom Post Types
—>

dariobf.com
Funciones para controlar el Custom Post Type:
• get_taxonomies() – Obtienes una lista de las taxonomías
registradas.
• get_object_taxonomies($object_type) – Retorna todas las
taxonomías que pertenecen al $object_type especificado.
• get_taxonomy() – Recupera la taxonomia especificada.
• taxonomy_exists() – Comprueba que la taxonomía existe.
Falso si no existe.
• is_taxonomy_hierarchical() – Nos dice si una taxonomía es
jerárquica. Falso en caso negativo.
• register_taxonomy – Crea o modifica un objeto de taxonomía.
No usar antes del init.
Taxonomías
Custom Post Types
Más información

dariobf.com
Metaboxes
¿Qué es?:
• Nos permite añadir campos personalizados en la página de
edición de los posts.
• Guardar más información sobre un tipo de entrada (o todos)
¿Cómo se crean?:
• Con plugin.
• Con código.

dariobf.com
Metaboxes
<?php
add_meta_box(
$id,
$title,
$callback,
$page,
$context,
$priority,
$callback_args
);
?>

dariobf.com
• $id el el ID html del metabox. Es útil, por ejemplo, si vas a utilizar un CSS custom para darle
estilos a este metabox o incluso vas a hacer algo con Javascript; sino, no tiene mucha
importancia.
• $title es el título que será mostrado en la parte superior del metabox, como veremos
próximamente.
• $callback es la función que dará uso a nuestro metabox, lo veremos en el siguiente punto.
• $page es donde queremos que se muestre nuestro metabox; podemos decidir que se
muestre en los post, las páginas o un custom post type (nuestro caso).
• $context es dónde queremos que se muestre nuestro metabox. “normal” significará que
se muestre bajo el editor de la entrada o página, “side” coloca el metabox a la barra lateral
de la página de edición y “advanced” lo coloca en la misma columna que el editor.
• $priority le dice a WordPress dónde cargar el metabox en el contenido. “high”, “default” o
“low” coloca la caja del metabox arriba, en su posición natural o abajo del todo
respectivamente. Aunque, desde que todos los metaboxes de WordPress funcionan con
el Drag and drop, $priority no tiene demasiado sentido.
• $callback_args es de otra batalla.
Metaboxes

dariobf.com
Metaboxes
<?php
add_meta_box(
‘my-meta-box-id’,
‘Datos adicionales del libro’,
‘dariobf_metabox’,
‘libro’,
‘normal’,
‘high’
);
?>

dariobf.com
Metaboxes
function dariobf_metabox( $post ){
?>
<p>Aquí pondremos todo el contenido de nuestro metabox</p>
<?php
}

dariobf.com
Metaboxes
function dariobf_metabox( $post )
{
?>
<p>
<label for="my_meta_box_text">ISBN</label>
<input type="text" name="my_meta_box_text"
id="my_meta_box_text" value="<?php echo $text; ?/>" />
</p>
<?php
}
Añadiendo: Input

dariobf.com
Metaboxes
function dariobf_metabox( $post )
{
$values = get_post_custom( $post->ID );
$text = isset( $values['my_meta_box_text'] ) ?
esc_attr( $values['my_meta_box_text'][0] ) : '';
// We'll use this nonce field later on when saving.
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
<p>
<label for="my_meta_box_text">ISBN</label>
<input type="text" name="my_meta_box_text"
id="my_meta_box_text" value="<?php echo $text; ?/>" />
</p>
<?php
}
Añadiendo: Input

dariobf.com
Metaboxes
Añadiendo: Select

dariobf.com
Metaboxes
¿Qué hemos hecho?:
• He añadido dos select, como hemos mencionado arriba.
• He añadido, también, dos variables más ($select y $select2)
donde recogo los datos de ambos select. Tal y como hicimos
con el input del ISBN.

dariobf.com
Metaboxes
Guardando los datos:
• Jamás te fíes del usuario.
• Antes de guardar los datos vamos a comprobar que no hay
nada malicioso en ellos.
• Función esc_attr(). Codifica las comillas simples y dobles así como
los símbolos mayor qué y menor qué en HTML. Más información.
• Guardamos con update_meta():
• El ID del post
• La “llave” (key) del meta
• El valor.

Metaboxes
add_action( 'save_post', ‘dariobf_metabox_save’ );
function dariobf_metabox_save( $post_id )
{
// Controla si estamos haciendo un auto-guardado
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
// Si nuestro nonce no está, o no podemos verificarlo, fuera.
if( !isset( $_POST['meta_box_nonce'] ) || !
wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) )
return;
// Si el usury actual no puede editar este post, fuera.
if( !current_user_can( 'edit_post' ) ) return;
// Ahora podemos guardar los datos
$allowed = array(
'a' => array(
'href' => array()
)
);

Metaboxes
// Nos aseguramos de que la información está definida antes de
guardar.
if( isset( $_POST['my_meta_box_text'] ) )
update_post_meta( $post_id, ‘my_meta_box_text',
wp_kses( $_POST['my_meta_box_text'], $allowed ) );
if( isset( $_POST['my_meta_box_select'] ) )
update_post_meta( $post_id, 'my_meta_box_select',
esc_attr( $_POST['my_meta_box_select'] ) );
if( isset( $_POST['my_meta_box_select_2'] ) )
update_post_meta( $post_id, 'my_meta_box_select_2',
esc_attr( $_POST['my_meta_box_select_2'] ) );
} // Fin función dariobf_metabox_save

dariobf.com
Metaboxes
¿Cómo muestro los datos en el Front-End?
get_post_meta o get_post_custom
// Obtenemos el ISBN del libro con ID 76
<?php $isbn = get_post_meta( 76, 'my_meta_box_text' ); ?>

dariobf.com
Post Formats
Introducido en la versión 3.1
Un Post Format (Formato de publicación) es una información meta
que se puede utilizar en un tema para personalizar la forma de
presentación de la misma.
En resumen, con un tema que soporte los Post Formats, el usuario
final puede decidir la apariencia que tendrá cada publicación.

dariobf.com
Post Formats
• Aside - Generalmente se muestra sin título. Parecido a una publicación en
el muro de Facebook.
• Galería - Galería de imágenes.
• Enlace - Un enlace a otro sitio web.
• Imagen - Una única imagen. La primera etiqueta img en el artículo se
considerará la imagen.
• Cita - Una cita. Probablemente contendrá un blockquote con el contenido
citado. Además, la cita será el contenido, con la fuente o autor como título.
• Estado - Actualización de estado, similar a una actualización de Twitter.
• Vídeo - Un video o playlist de vídeos.
• Audio - Un fichero de audio o lista de reproducción. Puede utilizarse para
Podcasting.
• Chat - Transcripción de chat.

dariobf.com
Post Formats
¿Cómo añado este soporte a mi tema?
add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

dariobf.com
Post Formats
¿Y a un tipo de entrada concreto?
// Añado post-formats al post_type ‘page' - Páginas
add_post_type_support( 'page', 'post-formats' );
// Añado post-formats al post_type ‘my_custom_post_type'
add_post_type_support( 'my_custom_post_type', 'post-formats' );

dariobf.com
Post Formats
Para utilizarlos en el front-end:
if ( has_post_format( 'video' )) {
echo 'this is the video format';
}

dariobf.com
Imagen destacada
También Post Thumbnail
add_theme_support( 'post-thumbnails' );
has_post_thumbnail() - Pregunta
the_post_thumbnail() - Muestra (Loop)
get_the_post_thumbnail() - Muestra

dariobf.com
Nos permite dejar ciertos valores a configurar por el usuario de
nuestro theme.
Por ejemplo: logotipos, fondo, imagen de cabecera, tamaño y
características de la fuente…
https://developer.wordpress.org/themes/advanced-topics/
customizer-api/
Customizer

#10
Child Themes
Starter Themes

dariobf.com
Un "tema hijo" en WordPress es un tema que hereda la
funcionalidad de otro tema, llamado "tema padre”.
Los temas hijos permiten modificar o añadir las funcionalidades
del tema padre.
Un tema hijo es la forma más segura y fácil de modificar un tema
existente, tanto si se quiere hacer pequeños cambios como otros
más amplios.
En lugar de modificar los archivos del tema directamente, crear un
tema hijo y hacerlo prevalecer sobre el tema padre.
Child Themes

dariobf.com
Si modificas un tema existente y se actualiza, se perderán los
cambios. Con un tema hijo, puedes subir el tema padre (que
puede ser importante por cuestiones de seguridad o
funcionalidad) y seguir manteniendo los cambios.
Puede acelerar el tiempo de desarrollo. Partimos de un tema
desarrollado.
Es una buena forma de empezar si se está empezando con el
desarrollo de temas WordPress.
Child Themes
¿Porqué utilizarlos?

dariobf.com
Crea una carpeta para tu tema hijo en wp-content/themes.
Recomendable “nombredeltemapadre-child”.
Crea un style.css (único fichero obligatorio para crear un tema hijo)
Child Themes
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-
layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
@import url("../twentyfourteen/style.css");
/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

dariobf.com
Consejo: no utilizar @import para integrar la hoja de estilos del
padre. Utilizar wp_enqueue_style en el functions.php
Child Themes
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .
'/style.css' );
}

dariobf.com
underscores.me
Es un tema sin estilos con el que empezar a
trabajar.
No utilizar como Parent Theme.
Starter Themes

dariobf.com
• La cantidad justa de plantillas HTML5, bien comentadas y modernas.
• Una plantilla 404 útil.
• Una implementación de “header” personalizado (opcional) inc/custom-
header.php
• Etiquetas personalizadas de plantilla en inc/template-tags.php que
mantienen tus plantillas limpias y previenen la duplicación de código.
• Algunos trucos en inc/extras.php que pueden mejorar tu experiencia
desarrollando temas.
• Un script en js/navigation.js que hace tu menú responsive en pantallas
pequeñas. Preparado para tu creatividad CSS.
• Dos ejemplos de plantillas CSS en layouts/: Una con barra lateral a la
derecha y otra con barra lateral a la izquierda.
• Starter CSS en style.css que te ayudará a empezar tu diseño
rápidamente.
• La licencia GPL en license.txt.
Starter Themes

Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Similar to Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao (20)

Recently uploaded

Recently uploaded (15)

Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao