Layout Elements

warning

Layout Elements can change site-wide structure if rules are too broad. Start with a single page, validate, then expand.

Layout Elements Explained

Layout control	Example	Why it matters
Sidebars	No sidebar on landing pages	Cleaner conversions
Containers	Full width vs contained	Controls content readability
Titles/headers	Disable title on a hero page	Avoid duplicate headings
Footer/header visibility	Remove footer on checkout	Focus and fewer distractions

Why It Matters

• Layout changes are common, but template overrides are expensive to maintain.
• Layout Elements offer conditional control with low code surface area.
• You can align layout decisions to content types (posts vs pages vs products).

How It Works

Layout Elements apply conditional settings that influence the same layout logic used by GeneratePress (theme mods and filters). They effectively provide a UI layer for common layout decisions.

Practical Walkthrough

Step 1: Discover Layout Filters in the Theme

discover-layout-filters.sh

cd /var/www/html/wp-content/themes/generatepress
grep -R "apply_filters( 'generate_" -n inc/structure inc | head -n 60

Step 2: Capture Current Theme Mods (Baseline)

capture-layout-baseline.sh

cd /var/www/html
wp option get theme_mods_generatepress --format=json > /tmp/theme_mods_generatepress.json
grep -n "sidebar\|container\|layout" /tmp/theme_mods_generatepress.json | head -n 60

Step 3: Find Common Layout Filters (So You Know the Vocabulary)

find-common-layout-filters.sh

cd /var/www/html/wp-content/themes/generatepress
grep -R "generate_sidebar_layout\|generate_content_layout\|generate_container" -n inc inc/structure templates 2>/dev/null | head -n 60

Step 4: Inventory Elements (Optional)

inventory-layout-elements.sh

cd /var/www/html
wp post list --post_type=gp_elements --fields=ID,post_title,post_status --format=table 2>/dev/null || true

Practical Examples

Example 1: Full-Width Landing Page

Goal: a landing page with no sidebar and a wide container.

• Create a Layout Element.
• Display rules: the landing page only.
• Set sidebar layout: none.
• Set container layout: full width.

Example 2: Remove Header/Footer on a Checkout URL

Keep rules narrow (e.g., only /checkout/) so you do not affect the rest of the site.

caution

E-commerce pages often have special templates and plugin hooks. Test checkout flows end-to-end on staging.

Example 3: Compare a Layout Element vs a Filter (Code Option)

If you need version-controlled behavior, a filter in a child theme can be more auditable.

wp-content/themes/generatepress-child/functions.php

<?php

add_filter( 'generate_sidebar_layout', function( $layout ) {
    if ( is_page( 'landing' ) ) {
        return 'no-sidebar';
    }

    return $layout;
} );

Example 4: Avoid Overlapping Rules

If you have multiple Layout Elements targeting the same URL patterns, treat them like firewall rules: order matters and overlaps create surprises.

Best Practices

Practice	Why
One intent per element	Easier to reason about changes
Document display rules	Rules are where most mistakes happen
Prefer Layout Elements over template forks	Lower maintenance cost
Re-test after theme/plugin updates	Layout logic can shift
Avoid overlapping display rules	Prevents "which element won" confusion
Keep a rollback note	Disabling one element should fix the issue

Troubleshooting

Symptom	Cause	Fix
Layout not applying	Wrong rule scope	Narrow to one page, then expand
Different layout for logged-in	Admin bar or role UI	Test logged-out and compare
Changes hidden	Cache	Purge LSCache
Layout seems random	Overlapping elements	Disable elements one-by-one on staging to isolate
Sidebar differs from Customizer	Element overrides global	Confirm element scope and document the intent

Hands-On

1. Create a Layout Element for one test page only.
2. Disable the page title and verify headings still make sense.
3. Document the rule and rollback path.
4. Create a second Layout Element for a different page type and confirm no overlap.

Quick Reference

Task	Command
Find layout filters	grep -R "apply_filters( 'generate_" -n inc/structure
Baseline layout mods	grep -n "sidebar|container|layout" /tmp/theme_mods_generatepress.json

What's Next

• Next: Header Elements
• Related: Global Layout Framework