The Header & Footer placement feature allows you to add custom HTML content to the top (header) and bottom (footer) of your subdomain pages. This powerful feature enables site-wide customization without editing theme files.

Understanding Header & Footer Placements

Purpose: Insert custom code, content, or functionality at the top and/or bottom of pages across your subdomains.

Common Use Cases:

For Headers:

• Sticky navigation menus
• Announcement bars (promotions, important updates)
• Trust badges and certifications
• Contact information bars
• Social media icon rows
• Special alert messages
• Custom branding elements

For Footers:

• Copyright notices
• Privacy policy and terms of service links
• Sitemap navigation
• Newsletter signup forms
• Social media icons and links
• Business contact details
• Additional navigation links
• Disclaimer text
• Trust seals and security badges

Key Advantages:

• No theme file editing required
• Easy to update across multiple subdomains
• Can target specific subdomains or posts
• Separate control for header and footer
• Supports full HTML, CSS, and JavaScript

Navigate to Content Manipulation → Header Footers to access header and footer management.

The Header Footer Interface

The system has two main tabs:

1. Header/Footer Placements Tab: View and manage all placements 2. Add/Edit Placement Tab: Create or modify header/footer combinations

Creating Header & Footer Placements

Step 1: Navigate to Add/Edit Placement

Click the Add/Edit Placement tab within the Header Footers section.

Step 2: Basic Configuration

The placement form contains several configuration sections:

Essential Settings

Title (Required):

• Enter a descriptive name for this header/footer combination
• Helps identify placement in dashboard
• Example: “Main Site Header/Footer,” “Product Subdomain Headers,” “Announcement Bar – Holiday Sale”

Description (Optional):

• Add notes about placement purpose
• Document what this header/footer does
• Example: “Sticky announcement bar with 20% off promotion + standard footer with social links”

Tags (Optional):

• Add organizational tags
• Filter placements by tag later
• Example: “promotion,” “navigation,” “legal”

Status:

• Inactive (default): Saved but not displayed
• Active: Live and displaying on targeted pages

Important: Always verify status before expecting content to appear. New placements default to Inactive.

Adding Header Content

Header HTML section provides two content entry options:

Code Editor (default):

• Full HTML, CSS, and JavaScript support
• Syntax highlighting for easier coding
• Direct code entry and editing

Visual Editor:

• WYSIWYG interface for non-coders
• Basic formatting toolbar
• Limited compared to code editor

Toolbar Options:

• Add Media: Insert images from media library
• Instant Images: Quick image insertion
• Formatting tools: Bold, italic, lists, alignment, links, etc.
• Visual/Code tabs: Switch between views

Example Header Code – Sticky Announcement Bar:

<div style=”background-color: #ff6b6b; color: white; padding: 15px; text-align: center; position: sticky; top: 0; z-index: 9999; font-family: Arial, sans-serif;”>

  <strong>🎉 Limited Time Offer: Get 20% Off All Plans!</strong>

  <a href=”/special-offer” style=”color: white; text-decoration: underline; margin-left: 15px;”>Learn More →</a>

</div>

 

What this creates:

• Red background sticky bar
• Stays at top while scrolling
• White text with offer message
• Link to special offer page
• Always visible above content

Example Header Code – Navigation Menu:

<nav style=”background: #333; padding: 10px 0;”>

  <div style=”max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;”>

    <div style=”color: white; font-size: 24px; font-weight: bold;”>YourBrand</div>

    <div>

      <a href=”/” style=”color: white; margin: 0 15px; text-decoration: none;”>Home</a>

      <a href=”/about” style=”color: white; margin: 0 15px; text-decoration: none;”>About</a>

      <a href=”/services” style=”color: white; margin: 0 15px; text-decoration: none;”>Services</a>

      <a href=”/contact” style=”color: white; margin: 0 15px; text-decoration: none;”>Contact</a>

    </div>

  </div>

</nav>

 

Example Header Code – Trust Badge Bar:

<div style=”background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 10px; text-align: center;”>

  <span style=”margin: 0 20px;”>✓ Trusted by 10,000+ Customers</span>

  <span style=”margin: 0 20px;”>✓ A+ BBB Rating</span>

  <span style=”margin: 0 20px;”>✓ 30-Day Money-Back Guarantee</span>

  <span style=”margin: 0 20px;”>✓ Secure Checkout</span>

</div>

 

Adding Footer Content

Footer HTML section works identically to header:

