Curso de creación de themes desde cero #3. header.php y footer.php

En la tercera clase del curso de creación de themes desde cero, daremos forma tanto al header como al footer de nuestro theme.

Continuamos trabajando con los distintos archivos que conforman nuestro tema creado desde cero. En esta ocasión, nos ocupamos del header y del footer.

Estos dos elementos imprescindibles, aparecen a lo largo y ancho de la web. Gracias a los templates header.php y footer.php, podemos darles forma a nuestro gusto, sin ningún tipo de limitación.

Como ambos templates contarán con dos áreas de menús, lo primero que debemos hacer es crearlas para, posteriormente, ubicarlas donde nos interese. Y una vez creadas las áreas de menús, llega la hora de crear nuestro header.

3.1 - header.php

Si bien es cierto que no debemos empezar "la casa por el tejado", si que podemos hacerlo con un theme de WordPress. En este caso, con el encabezado o header, la parte superior de la web. ¡Empecemos!

Además de darle forma de forma dinámica gracias a distintas funciones nativas de WordPress, le colocaremos una de las dos áreas recién creadas de tal forma que muestre la barra de navegación principal.

3.1 - footer.php

Tras el header, llega el turno del footer. En este caso, nuestro pie de página, cuenta con elementos que, de nuevo, queremos mostrar dinámicamente, como el nombre de nuestra web, o el año en el que nos encontramos.

Además, también deseamos ubicar en dicha sección, la otra de las áreas de menús que hemos creado anteriormente, de tal forma que podamos mostrar el menú con las redes sociales. ¡Vamos allá!

¡Ya lo tenemos! En poco rato, hemos dado forma al header y al footer de nuestro theme creándolos desde cero.

Además, también hemos entendido la lógica de las áreas de menú. Ahora ya sabemos que primero necesitamos crearlas para, después, decidir en qué parte del theme deseamos mostrarlas.

Y, finalmente, con un poco de CSS, hemos conseguido que tanto header como footer luzcan igual que en el diseño del que estamos partiendo.

En la siguiente clase atacaremos otro template fundamental de nuestro theme, el cual dará forma a nuestro blog en el momento en el que seleccionemos una página concreta para mostrarlo.

Recuerda que si tienes alguna duda acerca de lo explicado en esta lección, tienes a tu disposición la pestaña de soporte de la intranet. ¡Nos vemos!

• Curso de creación de themes desde cero #1. Jerarquía de plantillas
• Curso de creación de themes desde cero #2. index.php
• Curso de creación de themes desde cero #3. header.php y footer.php
• Curso de creación de themes desde cero #4. home.php
• Curso de creación de themes desde cero #5. front-page.php
• Curso de creación de themes desde cero #6. page.php
• Curso de creación de themes desde cero #7. single.php
• Curso de creación de themes desde cero #8: sidebar.php y comments.php
• Curso de creación de themes desde cero #9. 404.php y search.php
• Curso de creación de themes desde cero #10. functions.php