Como crear un Tema para WordPress desde Cero

Si estás pensando en crear tu propio tema para WordPress este es el tutorial en español que necesitas leer. En forma simple te mostraré todo lo que debes saber para hacer un template responsive, que utilize todas las posibilidades que brinda wordpress.

Al finalizar el tutorial estarás en condiciones de desarrollar y vender tus propios themes para WordPress.

Leélo completo, es entretenido y fácil de comprender aún para quienes no tienen conocimientos de programación.

Si crees que es de ayuda,  recomienda este artículo sobre como crear themes de WordPress a tus amigos.

Características de WordPress que utilizara nuestro tema

Este es el tema que haremos: Yo Amo WordPress Theme

  • HTML 5
  • CSS 3
  • Responsive Design
  • SEO optimizado
  • Custom Header
  • Custom Background
  • Custom Menu
  • Theme Customizer
  • Featured Images
  • Google Fonts

Detalles del Tutorial

  • Nivel de Acceso: Miembros (Registro).
  • Versión de WP: +3.0
  • Dificultad: Avanzado
  • Tiempo estimado para completarlo: 1 hora

En este tutorial aprenderás…

  • Vamos a crear juntos y Paso-A-Paso un tema WordPress utilizando todas sus avanzadas funciones

Al terminar de leerlo estarás en condiciones de…

  • Comenzar a crear temas WordPress exclusivos. Crear tu propio producto, venderlo y hacer mucho dinero.

Que necesitas para completar este tutorial

  • Una instalación WordPress
  • Un editor de textos, por ejemplo Notepad ++
  • Un cliente FTP, por ejemplo Filezilla

Introducción

Crear un tema es una tarea bastante sencilla debido a que muchas de las funciones que necesitarás ya vienen integradas en el propio core de WordPress. Tu sólo tienes que habilitarlas y setearlas correctamente para tenerlas funcionando.

Además, no es necesario inventar la rueda una y otra vez, porque tienes a tu disposición completos marcos de trabajo (frameworks) que poseen todos los elementos básicos listos para que tu los modifiques a tus necesidades.

[not-level-visitante]

Paso 1: Elegir un Framework

Actualmente existen muchos frameworks disponibles gratuitamente para comenzar con tu tema que  dotarán a tu WordPress de diversas funcionalidades.

Muchos de ellos son verdaderamente muy completos y prácticamente hacen todo el trabajo por ti, pero en nuestro caso elegiremos para este tutorial un framework muy simple y básico para poder ir agregando nosotros mismos lo que necesitemos.

Este framework fue programado por Automattic, la misma empresa que desarrolla y mantiene WordPress, por lo que su código es muy claro, robusto y bien documentado.

Su nombre es  Underscores o _s  y su web es  underscores.me

Además de ser un gran template para comenzar con nuestro desarrollo, tiene licencia GPL, por lo que podrás hacer con él algo útil y comercializarlo luego.

Creando un wordpress theme responsive

Comienza asi:

  • 1.1 Ingresa a la web del framework underscores
  • 1.2 Escribe el nombre que le darás a tu tema
  • 1.3 Presiona el enlace para abrir las Opciones Avanzadas
  • 1.4 Completa el resto del los datos
  • 1.5 Genera el tema y descarga el .zip con los archivos de tu tema
  • 1.6 Descomprímelo en tu PC en un directorio de trabajo

Paso 2: Elegir la estructura

Si ingresas a la carpeta de tu PC donde haz descargado el tema, verás que allí se encuentran todos los archivos necesarios para que este operativo.

Aún así, antes de subir el theme, es necesario hacerle unas modificaciones para que esté funcional.

Lo primero es elegir el layout que deseas, es decir, el orden que tendrán el contenido y el sidebar al ser visualizados.

En nuestro theme, que tiene dos columnas, podemos elegir si queremos mostrar el sidebar a la derecha o a la izquierda del contenido.

