Adding Custom Footer Elements with Hooks

DigiFusion provides multiple action hooks throughout the footer area, allowing you to insert custom content at specific locations without modifying template files.

Available Footer Hooks

The theme includes these footer hooks in order:

• digifusion_before_footer – Before the footer element
• digifusion_before_footer_container – Before the footer container
• digifusion_before_footer_widgets – Before footer widgets
• digifusion_after_footer_widgets – After footer widgets
• digifusion_before_footer_bottom – Before footer bottom section
• digifusion_before_footer_copyright – Before copyright text
• digifusion_after_footer_copyright – After copyright text
• digifusion_after_footer_bottom – After footer bottom section
• digifusion_after_footer_container – After footer container
• digifusion_after_footer – After the footer element

Adding Content to Footer Hooks

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

Adding Social Links Above Footer Widgets

function digifusion_child_add_footer_social() {
    ?>
    <div class="footer-social-links">
        <a href="https://facebook.com/yourpage" target="_blank" aria-label="Facebook">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
            </svg>
        </a>
        <a href="https://twitter.com/yourhandle" target="_blank" aria-label="Twitter">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
            </svg>
        </a>
    </div>
    <?php
}
add_action('digifusion_before_footer_widgets', 'digifusion_child_add_footer_social');

Adding Newsletter Signup Before Copyright

function digifusion_child_add_newsletter_signup() {
    ?>
    <div class="footer-newsletter">
        <form class="newsletter-form" method="post" action="">
            <input type="email" placeholder="Enter your email" required>
            <button type="submit">Subscribe</button>
        </form>
    </div>
    <?php
}
add_action('digifusion_before_footer_copyright', 'digifusion_child_add_newsletter_signup');

Adding Back to Top Button After Footer

function digifusion_child_add_back_to_top() {
    ?>
    <button class="back-to-top" aria-label="Back to top">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
        </svg>
    </button>
    <?php
}
add_action('digifusion_after_footer', 'digifusion_child_add_back_to_top');

Adding Custom Copyright Text

function digifusion_child_add_custom_copyright() {
    ?>
    <div class="custom-copyright">
        <p>Made with ❤️ by Your Company Name</p>
    </div>
    <?php
}
add_action('digifusion_after_footer_copyright', 'digifusion_child_add_custom_copyright');

Styling Footer Elements

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

/* Footer Social Links */
.footer-social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
    background: #f8f9fa;
}

.footer-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.footer-social-links a:hover {
    background: #007cba;
}

/* Footer Newsletter */
.footer-newsletter {
    padding: 1rem 0;
    text-align: center;
}

.newsletter-form {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    gap: 0.5rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.newsletter-form button {
    padding: 0.75rem 1.5rem;
    background: #007cba;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.newsletter-form button:hover {
    background: #005a87;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: #007cba;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #005a87;
    transform: translateY(-2px);
}

/* Custom Copyright */
.custom-copyright {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    margin-top: 1rem;
}

.custom-copyright p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column;
    }
    
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }
    
    .footer-social-links {
        padding: 1rem 0;
    }
}

Adding JavaScript Functionality

Create assets/js/footer-elements.js in your child theme directory:

document.addEventListener('DOMContentLoaded', function() {
    // Back to top functionality
    const backToTopButton = document.querySelector('.back-to-top');
    
    if (backToTopButton) {
        // Show/hide button based on scroll position
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.add('visible');
            } else {
                backToTopButton.classList.remove('visible');
            }
        });
        
        // Smooth scroll to top when clicked
        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
    
    // Newsletter form submission
    const newsletterForm = document.querySelector('.newsletter-form');
    
    if (newsletterForm) {
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = this.querySelector('input[type="email"]').value;
            const button = this.querySelector('button');
            const originalText = button.textContent;
            
            // Basic email validation
            if (!email || !email.includes('@')) {
                alert('Please enter a valid email address');
                return;
            }
            
            // Show loading state
            button.textContent = 'Subscribing...';
            button.disabled = true;
            
            // Simulate API call (replace with actual implementation)
            setTimeout(function() {
                button.textContent = 'Subscribed!';
                newsletterForm.querySelector('input').value = '';
                
                setTimeout(function() {
                    button.textContent = originalText;
                    button.disabled = false;
                }, 2000);
            }, 1000);
        });
    }
});

Enqueue the JavaScript file by adding this to your child theme’s functions.php:

function digifusion_child_enqueue_footer_scripts() {
    wp_enqueue_script(
        'digifusion-child-footer-elements',
        get_stylesheet_directory_uri() . '/assets/js/footer-elements.js',
        array(),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'digifusion_child_enqueue_footer_scripts');

Conditional Hook Usage

You can also add content conditionally based on page type:

function digifusion_child_conditional_footer_content() {
    if (is_front_page()) {
        echo '<div class="homepage-footer-banner">Special homepage message</div>';
    } elseif (is_single()) {
        echo '<div class="post-footer-cta">Read more articles like this</div>';
    }
}
add_action('digifusion_before_footer_bottom', 'digifusion_child_conditional_footer_content');

This approach allows you to customize the footer area extensively while maintaining theme updates and keeping your customizations organized in the child theme.