Header and footer customization in Wordpress - Step-by-Step Execution

Concept Flow - Header and footer customization

Start WordPress Theme

↓

Locate header.php & footer.php

↓

Edit header.php

↓

Add/Change HTML & PHP for header

↓

Save header.php

↓

Edit footer.php

↓

Add/Change HTML & PHP for footer

↓

Save footer.php

↓

Refresh Website

↓

See updated header & footer

↓

End

This flow shows how WordPress loads header and footer files, how you edit them, save changes, and see updates on the website.

Execution Sample

Wordpress

<?php
// header.php snippet
?><header>
  <h1>My Site Title</h1>
</header>

<?php
// footer.php snippet
?><footer>
  <p>© 2024 My Site</p>
</footer>

This code adds a simple header with a site title and a footer with copyright text.

Execution Table

Step	File Edited	Action	Code Change	Effect on Site
1	header.php	Open file	Locate header.php in theme folder	Ready to edit header
2	header.php	Add HTML	<header><h1>My Site Title</h1></header>	No visible change yet
3	header.php	Save file	Save changes	Header updates on refresh
4	footer.php	Open file	Locate footer.php in theme folder	Ready to edit footer
5	footer.php	Add HTML	<footer><p>© 2024 My Site</p></footer>	No visible change yet
6	footer.php	Save file	Save changes	Footer updates on refresh
7	Browser	Refresh page	Reload website	See new header and footer
8	End	No more edits	Customization complete	Site header and footer customized

💡 Customization stops after saving and refreshing to see changes.

Variable Tracker

Variable	Start	After header edit	After footer edit	Final
header.php content	Original header code	<header><h1>My Site Title</h1></header>	<header><h1>My Site Title</h1></header>	<header><h1>My Site Title</h1></header>
footer.php content	Original footer code	Original footer code	<footer><p>© 2024 My Site</p></footer>	<footer><p>© 2024 My Site</p></footer>
Website display	Old header and footer	Header updated, footer old	Header updated, footer updated	Header and footer updated

Key Moments - 3 Insights

Why do changes in header.php not show up immediately after editing?

Because you must save the file and refresh the browser to see the updated header, as shown in steps 3 and 7 in the execution table.

Can I customize header and footer without touching PHP code?

Some themes offer settings in the WordPress dashboard, but direct customization usually requires editing header.php and footer.php files, as shown in the flow.

What happens if I delete header.php or footer.php?

The site may lose its header or footer display or show errors, so always back up files before editing.

Visual Quiz - 3 Questions

Look at the execution table, what is the effect on the site after step 2?

A No visible change yet

B Footer shows copyright text

C Header shows site title

D Site refreshes automatically

💡 Hint

Check the 'Effect on Site' column for step 2 in the execution table.

At which step do you see both header and footer updated on the website?

A Step 5

B Step 7

C Step 6

D Step 3

💡 Hint

Look for the step where the browser refreshes and shows both changes.

If you forget to save footer.php after editing, what will happen?

A Footer updates on refresh

B Header disappears

C Footer remains unchanged

D Site crashes

💡 Hint

Refer to the importance of saving files before refreshing in the execution table steps 5 and 6.

Concept Snapshot

Header and footer customization in WordPress:
- Edit header.php and footer.php files in your theme folder.
- Add or change HTML/PHP code for header/footer content.
- Save files and refresh your website to see changes.
- Always back up files before editing.
- Changes appear only after saving and refreshing.

Full Transcript

In WordPress, the header and footer are controlled by separate files named header.php and footer.php inside your theme folder. To customize them, you open these files and add or change the HTML and PHP code that defines what appears at the top and bottom of your site. After editing, you save the files and refresh your website in the browser to see the changes. This process is shown step-by-step in the execution table, starting from opening the files, editing, saving, and finally refreshing the page to view the updated header and footer. Remember, changes won't appear until you save and refresh. Also, be careful to back up your files before making edits to avoid losing important code. This method lets you personalize your site's look by controlling the header and footer content directly.