Custom headers and footers in Wordpress - Mini Project: Build & Apply

Custom Headers and Footers in WordPress

📖 Scenario: You are building a simple WordPress theme for a local bakery website. The bakery wants a custom header with their logo and navigation menu, and a custom footer with contact info and social media links.

🎯 Goal: Create a WordPress theme with a custom header and footer using header.php and footer.php files. The header should include the bakery's logo and a navigation menu. The footer should include contact information and social media links.

📋 What You'll Learn

Create a header.php file with a logo image and a navigation menu using wp_nav_menu().

Create a footer.php file with contact information and social media links.

Use WordPress functions get_header() and get_footer() in the main template file index.php.

Ensure semantic HTML5 structure with <header> and <footer> tags.

💡 Why This Matters

🌍 Real World

Custom headers and footers are essential for branding and navigation in WordPress websites. This project shows how to build them properly in a theme.

💼 Career

Knowing how to create and customize headers and footers is a key skill for WordPress theme developers and web designers.

1

Create the header.php file with logo and navigation menu

Create a file called header.php that contains a <header> element. Inside it, add an <img> tag with src="/wp-content/themes/your-theme/images/logo.png" and alt="Bakery Logo". Below the image, add a navigation menu using wp_nav_menu() with the argument array('theme_location' => 'primary').

Wordpress

# Create header.php with header tag, logo image, and wp_nav_menu call

    

Need a hint?

Use the <header> tag for the header section. Use wp_nav_menu() to display the menu registered as 'primary'.

2

Create the footer.php file with contact info and social links

Create a file called footer.php that contains a <footer> element. Inside it, add a paragraph with the text Contact us at: [e-mail]. Below that, add an unordered list with three list items containing links to Facebook, Twitter, and Instagram with hrefs https://facebook.com/bakery, https://twitter.com/bakery, and https://instagram.com/bakery respectively.

Wordpress

    
     'primary')); ?>



    

Need a hint?

Use the <footer> tag for the footer section. Add contact info in a paragraph and social links in a list.

3

Use get_header() and get_footer() in index.php

In the index.php file, add the PHP function calls get_header(); at the top and get_footer(); at the bottom to include the header and footer templates.

Wordpress

Need a hint?

Use get_header(); to include the header and get_footer(); to include the footer in your main template.

4

Add semantic HTML5 structure and register the menu

In your theme's functions.php file, register a navigation menu with the location name 'primary' using register_nav_menus(). Also, ensure your header.php and footer.php use semantic HTML5 tags <header> and <footer> respectively.

Wordpress

<?php
// Register the primary menu here

// Your code here

Need a hint?

Use register_nav_menus() inside a function hooked to after_setup_theme to register your menu location.