Code Editor Access:

• Same toolbar and options as header
• Full HTML/CSS/JavaScript support
• Add Media and formatting tools

Example Footer Code – Comprehensive Footer:

<footer style=”background: #2c3e50; color: white; padding: 40px 20px; margin-top: 50px;”>

  <div style=”max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;”>

    

    <!– Column 1: About –>

    <div>

      <h3 style=”margin-bottom: 15px;”>About Us</h3>

      <p style=”line-height: 1.6;”>Your trusted source for expert advice and quality products since 2020.</p>

    </div>

    

    <!– Column 2: Quick Links –>

    <div>

      <h3 style=”margin-bottom: 15px;”>Quick Links</h3>

      <div style=”display: flex; flex-direction: column;”>

        <a href=”/privacy-policy” style=”color: #ecf0f1; margin: 5px 0; text-decoration: none;”>Privacy Policy</a>

        <a href=”/terms” style=”color: #ecf0f1; margin: 5px 0; text-decoration: none;”>Terms of Service</a>

        <a href=”/contact” style=”color: #ecf0f1; margin: 5px 0; text-decoration: none;”>Contact Us</a>

        <a href=”/sitemap” style=”color: #ecf0f1; margin: 5px 0; text-decoration: none;”>Sitemap</a>

      </div>

    </div>

    

    <!– Column 3: Newsletter –>

    <div>

      <h3 style=”margin-bottom: 15px;”>Stay Updated</h3>

      <p style=”margin-bottom: 10px;”>Subscribe to our newsletter</p>

      <input type=”email” placeholder=”Your email” style=”width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 4px;”>

      <button style=”width: 100%; padding: 10px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;”>Subscribe</button>

    </div>

  </div>

  

  <!– Copyright –>

  <div style=”text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #34495e;”>

    <p>© 2025 YourBrand. All rights reserved.</p>

  </div>

</footer>

 

Example Footer Code – Simple Footer:

<div style=”background: #333; color: white; text-align: center; padding: 20px; margin-top: 40px;”>

  <p style=”margin: 0;”>© 2025 %domain% | <a href=”/privacy” style=”color: #3498db;”>Privacy Policy</a> | <a href=”/terms” style=”color: #3498db;”>Terms</a></p>

  <p style=”margin: 10px 0 0 0; font-size: 14px; color: #aaa;”>Enjoy exclusive offers! Follow us on 

    <a href=”https://facebook.com/yourpage” style=”color: #3498db;”>Facebook</a> | 

    <a href=”https://twitter.com/yourpage” style=”color: #3498db;”>Twitter</a>

  </p>

</div>

 

Pro Tip: Use shortcodes like %domain% or %subdomain% if supported to dynamically insert site-specific information.

Location Targeting

After adding header and footer code, configure where they appear:

Location Dropdown Options:

1. Whole Site

• Header/footer appear across entire installation
• Applies to main domain AND all subdomains
• Use for: Universal branding, legal footers

2. Root Domain Only

• Header/footer appear only on main domain
• Subdomains are excluded
• Use for: Main site-specific navigation, primary branding

3. All Subdomains

• Header/footer appear on all subdomains
• Main domain is excluded
• Use for: Subdomain-specific branding, network-wide announcements

4. Selected Subdomains

• Choose specific subdomains for header/footer
• Select Subdomains box appears
• Use Ctrl+Click (Windows) or Cmd+Click (Mac) for multiple
• Use for: Niche-specific headers, targeted promotions

5. Selected Posts

• Target individual articles
• Most granular control
• Same filtering options as Static Blocks:
  • Keyword search
  • Date range
  • Subdomain selection
  • Post selection

Example from screenshot: Location: “Subdomain Wide” (appears as option)

Submitting the Placement

After configuring all settings:

1. Review header and footer code
2. Verify location targeting
3. Set Status to Active (if ready)
4. Click Submit button

The header/footer placement saves and activates if status is set to Active.

Header/Footer Placements Dashboard

Navigate to Header/Footer Placements tab to manage all placements.

Dashboard displays:

• Title: Placement identifier
• Tags: Assigned tags
• Status: Active (green indicator) or Inactive (red indicator)
• Location: Where placement applies (e.g., “Subdomain Wide”)
• Header: Preview of header content (first line)
• Footer: Preview of footer content (first line)
• Created At: Date and time created
• Edit: Blue button to modify
• Delete: Red button to remove

