Adding Elements Before and After Header Container

The DigiFusion theme provides specific hooks that allow you to insert custom content before and after the header container. These hooks give you precise control over header customization without modifying core theme files.

Available Header Container Hooks

The theme includes two main hooks for header container customization:

• digifusion_before_header_container – Fires before the header container opens
• digifusion_after_header_container – Fires after the header container closes

Adding Content Before Header Container

To add content before the header container, add this function to your child theme’s functions.php file:

function digifusion_child_before_header_content() {
    ?>
    <div class="pre-header-notice">
        <div class="container">
            <p>Special announcement or promotional message</p>
        </div>
    </div>
    <?php
}
add_action( 'digifusion_before_header_container', 'digifusion_child_before_header_content' );

Adding Content After Header Container

To add content after the header container, use this function:

function digifusion_child_after_header_content() {
    ?>
    <div class="header-bottom-bar">
        <div class="container">
            <div class="secondary-navigation">
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'secondary',
                    'container'      => false,
                    'menu_class'     => 'secondary-menu',
                    'fallback_cb'    => false,
                ) );
                ?>
            </div>
        </div>
    </div>
    <?php
}
add_action( 'digifusion_after_header_container', 'digifusion_child_after_header_content' );

Styling Your Custom Elements

Add these styles to your child theme’s style.css file:

/* Pre-header notice styling */
.pre-header-notice {
    background-color: #f8f9fa;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 14px;
    text-align: center;
}

.pre-header-notice p {
    margin: 0;
    color: #495057;
}

/* Header bottom bar styling */
.header-bottom-bar {
    background-color: #343a40;
    padding: 10px 0;
    border-top: 1px solid #495057;
}

.secondary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.secondary-navigation a {
    color: #ffffff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.secondary-navigation a:hover {
    background-color: #495057;
}

Adding Interactive Elements with JavaScript

Create a new file js/header-elements.js in your child theme directory:

document.addEventListener('DOMContentLoaded', function() {
    // Add close functionality to pre-header notice
    const preHeaderNotice = document.querySelector('.pre-header-notice');
    
    if (preHeaderNotice) {
        // Add close button
        const closeButton = document.createElement('button');
        closeButton.innerHTML = '×';
        closeButton.className = 'notice-close';
        closeButton.setAttribute('aria-label', 'Close notice');
        
        preHeaderNotice.querySelector('.container').appendChild(closeButton);
        
        // Handle close action
        closeButton.addEventListener('click', function() {
            preHeaderNotice.style.display = 'none';
            // Store user preference
            sessionStorage.setItem('headerNoticeHidden', 'true');
        });
        
        // Check if notice was previously hidden
        if (sessionStorage.getItem('headerNoticeHidden') === 'true') {
            preHeaderNotice.style.display = 'none';
        }
    }
    
    // Mobile menu toggle for secondary navigation
    const secondaryNav = document.querySelector('.secondary-navigation');
    
    if (secondaryNav && window.innerWidth <= 768) {
        // Create mobile toggle
        const mobileToggle = document.createElement('button');
        mobileToggle.innerHTML = 'Menu';
        mobileToggle.className = 'secondary-nav-toggle';
        
        secondaryNav.insertBefore(mobileToggle, secondaryNav.firstChild);
        
        // Toggle functionality
        mobileToggle.addEventListener('click', function() {
            const menu = secondaryNav.querySelector('ul');
            menu.classList.toggle('show-mobile');
        });
    }
});

Enqueue the JavaScript file by adding this to your functions.php:

function digifusion_child_enqueue_header_scripts() {
    wp_enqueue_script(
        'digifusion-child-header-elements',
        get_stylesheet_directory_uri() . '/js/header-elements.js',
        array(),
        wp_get_theme()->get('Version'),
        true
    );
}
add_action( 'wp_enqueue_scripts', 'digifusion_child_enqueue_header_scripts' );

Additional CSS for Interactive Elements

Add these styles to style.css for the interactive elements:

/* Notice close button */
.notice-close {
    background: none;
    border: none;
    color: #495057;
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
    margin-left: 10px;
    line-height: 1;
}

.notice-close:hover {
    color: #212529;
}

/* Mobile secondary navigation */
.secondary-nav-toggle {
    display: none;
    background-color: #495057;
    color: #ffffff;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .secondary-nav-toggle {
        display: block;
    }
    
    .secondary-navigation ul {
        display: none;
        flex-direction: column;
        gap: 10px;
    }
    
    .secondary-navigation ul.show-mobile {
        display: flex;
    }
}

Conditional Content Display

You can add conditional logic to show different content based on page context:

function digifusion_child_conditional_header_content() {
    if ( is_home() || is_front_page() ) {
        ?>
        <div class="homepage-header-banner">
            <div class="container">
                <h2>Welcome to Our Homepage</h2>
            </div>
        </div>
        <?php
    } elseif ( is_shop() && function_exists( 'woocommerce_breadcrumb' ) ) {
        ?>
        <div class="shop-breadcrumb-bar">
            <div class="container">
                <?php woocommerce_breadcrumb(); ?>
            </div>
        </div>
        <?php
    }
}
add_action( 'digifusion_after_header_container', 'digifusion_child_conditional_header_content' );

These examples demonstrate how to effectively use the header container hooks to create custom header elements that enhance your site’s functionality and design.