Si ingresas en el subdirectorio ‘layouts’ verás que allí hay dos archivos .css que contienen los estilos para una u otra opción, según sea tu preferencia.

Lo que vamos a hacer es simplemente abrir uno de estos dos archivos, copiar su contenido completo y pegarlo luego al final del archivo con las definiciones de estilo de nuestro tema.

  • 2.1 En tu editor de textos (yo uso notepad++) abre el archivo ‘style.css’, la hoja de estilos, que se encuentra en el directorio principal del tema.
  • 2.2 En la carpeta del tema puedes ver un subdirectorio llamado ‘layouts’. Abre en otra pestaña del editor de textos el archivo con el layouts que deseas utilizar, en nuestro caso, utilizaremos ‘content-sidebar.css’ para disponer de un sidebar a la derecha del contenido.
  • 2.3 Selecciona todo el texto del archivo con la estructura del layouts, puedes elegir el que pegamos aquí debajo si deseas el sidebar a la derecha, y copialo CTRL+C al portapapeles.
  • 2.4 Pégalo al final de la hoja de estilos del tema ‘style.css’
  • 2.5 Graba los cambios en ‘style.css’

Paso 3: Agregar Controles para definir estilos

WordPress tiene todo lo necesario en su core para poder personalizar nuestro theme desde el administrador y dotarlo de una interfase de usuario final.

Esta función se llama ‘Theme Customizer’.

Ahora vamos a agregar algunos nuevos controles a Customizer para poder cambiar desde allí los colores de nuestro theme y así hacerlo único.

Vamos a definir controles para el color de la fuente principal, enlaces, títulos y subtítulos.

Para ello, simplemente debes agregar al final del archivo de funciones ‘functions.php’, justo al final, lo siguiente:

  • 3.1 Abre en tu editor de textos ‘funtions.php’
  • 3.2 Pega el código de arriba al final del archivo
  • 3.3 Elige Guardar para almacenar los cambios

Paso 4: Personalizar el Header

Otra gran característica que viene en el core de WordPress es Custom Header, que nos permite subir una imagen y recortarla a las dimensiones que necesitemos para utilizarla como encabezado de nuestro tema.

También nos permite seleccionar el color para del título y descripción del sitio y decidir si queremos mostrarlos junto a la imagen o no.

Si hechas una mirada al directorio del tema en tu PC, verás una carpeta llamada ‘inc’ (include) que contiene una serie de archivos .php con funciones extras que necesita el tema para funcionar.

Uno de estos archivos contiene el código con las funciones para personalizar el header, el llamado justamente ‘custom-header.php’.

Para habilitar el custom header vamos al archivo de funciones del tema, ‘functions.php’ y buscamos en el código la llamada a incluir custom-header.php que se encuentra desmarcada y borramos las dos barras // del principio de la línea.