Example from screenshot: “TSD Tutorial 2026- Header Footer Placement” | Active (green) | Subdomain Wide | “Limited Time Offer! Get 20% off on all plans of Turbosubdomain! Learn More” | “Enjoy exclusive offers before you leave. Check Now” | 2025-12-12 12:07:48 GMT

Display Options:

• Show dropdown: Entries per page (10, 25, 50, etc.)
• Filter by Tags: Search placements by tag
• Search: Find placements by title
• Add New Placement button: Create new placement

Showing status: “Showing 1 to 1 of 1 entries” indicates total placements

Verifying Header and Footer Display

After creating a placement, test it:

Step 1: Navigate to an article or page that should display the header/footer Step 2: Check the top of the page for your header content Step 3: Scroll to the bottom to verify footer content Step 4: Test across multiple pages/subdomains as applicable

Example from documentation:

• Article loaded before placement creation shows no custom header/footer
• After refreshing page with active placement:
  • Header message appears at top: “Limited Time Offer! Get 20% off…”
  • Footer appears at bottom: “Enjoy exclusive offers before you leave…”

Editing Existing Placements

To modify a placement:

1. Click blue Edit button in placements dashboard
2. Form opens with current configuration
3. Modify header code, footer code, location, or status
4. Click Submit to save changes

Common edits:

• Updating promotional text in headers
• Changing footer links or copyright year
• Adjusting location targeting
• Activating/deactivating placement
• Adding or removing code

Deleting Placements

To remove a placement:

1. Click red Delete button
2. Confirm deletion
3. Header/footer immediately stops displaying on affected pages

Note: Deletion is permanent and cannot be undone.

Best Practices for Headers & Footers

1. Keep Headers Lightweight

Headers load with every page:

• Minimize code size
• Optimize images
• Avoid heavy JavaScript
• Test load time impact

2. Use Sticky Headers Judiciously

Sticky (position: fixed/sticky) headers:

• ✓ Keep important info visible
• ✗ Reduce visible content area
• ✗ Can feel intrusive on mobile
• Recommendation: Only for critical announcements

3. Make Footers Comprehensive

Footers are traditional locations for:

• Legal links (privacy, terms)
• Contact information
• Site navigation
• Social media
• Newsletter signups

4. Ensure Mobile Responsiveness

Test headers/footers on mobile:

• Use responsive CSS (media queries)
• Ensure text is readable
• Check touch targets are large enough
• Test sticky headers on small screens

5. Maintain Consistent Branding

Across all placements:

• Use consistent colors
• Match fonts to site theme
• Align with overall design language
• Keep messaging on-brand

6. Update Regularly

Keep content current:

• Update copyright years annually
• Refresh promotional headers when offers change
• Verify all footer links work
• Remove outdated announcements

7. Test Across Subdomains

When using “All Subdomains” location:

• Test on multiple subdomains
• Verify styling looks good on different themes
• Check for conflicts with subdomain-specific content

8. Use Shortcodes for Dynamic Content

If available, use shortcodes for:

• Domain name (%domain%)
• Subdomain name (%subdomain%)
• Current year (%year%)
• Helps maintain one header/footer across network

9. Consider Z-Index for Sticky Elements

For sticky headers:

• Use high z-index (e.g., 9999)
• Prevents content overlapping header
• Ensures header stays on top

10. Separate Concerns

Create different placements for different purposes:

• One for navigation header
• One for announcement bar
• One for footer
• Easier to manage and update independently

Example Real-World Scenarios

Scenario 1: Black Friday Promotion

Challenge: Add urgent promotion banner across all subdomains

Solution:

<!– Header –>

<div style=”background: black; color: white; padding: 15px; text-align: center; font-weight: bold; position: sticky; top: 0; z-index: 9999;”>

  🔥 BLACK FRIDAY: 50% OFF EVERYTHING – 24 HOURS ONLY! 

  <a href=”/black-friday” style=”color: #ffd700; text-decoration: underline; margin-left: 10px;”>SHOP NOW →</a>

</div>

 

Configuration:

• Location: All Subdomains
• Status: Active (during sale only)
• Easy to deactivate when sale ends

Scenario 2: GDPR Cookie Notice

Challenge: Add required cookie notice footer to EU-facing subdomains

Solution:

<!– Footer –>

