Skip to content

Sticky footer headerfooter background #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasperf merged 6 commits into from
Jun 4, 2025
Merged

Sticky footer headerfooter background #29

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
119d9c6
Sticky Footer & H+F Background Color
jasperf Jun 4, 2025
09f8d8d
Footer & Header Sticky + Background Color UI Display
jasperf Jun 4, 2025
9ef0933
Top of Page Header Reference
jasperf Jun 4, 2025
0db2713
phpcs patch
jasperf Jun 4, 2025
b6df10c
Footer Sticky Banner Test
jasperf Jun 4, 2025
c96d2cf
jQuery Notification Patch
jasperf Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,25 @@

All notable changes to this project will be documented in this file.

## [1.9.5]
* UI Enhancement: Moved header and footer banner locations to the bottom of the settings page for better organization
* Bug Fix: Fixed sticky footer banner option to properly toggle on/off
* Bug Fix: Fixed wrapper background color fields to load with proper default values (#ffffff for header, #161515 for footer)
* Admin Interface: Improved settings page layout with header/footer sections positioned at the bottom
* User Experience: Enhanced settings page organization with content-related banners at the top and page-level banners at the bottom

## [1.9.4]
* New Feature: Added sticky footer banner option - footer banners can now stick to the bottom of the viewport
* New Feature: Added wrapper background color customization for header and footer banner sections
* Enhancement: Header banner wrapper sections can now have custom background colors (default: #ffffff)
* Enhancement: Footer banner wrapper sections can now have custom background colors (default: #161515)
* UI Enhancement: Added color picker input for wrapper background color selection in admin interface
* CSS Enhancement: Added sticky positioning support with proper z-index and responsive behavior
* CSS Enhancement: Added wrapper div structure with background color support for header and footer banners
* User Experience: Sticky footer banners remain visible when scrolling for better advertisement visibility
* Admin Interface: Added sticky checkbox option specifically for footer banner location
* Responsive Design: Sticky footer banners maintain proper positioning across all device sizes

## [1.9.3]
* New Feature: Added alignment options for header (wp_head) and footer (wp_footer) banner locations
* Enhancement: Header banners can now be aligned left, center, or right within their container
Expand Down
2 changes: 1 addition & 1 deletion DEVELOPMENT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ This test file simulates the theme structure and demonstrates how the banner inj

### Banner Locations

1. **wp_head** - Top of page (after `<body>` tag)
1. **wp_head** - Header (Top of page (after `<body>` tag))
2. **wp_footer** - Footer (before `</body>` tag)
3. **the_content** - Within post/page content with configurable positioning
4. **get_sidebar** - Before sidebar widgets
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ When you specify a wrapper class for a banner:

Each banner location now has its own unique default wrapper class with predefined styling:

- **Top of Page (wp_head)**: `iwz-head-banner`
- **Header (Top of Page) (wp_head)**: `iwz-head-banner`
- **Footer (wp_footer)**: `iwz-footer-banner`
- **Within Content (the_content)**: `iwz-content-banner`
- **Before Sidebar Content**: `iwz-sidebar-banner`
Expand Down
71 changes: 68 additions & 3 deletions includes/class-iwz-banner-container-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ public function init() {
*/
public function register_banner_locations() {
$this->banner_locations = array(
'wp_head' => __( 'Top of Page (After <body>)', 'banner-container-plugin' ),
'wp_footer' => __( 'Footer (Before </body>)', 'banner-container-plugin' ),
'the_content' => __( 'Within Content', 'banner-container-plugin' ),
'dynamic_sidebar_before' => __( 'Before Sidebar Content', 'banner-container-plugin' ),
'wp_nav_menu_items' => __( 'In Navigation Menu', 'banner-container-plugin' ),
'content_wrap_inside' => __( 'Inside Blabber Theme Content Wrap (Top of Content Area)', 'banner-container-plugin' ),
'blabber_footer_start' => __( 'Blabber Footer Start (Just Above Footer Area)', 'banner-container-plugin' ),
'wp_head' => __( 'Header( Top of Page) (After <body>)', 'banner-container-plugin' ),
Comment thread
jasperf marked this conversation as resolved.
'wp_footer' => __( 'Footer (Before </body>)', 'banner-container-plugin' ),
);

// Allow theme/plugins to modify available locations.
Expand Down Expand Up @@ -156,7 +156,7 @@ public function register_settings() {
)
);

// For header and footer banners, add alignment setting.
// For header and footer banners, add alignment and wrapper background color settings.
if ( in_array( $location_key, array( 'wp_head', 'wp_footer' ), true ) ) {
register_setting(
'iwz_banner_container_settings',
Expand All @@ -167,6 +167,29 @@ public function register_settings() {
'default' => 'left',
)
);

register_setting(
'iwz_banner_container_settings',
'iwz_banner_' . $location_key . '_wrapper_bg_color',
array(
'type' => 'string',
'sanitize_callback' => 'sanitize_hex_color',
'default' => 'wp_head' === $location_key ? '#ffffff' : '#161515',
)
);
}

// For footer banners only, add sticky setting.
if ( 'wp_footer' === $location_key ) {
register_setting(
'iwz_banner_container_settings',
'iwz_banner_wp_footer_sticky',
array(
'type' => 'boolean',
'sanitize_callback' => 'rest_sanitize_boolean',
'default' => false,
)
);
}

// Keep legacy settings for backward compatibility.
Expand Down Expand Up @@ -713,6 +736,48 @@ class="regular-text" />
}
?>
<table class="form-table">
<?php if ( in_array( $location_key, array( 'wp_head', 'wp_footer' ), true ) ) : ?>
<tr>
<th scope="row">
<label for="iwz_banner_<?php echo esc_attr( $location_key ); ?>_wrapper_bg_color">
<?php esc_html_e( 'Wrapper Background Color', 'banner-container-plugin' ); ?>
</label>
</th>
<td>
<input type="color"
id="iwz_banner_<?php echo esc_attr( $location_key ); ?>_wrapper_bg_color"
name="iwz_banner_<?php echo esc_attr( $location_key ); ?>_wrapper_bg_color"
value="<?php echo esc_attr( get_option( 'iwz_banner_' . $location_key . '_wrapper_bg_color', ( 'wp_head' === $location_key ? '#ffffff' : '#161515' ) ) ); ?>" />
<p class="description">
<?php esc_html_e( 'Background color for the banner wrapper section.', 'banner-container-plugin' ); ?>
</p>
</td>
</tr>
<?php endif; ?>

<?php if ( 'wp_footer' === $location_key ) : ?>
<tr>
<th scope="row">
<label for="iwz_banner_wp_footer_sticky">
<?php esc_html_e( 'Sticky Footer Banner', 'banner-container-plugin' ); ?>
</label>
</th>
<td>
<input type="checkbox"
id="iwz_banner_wp_footer_sticky"
name="iwz_banner_wp_footer_sticky"
value="1"
<?php checked( 1, get_option( 'iwz_banner_wp_footer_sticky', false ) ); ?> />
<label for="iwz_banner_wp_footer_sticky">
<?php esc_html_e( 'Make footer banners stick to bottom of screen', 'banner-container-plugin' ); ?>
</label>
<p class="description">
<?php esc_html_e( 'When enabled, footer banners will remain fixed at the bottom of the viewport when scrolling.', 'banner-container-plugin' ); ?>
</p>
</td>
</tr>
<?php endif; ?>

<tr>
<td colspan="2">
<?php if ( 'dynamic_sidebar_before' === $location_key ) : ?>
Expand Down
4 changes: 2 additions & 2 deletions includes/class-iwz-banner-container-welcome.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,13 +126,13 @@ public function display_welcome_page() {
<div class="iwz-banner-container-section">
<h2><?php esc_html_e( 'Available Banner Locations', 'banner-container-plugin' ); ?></h2>
<ul style="list-style: disc; margin-left: 20px;">
<li><?php esc_html_e( 'Header (before &lt;/head&gt;)', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'Footer (before &lt;/body&gt;)', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'Within Content (with options for placement)', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'Before Sidebar Content (above all sidebar widgets)', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'In Navigation Menu', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'Top Blabber Content Wrap', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'Blabber Footer Start (Just Above Footer Area)', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'Header (after &lt;body&gt; tag) - with background color and alignment options', 'banner-container-plugin' ); ?></li>
<li><?php esc_html_e( 'Footer (before &lt;/body&gt; tag) - with background color, alignment, and sticky options', 'banner-container-plugin' ); ?></li>
</ul>
</div>
</div>
Expand Down
47 changes: 34 additions & 13 deletions includes/class-iwz-banner-container.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,8 +179,9 @@ public function display_header_banner() {
return;
}

// Get alignment setting.
$alignment = get_option( 'iwz_banner_wp_head_alignment', 'left' );
// Get alignment and wrapper background color settings.
$alignment = get_option( 'iwz_banner_wp_head_alignment', 'left' );
$wrapper_bg_color = get_option( 'iwz_banner_wp_head_wrapper_bg_color', '#ffffff' );

// Get multiple banners.
$banners = get_option( 'iwz_banner_wp_head_banners', array() );
Expand All @@ -189,7 +190,7 @@ public function display_header_banner() {
if ( empty( $banners ) ) {
$legacy_code = get_option( 'iwz_banner_wp_head_code', '' );
if ( ! empty( $legacy_code ) ) {
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $legacy_code ), '', 'wp_head', $alignment );
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $legacy_code ), '', 'wp_head', $alignment, false, $wrapper_bg_color );
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Content is sanitized via sanitize_banner_html method
echo $wrapped_banner;
$this->header_banner_displayed = true;
Expand All @@ -203,7 +204,7 @@ public function display_header_banner() {
if ( ! empty( $banner['enabled'] ) && ! empty( $banner['code'] ) ) {
$device_targeting = $banner['device_targeting'] ?? 'all';
if ( $this->should_display_for_device( $device_targeting ) ) {
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $banner['code'] ), $banner['wrapper_class'] ?? '', 'wp_head', $alignment );
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $banner['code'] ), $banner['wrapper_class'] ?? '', 'wp_head', $alignment, false, $wrapper_bg_color );
$banner_output .= $wrapped_banner;
}
}
Expand All @@ -230,8 +231,9 @@ public function display_header_banner_fallback() {
return;
}

