Template parts in Wordpress - Performance & Optimization

Performance: Template parts

MEDIUM IMPACT

Template parts affect page load speed by controlling how reusable sections of a page are loaded and rendered.

Including reusable page sections in a WordPress theme

Wordpress

<?php
ob_start();
get_template_part('header');
$header_html = ob_get_clean();
echo $header_html;
echo $header_html;
echo $header_html;
?>

Load the template part once, store output, and reuse it to avoid repeated file reads and processing.

📈 Performance GainSingle file read and PHP execution, reducing server load and improving LCP.

Including reusable page sections in a WordPress theme

Wordpress

<?php get_template_part('header'); ?>
<?php get_template_part('header'); ?>
<?php get_template_part('header'); ?>

Calling the same template part multiple times causes repeated file reads and PHP processing, slowing page generation.

📉 Performance CostTriggers multiple file system reads and PHP executions, increasing server response time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated get_template_part calls	No extra DOM nodes but slower HTML generation	No direct reflows but delayed HTML delivery	Normal paint cost	[X] Bad
Single get_template_part call with output reuse	No extra DOM nodes, faster HTML generation	No reflows, faster HTML delivery	Normal paint cost	[OK] Good

Rendering Pipeline

Template parts are processed by PHP on the server before sending HTML to the browser. Efficient use reduces server processing and speeds up HTML delivery.

→Server-side PHP processing

→HTML generation

→Browser rendering

⚠️ BottleneckServer-side PHP file inclusion and processing

Core Web Vital Affected

LCP

Template parts affect page load speed by controlling how reusable sections of a page are loaded and rendered.

Optimization Tips

1Avoid calling get_template_part multiple times for the same content without caching.

2Cache or store template part output if reused multiple times on a page.

3Efficient template part usage improves server response and LCP.

Performance Quiz - 3 Questions

What is a performance downside of calling get_template_part multiple times for the same part?

A It increases CSS selector complexity

B Repeated file reads and PHP processing slow server response

C It causes extra DOM nodes in the browser

D It triggers layout shifts in the browser

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check server response time and HTML size.

What to look for: Look for faster server response and smaller HTML size indicating efficient template part usage.

Practice

1. What is the main purpose of using get_template_part() in WordPress themes?

easy

A. To create database tables

B. To register new custom post types

C. To include reusable template parts and keep code organized

D. To enqueue styles and scripts

Solution

1. Step 1: Understand the function role

   get_template_part() is designed to include reusable parts of a theme, like headers or footers.

2. Step 2: Compare with other options

   Registering post types, enqueuing scripts, and creating tables are unrelated to template parts.

3. Final Answer:

   To include reusable template parts and keep code organized -> Option C

4. Quick Check:

   Template parts = reusable code pieces [OK]

Hint: Remember: template parts reuse code pieces [OK]

Common Mistakes:

• Confusing template parts with post type registration
• Thinking it manages scripts or styles
• Assuming it handles database operations

2. Which of the following is the correct syntax to include a template part named 'content' with a specific variation 'single'?

easy

A. get_template_part('content', 'single');

B. get_template_part('single', 'content');

C. get_template_part('content-single');

D. get_template_part('content', single);

Solution

1. Step 1: Recall function parameters

   get_template_part() takes two string arguments: slug and optional name.

2. Step 2: Match correct order and syntax

   The correct call is get_template_part('content', 'single'); with both parameters as strings.

3. Final Answer:

   get_template_part('content', 'single'); -> Option A

4. Quick Check:

   Slug then name as strings [OK]

Hint: Use two strings: slug first, then name [OK]

Common Mistakes:

• Passing combined slug and name as one string
• Swapping slug and name order
• Forgetting quotes around name

3. Given the code snippet:

get_template_part('header');

What file will WordPress try to load first?

medium

A. header.php

B. header-header.php

C. header-single.php

D. header-template.php

Solution

1. Step 1: Understand default file naming

   When only slug is given, WordPress looks for {slug}.php file.

2. Step 2: Apply to example

   Slug is 'header', so WordPress loads header.php.

3. Final Answer:

   header.php -> Option A

4. Quick Check:

   Slug only loads slug.php [OK]

Hint: Slug alone loads slug.php file [OK]

Common Mistakes:

• Expecting a suffix like '-header' automatically
• Confusing with named template parts
• Assuming different file extensions

4. What is wrong with this code snippet?

get_template_part('footer', single);

medium

A. No issues, code works fine

B. Wrong function name, should be get_template_parts

C. Footer template parts cannot have a name

D. Missing quotes around 'single' causing a syntax error

Solution

1. Step 1: Check parameter types

   Both slug and name must be strings, so 'single' needs quotes.

2. Step 2: Identify error cause

   Without quotes, single is treated as a constant or variable, causing syntax error.

3. Final Answer:

   Missing quotes around 'single' causing a syntax error -> Option D

4. Quick Check:

   Strings need quotes [OK]

Hint: Always quote slug and name strings [OK]

Common Mistakes:

• Omitting quotes around name parameter
• Using wrong function name
• Thinking named parts are not allowed

5. You want to create a reusable sidebar template part with two variations: 'left' and 'right'. Which folder structure and code usage is correct to achieve this?

hard

A. Files: sidebar-left.php, sidebar-right.php inside /parts/ folder; Code: get_template_part('sidebar', 'left');

B. Files: sidebar-left.php, sidebar-right.php in theme root; Code: get_template_part('sidebar', 'left');

C. Files: sidebar.php only; Code: get_template_part('sidebar-left');

D. Files: sidebar-left.php, sidebar-right.php in theme root; Code: get_template_part('sidebar-left');

Solution

1. Step 1: Understand file naming for variations

   Named template parts use {slug}-{name}.php in theme root.

2. Step 2: Match code to file structure

   Calling get_template_part('sidebar', 'left'); loads sidebar-left.php.

3. Step 3: Evaluate other options

   B places files in subfolder without adjusting slug to include path; C uses only one file; D uses combined slug-name as one string incorrectly.

4. Final Answer:

   Files: sidebar-left.php, sidebar-right.php in theme root; Code: get_template_part('sidebar', 'left'); -> Option B

5. Quick Check:

   Slug-name files in root with two-string call [OK]

Hint: Use slug-name.php files in root, call with two strings [OK]

Common Mistakes:

• Placing files in subfolders without adjusting code
• Passing combined slug-name as one string
• Using only one file for multiple variations