feat: add toggle side option for simplified subpage header

[faisalahammad]

Summary

Added a new Customizer setting to independently position the simplified subpage header's hamburger menu toggle on the left or right. This mirrors the existing capability for the desktop slide-out sidebar, ensuring a consistent user experience across different header layouts.

Fixes #1957

Changes

customizer.php

Before:

	$wp_customize->add_control(
		'header_sub_simplified',
		array(
			'type'    => 'checkbox',
			'label'   => esc_html__( 'Use simple header on subpages', 'newspack-theme' ),
			'section' => 'header_section_subpages',
		)
	);

After:

	$wp_customize->add_setting(
		'subpage_toggle_side',
		array(
			'default'           => 'left',
			'sanitize_callback' => 'newspack_sanitize_slideout_sidebar_side',
		)
	);
	$wp_customize->add_control(
		'subpage_toggle_side',
		array(
			'type'    => 'radio',
			'label'   => esc_html__( 'Menu toggle position', 'newspack-theme' ),
			'choices' => array(
				'left'  => _x( 'Left', 'menu toggle position', 'newspack-theme' ),
				'right' => _x( 'Right', 'menu toggle position', 'newspack-theme' ),
			),
			'section' => 'header_section_subpages',
		)
	);

Why: Reuses the existing sanitization logic and follows the established pattern for sidebar positioning to provide independent control for the subpage header toggle.

header.php

Before:

					<?php if ( newspack_has_menus() || true === $show_slideout_sidebar ) : ?>
						<div class="subpage-toggle-contain">
							<button class="subpage-toggle" on="tap:subpage-sidebar.toggle">
								<?php echo wp_kses( newspack_get_icon_svg( 'menu', 20 ), newspack_sanitize_svgs() ); ?>
								<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'newspack-theme' ); ?></span>
							</button>
						</div>
					<?php endif; ?>

After:

					<?php if ( ( newspack_has_menus() || true === $show_slideout_sidebar ) && 'left' === $subpage_toggle_side ) : ?>
						<div class="subpage-toggle-contain">
							<button class="subpage-toggle" on="tap:subpage-sidebar.toggle">
								<?php echo wp_kses( newspack_get_icon_svg( 'menu', 20 ), newspack_sanitize_svgs() ); ?>
								<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'newspack-theme' ); ?></span>
							</button>
						</div>
					<?php endif; ?>
                    ...
					<?php if ( ( newspack_has_menus() || true === $show_slideout_sidebar ) && 'right' === $subpage_toggle_side ) : ?>
						<div class="subpage-toggle-contain dir-right">
							<button class="subpage-toggle" on="tap:subpage-sidebar.toggle">
								<?php echo wp_kses( newspack_get_icon_svg( 'menu', 20 ), newspack_sanitize_svgs() ); ?>
								<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'newspack-theme' ); ?></span>
							</button>
						</div>
					<?php endif; ?>

Why: Dynamically positions the toggle container based on the user's preference, ensuring proper alignment in the header layout.

Testing

Test 1: Alignment and Slide Direction

1. Navigate to Appearance → Customize → Header Settings → Subpage Header.
2. Enable "Use simple header on subpages" and set "Menu toggle position" to "Right".
3. Verify the hamburger icon appears on the right of the header on subpages.
4. Verify the sidebar slides in from the right (AMP and fallback).

Result: Works as expected.

Test 2: Independence

1. Change "Slide-out sidebar side" to "Left".
2. Verify subpage toggle remains on the right.

Result: Works as expected.

[laurelfulford]

Thanks for tackling this one, @faisalahammad! The code overall looks solid -- I added one small bit of feedback but it's minor.

Unfortunately the header in this theme has turned into a beast with the different options and settings -- they all kind of clash together! I ran into a few issues when combining settings but to be honest, this is the kind of stuff I run into when I make changes to the heading, too!

1. When the logo is centred (Header Settings > Appearance > Center Logo), the logo, search, and menu toggle are oddly spaced out:

2. When a post's featured image is set to the 'beside' position and the logo is centered, everything is kind of grouped together:

Left:

Right:

On top of the above there's an option to also show the Mobile Call-To-Action when this header is enabled. It doesn't seem to introduce new issues on top of the above, but it changes the alignment a bit so it could be worth testing with as changes are made.

The header is kind of messy after years of features being layered into it! For some context around the feature request, it's an older one that didn't get a lot of traction, but that we left open in case it got more requests in the future. It's a discrete addition (all the changes just affect when the setting's on!) so I think it'd be cool to add, but I also get if the header layout spaghetti is a lot to navigate 🙂