<div style=”background: #f8f9fa; border-top: 2px solid #dee2e6; padding: 15px; text-align: center; position: fixed; bottom: 0; width: 100%; z-index: 9998;”>

  <p style=”margin: 0;”>🍪 This website uses cookies to ensure you get the best experience. 

    <a href=”/cookie-policy” style=”color: #007bff;”>Learn more</a> | 

    <button onclick=”this.parentElement.parentElement.style.display=’none'” style=”margin-left: 15px; padding: 5px 15px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;”>Accept</button>

  </p>

</div>

 

Configuration:

• Location: Selected Subdomains (EU-focused only)
• Includes accept button that hides notice
• Legal compliance achieved

Scenario 3: Newsletter Growth Campaign

Challenge: Add newsletter signup to footer of high-traffic subdomains

Solution:

<!– Footer Addition –>

<div style=”background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px 20px; text-align: center; margin-top: 50px;”>

  <h2 style=”margin: 0 0 10px 0;”>📧 Never Miss an Update!</h2>

  <p style=”margin: 0 0 20px 0;”>Join 50,000+ subscribers getting expert tips weekly</p>

  <div style=”max-width: 500px; margin: 0 auto; display: flex; gap: 10px;”>

    <input type=”email” placeholder=”Your email address” style=”flex: 1; padding: 12px; border: none; border-radius: 4px;”>

    <button style=”padding: 12px 30px; background: #ffd700; color: #333; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;”>Subscribe</button>

  </div>

</div>

 

Configuration:

• Location: Selected Subdomains (top 10 traffic subdomains)
• Visually appealing design
• Clear value proposition

Scenario 4: Multi-Subdomain Network Navigation

Challenge: Provide consistent navigation across subdomain network

Solution:

<!– Header Navigation –>

<nav style=”background: #1a1a1a; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1);”>

  <div style=”max-width: 1200px; margin: 0 auto; display: flex; align-items: center; padding: 15px 20px;”>

    <div style=”color: white; font-size: 20px; font-weight: bold; margin-right: auto;”>Your Network</div>

    <div style=”display: flex; gap: 5px;”>

      <a href=”https://maindomain.com” style=”color: white; padding: 8px 15px; text-decoration: none; transition: background 0.3s;”>Home</a>

      <a href=”https://blog.maindomain.com” style=”color: white; padding: 8px 15px; text-decoration: none;”>Blog</a>

      <a href=”https://reviews.maindomain.com” style=”color: white; padding: 8px 15px; text-decoration: none;”>Reviews</a>

      <a href=”https://tools.maindomain.com” style=”color: white; padding: 8px 15px; text-decoration: none;”>Tools</a>

      <a href=”https://maindomain.com/contact” style=”background: #007bff; color: white; padding: 8px 15px; text-decoration: none; border-radius: 4px;”>Contact</a>

    </div>

  </div>

</nav>

 

Configuration:

• Location: All Subdomains
• Provides network-wide navigation
• Helps users discover other subdomains

Troubleshooting Headers & Footers

Issue 1: Header/Footer Not Appearing

Possible Causes:

• Status is Inactive
• Location targeting doesn’t match current page
• Code syntax error prevents rendering
• Theme CSS conflicts

Solutions:

• Verify Status is Active in dashboard
• Check location settings match subdomain/page
• Validate HTML in code editor
• Test with simple text first, then add styling

Issue 2: Header/Footer Looks Broken

Causes:

• HTML syntax errors
• CSS conflicts with theme
• Missing closing tags
• Incompatible styling

Solutions:

• Use Code view to check HTML structure
• Ensure all tags are properly closed
• Test code in isolated environment first
• Use inline styles to override theme CSS

Issue 3: Sticky Header Not Sticking

Cause: CSS position property incorrect

Solution:

<div style=”position: sticky; top: 0; z-index: 9999;”>

  Your header content

</div>

 

Or use:

<div style=”position: fixed; top: 0; width: 100%; z-index: 9999;”>

  Your header content

</div>

 

Issue 4: Multiple Headers/Footers Appearing

Cause: Multiple active placements with overlapping targeting

Solution:

• Review all placements in dashboard
• Check location targeting for conflicts
• Deactivate or adjust conflicting placements

Issue 5: Mobile Display Issues

Causes:

• Fixed widths that don’t scale
• Text too small on mobile
• Touch targets too small

Solutions: Add responsive CSS:

<style>

@media (max-width: 768px) {

  .your-header {

    font-size: 14px;

    padding: 10px 5px;

  }

}

</style>