Es posible crear tus propios temas de wordpress para utilizarlos en tu sitio web. Sin embargo no es necesario empezar desde cero. Uno pensaría que la forma más sencilla es tomar un tema ya existente y editarlo, pero esto tiene una serie de inconvenientes como perder las futuras mejoras que se le hagan al tema por parte de su autor original.
El sistema de temas de wordpress permite crear temas derivados llamados child themes. Estos heredan las funcionalidades de otro tema que se le conoce como parent theme. Esta es la forma apropiada de modificar un tema ya existente o utilizar el tema principal como framework para nuestro tema.
Crear el child theme
Lo esencial para que wordpress reconozca tu tema es crear una nueva carpeta en el directorio de temas que se encuentra en wp-content/themes que contenga un archivo style.css con el siguiente encabezado
/* Theme Name: Mi tema Template: twentyeleven */
El atributo template es que el que nos interesa, es acá donde le indicamos cual es el parent theme.
Hecho esto deberías ver en el dashboard de wordpress en la sección Apariencia->Temas nuestro nuevo tema.
Si lo utilizamos así tal cual veremos el sitio sin ningún estilo porque nuestro style.css está vació, sin embargo, si revisamos el código generado veremos que hay una gran estructura de html válido, con muchas clases para modificar y que además utiliza las distintas funciones del tema padre, en nuestro ejemplo Twenty Eleven.
En este punto contamos con un tema en blanco completamente funcional.
Importar el estilo del parent theme
Cuando elegimos el parent de nuestro nuevo tema es porque probablemente hay cierta tendencia de diseño o porque las modificaciones que queremos hacer son menores. Resulta muy útil entonces aplicar el estilo del tema padre. Para esto agregamos una línea adicional al style.css
/* Theme Name: Mi tema Template: twentyeleven */ @import url(../twentyeleven/style.css);
El @import nos incluye el estilo. Con esto si miramos nuestro sitio utilizando el tema que hemos creado se verá igual como si utilizaramos el parent theme.
Lo que tenemos ahora es la estructura para modificar el parent theme de manera segura, sin editar los archivos originales y sin perder las futuras mejores que el parent theme reciba.
Modificar el tema con nuestros propios cambios
Muy sencillo, solo debes sobreescribir las propiedades. Lo mejor para esto es inspeccionar el código utilizando firebug (si usas firefox) o el inspect de tu navegador. Si deseas modificar los encabezados buscamos las clases del css y en nuestro style.css hacemos los cambios.
Si quisiéramos modificar el color del h2 tendríamos en nuestro style.css lo siguiente
/*
Theme Name: Mi tema
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);
.entry-title, .entry-title a {
color: #2222aa;
text-decoration: none;
}
De esta forma vamos variando las propiedades del css que nos interesa. Si queremos variar elementos en el html lo que hacemos es copiar el archivo correspondiente del tema padre a la carpeta de nuestro tema y lo modificamos acá. Así podemos tener nuestra propia versión de footer.php o del header.php.
Es realmente sencillo y muy elegante de desarrollar.