Con esto queda habilitada la sentencia que incluye el archivo con las funciones Custom Header.

  • 4.1 Abre ‘funcions.php’ en tu editor
  • 4.2 Busca la seccion que dice: Implement the Custom Header feature
  • 4.3 Borra las dos barras ( // ) del principio de la sentencia que requiere incluir el archivo ‘custom-header.php’
  • 4.4 Guarda el archivo

Ahora vamos a corregir los parámetros de la imagen de cabecera para que se ajuste a nuestro diseño. Nosotros queremos que nuestra imagen sea un logo, por lo que las dimensiones no deben pasar los 100px x 100px.

Entonces en el editor abrimos el archivo que incluye las funciones custom header y modificamos el ancho y el largo de la imagen (width y height) según nuestra conveniencia.

  • 4.5 Abre ‘custom-header.php’ que se encuentra en la carpeta ‘inc’ del tema
  • 4.6 Cambia las propiedades width y height de la funcion ‘yoamowp_custom_header_setup()’ a 100 en ambos casos

Ahora solo resta agregar en el Header del Theme la llamada a imprimir la imagen. Este código lo pegamos en ‘header.php’ justo antes de donde se imprime el titulo.

  • 4.7 Abre en tu editor ‘header.php’
  • 4.8 Pega el siguiente código para que se imprima la imagen
  • 4.9 Recuerda grabar los cambios en los archivos que modificaste

Paso 5: Imagen Destacada

Otra gran característica de WordPress es la posibilidad de seleccionar una imagen para destacar al mostrar la entrada.

En nuestro tema la utilizaremos para imprimirla en el Home del sitio como un thumbnail.

Al igual que en el Paso 5, la habilitación de Featured Images se realiza desmarcando el código en ‘functions.php’. Sólo borra las dos barras que para habilitar la línea.

Debajo de esta línea, pega el código de abajo para setear el tamaño del thumbnail generado a 150px x 150px.

  • 5.1 Abre en tu editor ‘functions.php’
  • 5.2 Busca la leyenda: Enable support for Post Thumbnails on posts and pages
  • 5.3 Borra las dos barras que desmarcan la línea que habilita los thumbnails
  • 5.4 Pega debajo de la línea anterior el código que se halla mas abajo
  • 5.5 Graba los cambios en el archivo

Ahora es necesario modificar el archivo que muestra el imprime las entradas en el loop principal agregando el código que muestre la imagen destacada. El código hay que agregarlo en ‘content.php’.

  • 5.6 Abre en tu editor ‘content.php’
  • 5.7 Pega el código de abajo justo luego del cierre de la clase entry-header
  • 5.8 Graba los cambios en el archivo

Paso 6: Agregar Google Fonts

Vamos a utilizar una linda web font provista por Google para el Título del Sitio.

Agregarla a nuestro tema es muy fácil, pues simplemente pones una llamada a la font dentro del Header del sitio web, justo antes de cerrarlo con , y ya la tienes lista para utilizar llamándola desde tu hoja de estilos.

En este paso, solo vamos a agregar la llamada desde el header. La estilización está en el paso Estilizar con CSS

  • 6.1 Abre en tu editor ‘header.php’
  • 6.2 Pega el código de abajo justo antes de la etiqueta de cierre de la cabecera del tema, sobre la llamada al header de WordPress
  • 6.3 Grabar los cambios

Paso 7: Estilizar con CSS

Ahora, vamos a darle a nuestro theme los estilos mínimos necesarios para que se vea bien. Tu puedes luego poner tus propios estilos para darle tu impronta.

Simplemente agrega los estilos al final de la hoja ‘style.css’

  • 7.1 Abre en tu editor ‘style.css’
  • 7.2 Pega el siguiente código al final
  • 7.3 Recuerda grabar los cambios

Paso 7: Diseño Resposive

Aunque ya nuestro tema se adapta a todos los tamaños de pantalla por ser de ancho flexible, nosotros buscamos que su estructura varíe en función del dispositivo en el cual se está navegando, es decir, un diseño resposive.

Para eso, simplemente definimos diferentes estilos para distintos tamaños de pantalla en nuestro ‘style.css’. Para simplificar, nuestro tema seleccionará estilos alternativos cuando la pantalla sea menor de 600px.

  • 7.1 Abre en tu editor ‘style.css’
  • 7.2 Pega el siguiente código al final
  • 7.3 Graba los cambios en el archivo
[level-miembro] Descarga el template completo aqui
[/level-miembro] [/not-level-visitante]

Sumario

En este tutorial aprenderás como crear tus propios temas WordPress fácilmente a través de un ejemplo PASO-A-PASO que crearemos juntos.

Todo está explicado en lenguaje sencillo y en español simple, con capturas de pantalla que te guiarán en cada paso.

El tutorial es de acceso exclusivo para miembros.

No lo dudes y obtén tu membresía, además disfrutarás de mucho más contenido de calidad sobre WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *