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.

Form button for two forms

How to Align Buttons for Two Different Forms in HTML

When designing a web interface, you often run into a layout challenge where two buttons need to sit side-by-side for visual consistency, but they actually need to trigger two completely different actions or forms. A common example is having a "Save" button for a data entry form and a "Back" or "Cancel" button that redirects the user elsewhere.

Recently, I needed to line up two form submit buttons for two different forms. To find the most efficient modern solution, I consulted several AI tools, including Copilot, Gemini, and Perplexity. Interestingly, the results were a bit of a mixed bag, proving that even advanced AI can struggle with specific UI layout requirements.

The AI Recommendations

Copilot's suggestion involved using the formaction attribute. While formaction is a valid HTML5 attribute that allows a button to override the initial form's action URL, it keeps both buttons tied to the same form data. If you need two entirely separate form structures, this isn't the ideal path.

Gemini's suggestion was more traditional: creating two separate forms. However, the problem with this approach is the visual layout. By default, HTML <form> elements are block-level elements. If you put one button in Form A and another in Form B, they will stack on top of each other unless you apply significant CSS styling to make the forms inline or flexbox-compatible.

Perplexity provided a similar result to Copilot, focusing on one form with multiple buttons, which didn't quite capture the need for two independent forms.

The Problem: Why Simple Forms Fail the Layout Test

The struggle here is the "Parent-Child" relationship in HTML. Usually, a button must be a child of a <form> to submit it. If you want two buttons next to each other, they usually need to be in the same container. But if they belong to different forms, they are usually forced into different containers, breaking your CSS alignment.

My Solution: Using the HTML5 "form" Attribute

After some trial and error, I found the most elegant solution. It uses a powerful but often overlooked feature of HTML5: the form attribute.

The form attribute allows you to associate a <button> (or <input>) with any form on the page, regardless of where that button is physically located in the HTML code. This means you can physically place a button inside "Form A" but technically link it to "Form B" using its ID.Recently need line up two form submit buttons for two different forms. So I asked Copilot and Gemini. also the perplexity.

Here are the results:

Copilot:

<form>
    <!-- Form 1 content -->
    <button type="submit" formaction="/action_one">Submit Form 1</button>
    <!-- Form 2 content -->
    <button type="submit" formaction="/action_two">Submit Form 2</button>
</form>

Gemini:

<form action="form1_action.php" method="post">
  <input type="submit" value="Submit Form 1">
</form>

<form action="form2_action.php" method="post">
  <input type="submit" value="Submit Form 2">
</form>

Perplexity: - no two forms
<form action="/DEFAULT_URL" method="post">
  <!-- Input fields here -->
  <button type="submit">BUTTON 1</button>
  <button type="submit" formaction="/URL2">BUTTON 2</button>
</form>
So looks not what I want, or I did not prompt properly? Any way, what I want is:
<form ...>
    ...
    ...
    <button ...>Save</button>
    <button form="back-form"...>Back</button>
</form>
<form id="back-form" ...></form>
sighing...

Bootstrap

Bootstrap, very cool, a popular front-end framework for building responsive and visually appealing websites.

d-inline is a utility class that sets the display property of an element to inline.

• Margin and Padding:

  • m-1, m-2, ... m-5: Margin classes for spacing (1 to 5).
  • p-1, p-2, ... p-5: Padding classes for spacing (1 to 5).
  • mx-3: Horizontal margin.
  • px-3: Horizontal padding.

• Text Alignment:

  • text-center: Center-align text.
  • text-right: Right-align text.

• Background and Color:

  • bg-primary, bg-secondary, ...: Background color classes.
  • text-primary, text-secondary, ...: Text color classes.

• Buttons:

• btn, btn-primary, ...: Bootstrap button classes.
• btn-outline-primary: Outline button with primary color.
• 
  

Bootstrap, Here is the Documentation site for it: https://getbootstrap.com/docs/5.0/utilities/api/

WordPress - Useful Links

Very good WordPress tutorials: https://www.wpbeginner.com/

Display posts plugin and tutorials:

https://displayposts.com/tutorials/

https://wordpress.org/plugins/display-post-types/

WordPress - PHP

Making new  menu and display location:

1. Code Snippets » Add Snippet 

<?php

    function wpb_top_right_menu() 

{

        register_nav_menu('top-right-menu',__( 'Top Right Menu' ));

}

add_action( 'init', 'wpb_top_right_menu' );?>

2. Appearance » Theme File Editor » Header(typically)

wp_nav_menu( array( 'theme_location'=>'top-right-menu', 'container_class'=>'top-right-class' ) );

WordPress - CSS

I am helping alumnus to build a WordPress website, quite interesting.

Additional CSS: good way to custom the style.

Remove the page title:

.bread_crumb

{ display: none; }

For custom top right menu:

div.top-right-class ul {

float:right;

    margin:20px 0px 20px 0px;

    list-style-type: none;

    list-style: none;

    list-style-image: none;

    text-align:right;

    display:inline-block;

}

div.top-right-class li {

    padding: 0px 20px 0px 0px;

    display: inline-block;

}  

div.top-right-class a { color:blue; }

Remove 1st letter drop cap:

.entry-content > p:first-of-type:first-letter{

font-size: 100%;

          line-height: 1; 

margin-right:-10px;

Display posts style:

.display-posts-listing .listing-item {    clear: both;  }

.display-posts-listing img {

    float: left;

    margin: 0 10px 10px 0;

}