// Get alignment setting.
$alignment = get_option( 'iwz_banner_wp_head_alignment', 'left' );
// Get alignment and wrapper background color settings.
$alignment = get_option( 'iwz_banner_wp_head_alignment', 'left' );
$wrapper_bg_color = get_option( 'iwz_banner_wp_head_wrapper_bg_color', '#ffffff' );

// Get multiple banners.
$banners = get_option( 'iwz_banner_wp_head_banners', array() );
Expand All @@ -240,7 +242,7 @@ public function display_header_banner_fallback() {
if ( empty( $banners ) ) {
$legacy_code = get_option( 'iwz_banner_wp_head_code', '' );
if ( ! empty( $legacy_code ) ) {
$wrapped_banner = $this->wrap_banner_html( $legacy_code, '', 'wp_head', $alignment );
$wrapped_banner = $this->wrap_banner_html( $legacy_code, '', 'wp_head', $alignment, false, $wrapper_bg_color );
$this->output_body_banner_script( $wrapped_banner );
$this->header_banner_displayed = true;
}
Expand All @@ -253,7 +255,7 @@ public function display_header_banner_fallback() {
if ( ! empty( $banner['enabled'] ) && ! empty( $banner['code'] ) ) {
$device_targeting = $banner['device_targeting'] ?? 'all';
if ( $this->should_display_for_device( $device_targeting ) ) {
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $banner['code'] ), $banner['wrapper_class'] ?? '', 'wp_head', $alignment );
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $banner['code'] ), $banner['wrapper_class'] ?? '', 'wp_head', $alignment, false, $wrapper_bg_color );
$banner_html .= $wrapped_banner;
}
}
Expand Down Expand Up @@ -291,8 +293,10 @@ public function display_footer_banner() {
return;
}

