Understanding WordPress Site Structure

Understanding WordPress Site Structure: Templates, Patterns, Headers & Footers

When you build a WordPress site using a block theme, you're working with three layers that can easily confuse even experienced users:

Templates — the full page layouts applied to different page types

Template Parts — reusable sections like headers and footers

Patterns— pre-designed block arrangements you can insert anywhere

Understanding how these three layers interact is the key to making site-wide changes confidently.

Templates: The Page Blueprint

Templates define the overall structure of a page type. You can find them under Appearance → Editor → Templates.

Common templates include:

Index — the default blog listing page

Single — individual blog posts

Page — static pages

Front Page — home page

Superb Addons Template Page — a custom template added by plugins like Superb Addons

Here's the crucial thing to understand: each template can have its own version of the header and footer. If you edit the footer inside one template, it won't automatically update the footer in other templates. This is a common source of confusion — you make a change and it works on one page type but not others.

Template Parts: Shared Header & Footer

Template Parts are the solution to the above problem. Rather than each template having its own unique header and footer, they can all reference a single shared Template Part.

You can find these under Appearance → Editor → Patterns → All Template Parts, where you'll typically see:

Header(1 part)

Footer (1 part)

General (other reusable parts)

When a template references a shared Footer template part, any changes you make to that Footer part will apply across all templates that use it — giving you true site-wide control.

The Catch: Synced vs. Not Synced

This is where things get tricky. WordPress patterns and template parts can be either synced or not synced:

Synced (default for Template Parts):

- Changes made in one place update everywhere the part is used

- This is how the Header and Footer template parts work by default

- Ideal for global elements like navigation, branding, and social links

Not Synced:

- Each instance is independent

- Changes to one copy don't affect others

- Useful when you want variations of a pattern on different pages

If you're editing a footer and your changes aren't showing up site-wide, the most likely reason is that you're editing a template-specific footer copy rather than the shared Footer template part.

A Real-World Example: The Social Icons Problem

Here's a scenario that illustrates exactly how this confusion plays out in practice.

A site had a footer with 5 social icons (X, YouTube, Instagram, LinkedIn, Facebook) visible in the editor, but the live site only showed 3. After investigation, two issues were found:

1. LinkedIn and Facebook had no real URLs set — WordPress hides social icons with empty URLs

2. The wrong footer was being edited — changes were being saved to a template-specific footer, not the global Footer template part

The fix required going to Patterns → Footer (the actual shared template part) and updating the social icon URLs there, not inside any individual page template.

How to Edit Your Header and Footer Correctly

Follow this path to make sure your changes apply site-wide:

1. Go to Appearance → Editor

2. In the left panel, click Patterns

3. Click All template parts

4. Select Footer (or Header)

5. Click to open and edit

6. Make your changes

7. Click Save

Changes here will propagate to every page on your site that uses that template part.

Plugin Complications: Superb Addons Example

Plugins like Superb Addons add their own layer of complexity. They may:

- Create their own Template Page with a built-in header/footer

- Lock certain elements so only premium users can edit them

- Show a footer preview that looks like your global footer but is actually a separate copy

If you're using such a plugin and find your edits aren't working, check whether you're editing the plugin's template or the theme's actual shared template part. The visual editor may look identical, but they're different files.

Social Links: A Note on `opensInNewTab`

When adding social icon blocks in the WordPress block editor, you may want links to open in a new tab. The block code looks like this:

```

<!-- wp:social-links {"opensInNewTab":true} -->

  <!-- wp:social-link {"url":"https://...","service":"youtube"} /-->

<!-- /wp:social-links -->

```

Whether `opensInNewTab` on the parent block cascades to child icons depends on your WordPress version and theme. In some setups it works at the parent level; in others each child `wp:social-link` needs its own `"opensInNewTab":true`. If links aren't opening in new tabs, try adding the attribute to individual icons as well. Always test on the live site rather than assuming.

Quick Reference

| What you want to do | Where to go |

|---|---|

| Change header/footer site-wide | Appearance → Editor → Patterns → Template Parts → Header/Footer |

| Change layout of a specific page type | Appearance → Editor → Templates → [template name] |

| Add a reusable design section | Appearance → Editor → Patterns |

| Check if a pattern is synced | Look for the sync icon (circular arrows) in the block toolbar |

| Edit social icon links | Click each icon in the footer editor → update URL in the popup field |

Once you understand this layered structure, managing your WordPress site becomes much more predictable — and far less frustrating.