Adding Custom Button After Header Menu Links

This guide shows you how to add a custom button that appears after the header menu links in the DigiFusion theme using the built-in hook system.

Add the Button Function

Add this code to your child theme’s functions.php file:

/**
 * Add custom button after header menu links
 */
function digifusion_child_add_header_button() {
    ?>
    <li class="digi-header-button-wrapper">
        <a href="/contact" class="digi-header-button" id="header-cta-button">
            <span class="button-text">Get Started</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="currentColor"><path d="M11.2 2.8a.8.8 0 00-1.3 1L12.6 7h-11a.8.8 0 100 1.7h11L10 12a.8.8 0 101.3 1L15 8.6a.8.8 0 000-1.2l-3.8-4.5z"></path></svg>
        </a>
    </li>
    <?php
}
add_action( 'digifusion_after_header_menu_links', 'digifusion_child_add_header_button' );

Style the Button

Add this CSS to your child theme’s style.css file:

/* Header Button Styling */
.digi-header-button-wrapper {
    margin-left: 20px;
}

.digi-header-nav .digi-header-button {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}

.digi-header-nav .digi-header-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    color: #ffffff;
}

.digi-header-nav .digi-header-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.digi-header-button svg {
    transition: transform 0.3s ease;
}

.digi-header-button:hover svg {
    transform: translateX(2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .digi-header-button-wrapper {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
    
    .digi-header-nav .digi-header-button {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

Add Interactive Animations

Create a new file assets/js/header-button.js in your child theme and add this JavaScript:

/**
 * Header Button Interactions
 */
document.addEventListener('DOMContentLoaded', function() {
    const headerButton = document.getElementById('header-cta-button');
    
    if (!headerButton) return;
    
    // Add ripple effect on click
    headerButton.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        ripple.classList.add('ripple-effect');
        
        this.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
    });
    
    // Add pulse animation on page load
    setTimeout(() => {
        headerButton.classList.add('pulse-once');
    }, 1000);
    
    // Remove pulse class after animation
    headerButton.addEventListener('animationend', function() {
        this.classList.remove('pulse-once');
    });
});

Enqueue the JavaScript File

Add this function to your child theme’s functions.php file to load the JavaScript:

/**
 * Enqueue header button scripts
 */
function digifusion_child_enqueue_header_button_scripts() {
    wp_enqueue_script(
        'digifusion-child-header-button',
        get_stylesheet_directory_uri() . '/assets/js/header-button.js',
        array(),
        wp_get_theme()->get('Version'),
        true
    );
}
add_action( 'wp_enqueue_scripts', 'digifusion_child_enqueue_header_button_scripts' );

Add CSS Animations for JavaScript Effects

Add these additional CSS animations to your style.css:

/* Ripple Effect */
.digi-header-button {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* Pulse Animation */
.pulse-once {
    animation: pulse 1s ease-in-out;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

Customization Options

Different Button Styles

You can modify the button appearance by changing the CSS variables:

.digi-header-nav .digi-header-button {
    /* Solid color button */
    background: #e74c3c;
    
    /* Outline button */
    background: transparent;
    border: 2px solid #667eea;
    color: #667eea;
    
    /* Rounded button */
    border-radius: 25px;
    
    /* Square button */
    border-radius: 0;
}

Button with Icon Only

To create an icon-only button, modify the PHP function:

function digifusion_child_add_header_icon_button() {
    ?>
    <li class="digi-header-button-wrapper">
        <a href="/search" class="digi-header-icon-button" aria-label="Search">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="currentColor"><path d="M11.2 2.8a.8.8 0 00-1.3 1L12.6 7h-11a.8.8 0 100 1.7h11L10 12a.8.8 0 101.3 1L15 8.6a.8.8 0 000-1.2l-3.8-4.5z"></path></svg>
        </a>
    </li>
    <?php
}

Multiple Buttons

To add multiple buttons, call the action multiple times or create a single function that outputs multiple buttons:

function digifusion_child_add_header_buttons() {
    $buttons = array(
        array(
            'url' => '/contact',
            'text' => 'Contact',
            'class' => 'secondary'
        ),
        array(
            'url' => '/demo',
            'text' => 'Live Demo',
            'class' => 'primary'
        )
    );
    
    foreach ($buttons as $button) {
        ?>
        <li class="digi-header-button-wrapper">
            <a href="<?php echo esc_url($button['url']); ?>" 
               class="digi-header-button <?php echo esc_attr($button['class']); ?>">
                <?php echo esc_html($button['text']); ?>
            </a>
        </li>
        <?php
    }
}
add_action( 'digifusion_after_header_menu_links', 'digifusion_child_add_header_buttons' );

The button will now appear after your header menu links with smooth animations and responsive behavior. You can customize the URL, text, styling, and functionality to match your specific needs.