Custom headers and footers in Wordpress - Performance & Optimization

Performance: Custom headers and footers

MEDIUM IMPACT

This affects the page load speed and visual stability by controlling how header and footer content is loaded and rendered.

Adding custom headers and footers to a WordPress theme

Wordpress

<?php wp_enqueue_style('custom-header-style', get_template_directory_uri() . '/css/header.css'); ?>
<?php wp_enqueue_script('custom-header-script', get_template_directory_uri() . '/js/header.js', [], null, true); ?>
<?php get_header(); ?>
<header>
  <h1>My Site</h1>
</header>
<?php get_footer(); ?>

External CSS and JS are loaded asynchronously or deferred, reducing render blocking and layout shifts.

📈 Performance GainNon-blocking load, single reflow, reduces CLS significantly

Adding custom headers and footers to a WordPress theme

Wordpress

<?php get_header(); ?>
<!-- Inline styles and scripts inside header -->
<header>
  <style>body {background: #fff;}</style>
  <script>console.log('header loaded');</script>
  <h1>My Site</h1>
</header>
<?php get_footer(); ?>

Inline styles and scripts block rendering and cause layout shifts, increasing load time and CLS.

📉 Performance CostBlocks rendering for 100-200ms, triggers multiple reflows, increases CLS

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline styles/scripts in header/footer	Low DOM nodes	Multiple reflows due to blocking	High paint cost from layout shifts	[X] Bad
External CSS/JS enqueued properly	Low DOM nodes	Single reflow	Low paint cost with stable layout	[OK] Good

Rendering Pipeline

Custom headers and footers load CSS and JS resources that affect style calculation and layout. Inline blocking code delays paint and causes layout shifts.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckStyle Calculation and Layout due to blocking inline styles/scripts

Core Web Vital Affected

LCP, CLS

This affects the page load speed and visual stability by controlling how header and footer content is loaded and rendered.

Optimization Tips

1Avoid inline styles and scripts in headers and footers to prevent render blocking.

2Use wp_enqueue_style and wp_enqueue_script to load resources efficiently.

3Ensure header and footer content is stable to minimize layout shifts and improve CLS.

Performance Quiz - 3 Questions

What is a performance drawback of using inline styles and scripts in WordPress headers?

A They block rendering and cause layout shifts

B They reduce the number of HTTP requests

C They improve caching efficiency

D They automatically defer loading

DevTools: Performance

How to check: Record a page load, then analyze the Main thread for long tasks and look for style recalculations and layout shifts during header/footer rendering.

What to look for: Look for long blocking times caused by inline styles/scripts and layout shift markers in the Experience section.

Practice

1. What is the main purpose of using wp_head and wp_footer hooks in WordPress?

easy

A. To change the site's main menu items

B. To add custom content or scripts to the header and footer sections of a site

C. To create new pages in WordPress

D. To delete default WordPress themes

Solution

1. Step 1: Understand the role of hooks

   Hooks like wp_head and wp_footer allow adding extra code to header and footer areas.

2. Step 2: Identify their use

   They are used to insert custom HTML, CSS, or JavaScript in those sections without editing theme files directly.

3. Final Answer:

   To add custom content or scripts to the header and footer sections of a site -> Option B

4. Quick Check:

   wp_head and wp_footer add content to header/footer [OK]

Hint: Remember hooks add code to header/footer areas [OK]

Common Mistakes:

• Thinking hooks create pages
• Confusing hooks with menu settings
• Assuming hooks delete themes

2. Which of the following is the correct way to add a custom script to the footer using wp_footer hook in your theme's functions.php?

easy

A. add_action('wp_footer', function() { echo ''; });

B. add_action('wp_head', function() { echo ''; });

C. add_filter('wp_footer', function() { echo ''; });

D. add_action('footer', function() { echo ''; });

Solution

1. Step 1: Identify correct hook and function

   The wp_footer hook is used with add_action to add code to the footer.

2. Step 2: Check syntax correctness

   add_action('wp_footer', function() { echo ''; }); uses add_action('wp_footer', function() { ... }); which is correct syntax to add inline script.

3. Final Answer:

   add_action('wp_footer', function() { echo '<script>alert("Hi")</script>'; }); -> Option A

4. Quick Check:

   Use add_action with wp_footer for footer scripts [OK]

Hint: Use add_action with wp_footer to add footer code [OK]

Common Mistakes:

• Using add_filter instead of add_action
• Using wp_head instead of wp_footer for footer scripts
• Using non-existent 'footer' hook

3. Given this code in functions.php:

add_action('wp_head', function() { echo '<meta name="custom" content="123">'; });

What will this code do when the site loads?

medium

A. Add a meta tag inside the footer section

B. Add a visible text 'custom 123' at the top of the page

C. Cause a syntax error and break the site

D. Add a meta tag with name 'custom' and content '123' inside the <head> section

Solution

1. Step 1: Understand wp_head hook behavior

   The wp_head hook inserts code inside the <head> tag of the HTML document.

2. Step 2: Analyze the echo statement

   The code outputs a meta tag with name 'custom' and content '123' which will be placed inside <head>.

3. Final Answer:

   Add a meta tag with name 'custom' and content '123' inside the <head> section -> Option D

4. Quick Check:

   wp_head adds code inside <head> [OK]

Hint: wp_head adds code inside head tag, not visible on page [OK]

Common Mistakes:

• Thinking it adds content to footer
• Expecting visible text on page
• Assuming code causes error

4. You added this code to your theme's functions.php:

add_action('wp_footer', function() { echo '<div>Footer Text</div>'; });

But the footer text does not appear on your site. What is the most likely reason?

medium

A. The theme does not call wp_footer() function in its footer.php file

B. You used add_action instead of add_filter

C. The code should be added to wp_head hook instead

D. You need to clear browser cache to see changes

Solution

1. Step 1: Check theme support for wp_footer

   The wp_footer() function must be called in the theme's footer.php to output footer hook content.

2. Step 2: Understand why content is missing

   If wp_footer() is missing, the hook callback won't run and content won't show.

3. Final Answer:

   The theme does not call wp_footer() function in its footer.php file -> Option A

4. Quick Check:

   wp_footer() call needed to show footer hook content [OK]

Hint: Ensure theme calls wp_footer() to display footer hook content [OK]

Common Mistakes:

• Confusing add_action with add_filter
• Adding footer code to wp_head hook
• Ignoring theme template structure

5. You want to add a custom header message only on the homepage and a footer copyright notice on all pages. Which is the best way to do this in your theme's functions.php?

hard

A. Use add_filter instead of add_action for both hooks

B. Add both messages inside wp_footer hook without conditions

C. Use add_action('wp_head', function() { if (is_front_page()) echo '<div>Welcome Home!</div>'; }); and add_action('wp_footer', function() { echo '<div>© 2024 MySite</div>'; });

D. Add both messages inside wp_head hook without conditions

Solution

1. Step 1: Use conditional check for homepage header

   Use is_front_page() inside wp_head hook to add header message only on homepage.

2. Step 2: Add footer message on all pages

   Use wp_footer hook without condition to add footer copyright on every page.

3. Final Answer:

   Use add_action('wp_head', function() { if (is_front_page()) echo '<div>Welcome Home!</div>'; }); and add_action('wp_footer', function() { echo '<div>© 2024 MySite</div>'; }); -> Option C

4. Quick Check:

   Use conditional in wp_head, unconditional in wp_footer [OK]

Hint: Use is_front_page() condition inside wp_head hook [OK]

Common Mistakes:

• Adding all messages unconditionally
• Using add_filter instead of add_action
• Putting footer message in wp_head hook