Header and footer customization in Wordpress - Mini Project: Build & Apply

Header and Footer Customization 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 footer with contact info and social media links.

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

📋 What You'll Learn

Create a header.php file with a logo image and a navigation menu

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

Use WordPress functions wp_nav_menu() and get_template_directory_uri()

Include the header and footer in the main theme file index.php

💡 Why This Matters

🌍 Real World

Customizing headers and footers is a common task when building WordPress themes for clients or personal projects. It helps create a unique brand identity and user experience.

💼 Career

WordPress developers often need to create or modify theme template files and register menus to meet design requirements and client needs.

1

Create the header.php file with logo and navigation menu

Create a file called header.php. Inside it, add a <header> element. Insert an <img> tag with the source set to get_template_directory_uri() . '/images/logo.png' and alt text 'Bakery Logo'. Below the image, add a WordPress navigation menu using wp_nav_menu() with the theme location set to 'primary'.

Wordpress

Need a hint?

Use get_template_directory_uri() to get the theme folder URL for the logo image. Use wp_nav_menu() with 'theme_location' => 'primary' to show the menu.

2

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

Create a file called footer.php. Inside it, add a <footer> element. Add a paragraph with the text 'Contact us: 123 Bakery St, Phone: [phone]'. Below that, add an unordered list with three list items containing links to Facebook, Twitter, and Instagram with hrefs '#facebook', '#twitter', and '#instagram' respectively.

Wordpress

Need a hint?

Use semantic HTML tags like <footer>, <p>, and <ul> with <li> for the list of social links.

3

Include header and footer in index.php

Create a file called index.php. At the top, include the header by calling get_header();. At the bottom, include the footer by calling get_footer();. Between them, add a <main> element with a heading <h1> that says 'Welcome to Our Bakery!'.

Wordpress

Need a hint?

Use get_header(); and get_footer(); to include the header and footer templates. Wrap the main content in a <main> tag.

4

Register the primary menu location in functions.php

Create a file called functions.php. Add a function named bakery_setup that calls register_nav_menus() with an array registering a menu location with key 'primary' and value 'Primary Menu'. Hook this function to the 'after_setup_theme' action using add_action().

Wordpress

<?php
// functions.php

// Your code here

Need a hint?

Use register_nav_menus() inside a setup function and hook it to after_setup_theme to enable the menu location.