// Get alignment setting.
$alignment = get_option( 'iwz_banner_wp_footer_alignment', 'left' );
// Get alignment, sticky, and wrapper background color settings.
$alignment = get_option( 'iwz_banner_wp_footer_alignment', 'left' );
$sticky = get_option( 'iwz_banner_wp_footer_sticky', false );
$wrapper_bg_color = get_option( 'iwz_banner_wp_footer_wrapper_bg_color', '#161515' );

// Get multiple banners.
$banners = get_option( 'iwz_banner_wp_footer_banners', array() );
Expand All @@ -301,7 +305,7 @@ public function display_footer_banner() {
if ( empty( $banners ) ) {
$legacy_code = get_option( 'iwz_banner_wp_footer_code', '' );
if ( ! empty( $legacy_code ) ) {
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $legacy_code ), '', 'wp_footer', $alignment );
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $legacy_code ), '', 'wp_footer', $alignment, $sticky, $wrapper_bg_color );
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Content is sanitized via sanitize_banner_html method
echo $wrapped_banner;
}
Expand All @@ -313,7 +317,7 @@ public function display_footer_banner() {
if ( ! empty( $banner['enabled'] ) && ! empty( $banner['code'] ) ) {
$device_targeting = $banner['device_targeting'] ?? 'all';
if ( $this->should_display_for_device( $device_targeting ) ) {
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $banner['code'] ), $banner['wrapper_class'] ?? '', 'wp_footer', $alignment );
$wrapped_banner = $this->wrap_banner_html( $this->sanitize_banner_html( $banner['code'] ), $banner['wrapper_class'] ?? '', 'wp_footer', $alignment, $sticky, $wrapper_bg_color );
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Content is sanitized via sanitize_banner_html method and wrapped
echo $wrapped_banner;
}
Expand Down Expand Up @@ -749,9 +753,11 @@ private function sanitize_banner_html( $html ) {
* @param string $wrapper_class The CSS class for the wrapper div.
* @param string $location The banner location for default class determination.
* @param string $alignment The alignment for header/footer banners (left, center, right).
* @param bool $sticky Whether footer banner should be sticky (footer only).
* @param string $wrapper_bg_color Background color for header/footer wrapper.
* @return string Wrapped banner HTML or original HTML if no wrapper class.
*/
private function wrap_banner_html( $banner_html, $wrapper_class = '', $location = '', $alignment = '' ) {
private function wrap_banner_html( $banner_html, $wrapper_class = '', $location = '', $alignment = '', $sticky = false, $wrapper_bg_color = '' ) {
if ( empty( $banner_html ) ) {
return $banner_html;
}
Expand Down Expand Up @@ -783,6 +789,11 @@ private function wrap_banner_html( $banner_html, $wrapper_class = '', $location
$classes[] = 'iwz-align-' . sanitize_html_class( $alignment );
}

// Add sticky class for footer banners.
if ( 'wp_footer' === $location && $sticky ) {
$classes[] = 'iwz-sticky';
}

// Add user-specified classes.
if ( ! empty( $wrapper_class ) ) {
$user_classes = explode( ' ', $wrapper_class );
Expand All @@ -802,6 +813,16 @@ private function wrap_banner_html( $banner_html, $wrapper_class = '', $location
// Create class string.
$class_string = implode( ' ', array_filter( $classes ) );

// Add wrapper div for header/footer with background color.
if ( in_array( $location, array( 'wp_head', 'wp_footer' ), true ) && ! empty( $wrapper_bg_color ) ) {
$wrapper_type = 'wp_head' === $location ? 'header' : 'footer';
$wrapper_style = 'background-color: ' . esc_attr( $wrapper_bg_color ) . ';';

return '<div class="iwz-banner-wrapper iwz-' . $wrapper_type . '-wrapper" style="' . $wrapper_style . '">' .
'<div class="' . esc_attr( $class_string ) . '">' . $banner_html . '</div>' .
'</div>';
}

return '<div class="' . esc_attr( $class_string ) . '">' . $banner_html . '</div>';
}
}
4 changes: 2 additions & 2 deletions iwz-banner-container-plugin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Plugin Name: Banner Container Plugin
* Plugin URI: https://imagewize.com/iwz-banner-container-plugin
* Description: Add banners to different locations in your WordPress theme.
* Version: 1.9.3
* Version: 1.9.5
* Author: Jasper Frumau
* Author URI: https://imagewize.com
* License: GPL-2.0+
Expand All @@ -18,7 +18,7 @@
}

// Define plugin constants.
define( 'IWZ_BANNER_CONTAINER_VERSION', '1.9.3' );
define( 'IWZ_BANNER_CONTAINER_VERSION', '1.9.5' );
define( 'IWZ_BANNER_CONTAINER_PATH', plugin_dir_path( __FILE__ ) );
define( 'IWZ_BANNER_CONTAINER_URL', plugin_dir_url( __FILE__ ) );

Expand Down
42 changes: 42 additions & 0 deletions public/css/iwz-banner-container-public.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,48 @@
margin-bottom: 1rem;
}

/*
* Sticky Footer Banner Support
* Special positioning for footer banners with sticky option enabled
*/
.iwz-footer-banner.iwz-sticky {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
margin: 0 !important;
}

/*
* Responsive adjustments for sticky footer banners
*/
@media (max-width: 768px) {
.iwz-footer-banner.iwz-sticky {
position: fixed !important;
bottom: 0 !important;
Comment thread
jasperf marked this conversation as resolved.
Outdated
}
}

/*
* Banner Wrapper Background Colors
* Support for custom background colors on header and footer banner wrappers
*/
.iwz-banner-wrapper {
width: 100%;
padding: 0;
margin: 0;
}

.iwz-banner-wrapper.iwz-header-wrapper {
background-color: #ffffff; /* Default header background */
}

.iwz-banner-wrapper.iwz-footer-wrapper {
background-color: #161515; /* Default footer background */
}

/*
* Legacy Class Support
* Maintain backward compatibility with existing wrapper classes
Expand Down
Loading