Just let me know if you have any questions about this!

[faisalahammad]

Hi @laurelfulford,

I've pushed some updates to clean up the code and address the layout quirks you mentioned regarding the centered logo and "beside" featured images:

1. Unused Class: Removed the unused h-sub-right body class as requested.
2. Centered Logo Symmetry: Added a hidden spacer div on the left when the toggle is on the right to restore the 3-column flex layout symmetry.
3. Refined Spacing (Contact page fix): Grouped the search and right toggle inside a right-aligned wrapper so there are always exactly 3 flex items. This ensures the branding stays perfectly dead-center.
4. "Beside" Featured Image: Added specific rules for .h-sub.h-cl.single-featured-image-beside to utilize space-between so that elements spread out nicely instead of clumping up when squeezed into the 50% width container.

Ready for another pass when you have a moment!

Screenshots:

.

[laurelfulford]

Thanks for the updates, @faisalahammad, and apologies for the delay.

The updates are looking good! There's just one more thing to factor into the styles I think. I made a passing reference to being able to enable the Mobile Call to Action in the simplified header in my previous review, but I didn't explain how to do it. I think these changes just need to be tested with that enabled to make sure it's landing in the right spot.

To enable it:

1. Navigate to Customizer > Header Settings > Mobile Call-To-Action
2. Check the box to 'Show Mobile CTA'
3. Populate the Button URL field - otherwise the button won't show. Just # totally works here.
4. At the bottom, check 'Show Mobile CTA in Simplified Subpage header'

With this enabled on this PR, there are some display issues both with the new toggle aligned right option, and the default left alignment.

Standard featured image placements
Settings: toggle left, logo left - button is floating

Settings: toggle left, logo centred - looks good:

Settings: toggle right, logo left - button's floating

Settings: toggle right, logo centred - button's overlapping

'Beside' featured image placements
Settings: toggle left, logo left - button's floating

Settings: toggle left, logo centred - logo's not actually centred

Settings: toggle right, logo left - button's floating

Settings: toggle right, logo centred - button's overlapping

---

Typically the button's aligned right, like these screenshots from trunk. I think it'd be fine to match this placement for both alignments if it's easiest!

Settings: toggle left, logo left, featured image standard:

Settings: toggle left, logo centred, featured image standard:

Settings: toggle left, logo left, featured image beside:

Settings: toggle left, logo centred, featured image beside:

Just let me know if you have any questions about this! The header's pretty complex, so making changes like this always involves a lot of nitpicky testing 😅

[faisalahammad]

Addressed Mobile CTA layout issues

Moved the Mobile CTA (newspack_mobile_cta()) and the mobile menu toggle button inside .subpage-right-wrapper so they participate in the same flex flow as the search and right-aligned toggle.

Changes

header.php — Restructured the flex children:

• Mobile CTA and mobile menu toggle are now inside .subpage-right-wrapper
• CTA comes first in the wrapper (visually left-most in right group)
• Order: CTA → mobile-menu-toggle → search → right-toggle

_site-header.scss — Updated .subpage-right-wrapper:

• Added gap for consistent spacing between items
• Added flex: none on > * to prevent items from shrinking
• Reset margin-left: 0 on .mb-cta and .mobile-menu-toggle to override base styles that assume they're direct flex children of .wrapper

_menu-mobile-navigation.scss — Removed obsolete CTA positioning:

• Removed h-ll block: margin-left: auto on .mb-cta and margin-left on .header-search-contain — no longer needed since CTA is inside the wrapper which already has margin-left: auto
• Removed h-cl block: position: absolute; right: 2.25rem on .mb-cta — no longer needed since CTA flows naturally in the flex wrapper
• Kept the h-ll .site-branding { margin-right: 0 } rule

How this fixes the reported issues

Scenario	Before	After
Toggle left, logo left, CTA on	CTA floating outside wrapper	CTA inside wrapper, aligned right
Toggle right, logo left, CTA on	CTA floating	CTA in wrapper flex flow
Toggle left/right, logo centered, CTA on	CTA overlapping/absolute	CTA in flex wrapper, no overlap
Beside featured image + CTA	Logo not centered	CTA in wrapper, flex: none prevents squish

Lint

• PHP: clean
• SCSS: clean
• JS: pre-existing ESLint config issue (unrelated)