JezK

Edit File: advaxe-footer.php

<?php
/*
Plugin Name: Advaxe Footer 
Description: Pixel-perfect responsive footer matching your design (4 Columns on Desktop, Customized Mobile View) with dynamic links, address and colors.
Version: 3.1
Author: Advaxe
*/

if ( ! defined( 'ABSPATH' ) ) exit;

// 1. CREATE ADMIN MENU
add_action('admin_menu', 'advaxe_footer_menu');
function advaxe_footer_menu() {
    add_menu_page('Footer Settings', 'Advaxe Footer', 'manage_options', 'advaxe-footer', 'advaxe_footer_settings_page', 'dashicons-layout', 100);
}

// 2. ADMIN PAGE HTML & SAVING LOGIC
function advaxe_footer_settings_page() {
    if (isset($_POST['save_advaxe_settings'])) {
        // Text & Links
        update_option('advaxe_footer_logo', sanitize_text_field($_POST['footer_logo']));
        update_option('advaxe_fb_link', sanitize_url($_POST['fb_link']));
        update_option('advaxe_ig_link', sanitize_url($_POST['ig_link']));
        update_option('advaxe_yt_link', sanitize_url($_POST['yt_link']));
        update_option('advaxe_wa_link', sanitize_url($_POST['wa_link']));
        update_option('advaxe_payment_img', sanitize_text_field($_POST['payment_img']));
        update_option('advaxe_phone', sanitize_text_field($_POST['advaxe_phone'])); 
        update_option('advaxe_email', sanitize_text_field($_POST['advaxe_email']));
        update_option('advaxe_address', sanitize_text_field($_POST['advaxe_address']));
        
        // Colors
        update_option('advaxe_icon_color', sanitize_hex_color($_POST['advaxe_icon_color']));

// Size Controls
        update_option('advaxe_logo_height', intval($_POST['advaxe_logo_height']));
        update_option('advaxe_payment_height', intval($_POST['advaxe_payment_height']));
        update_option('advaxe_social_size', intval($_POST['advaxe_social_size']));

// Quick Links & Support Links Saving Loop
        for ($i = 1; $i <= 5; $i++) {
            update_option('advaxe_ql_'.$i.'_label', sanitize_text_field($_POST['advaxe_ql_'.$i.'_label']));
            update_option('advaxe_ql_'.$i.'_url', sanitize_text_field($_POST['advaxe_ql_'.$i.'_url']));
            update_option('advaxe_sl_'.$i.'_label', sanitize_text_field($_POST['advaxe_sl_'.$i.'_label']));
            update_option('advaxe_sl_'.$i.'_url', sanitize_text_field($_POST['advaxe_sl_'.$i.'_url']));
        }

echo '<div class="updated"><p>Settings saved successfully!</p></div>';
    }

// Retrieve Options (Defaults set here)
    $logo = get_option('advaxe_footer_logo', '');
    $payment = get_option('advaxe_payment_img', '');
    $fb = get_option('advaxe_fb_link', '#');
    $ig = get_option('advaxe_ig_link', '#');
    $yt = get_option('advaxe_yt_link', '#');
    $wa = get_option('advaxe_wa_link', '#');
    $phone = get_option('advaxe_phone', '+8801XXXXXXXXX');
    $email = get_option('advaxe_email', 'support@yourstore.com');
    $address = get_option('advaxe_address', 'Dhaka, Bangladesh');
    $icon_color = get_option('advaxe_icon_color', '#00796b');
    
    // Size Defaults
    $logo_h = get_option('advaxe_logo_height', 60);
    $pay_h = get_option('advaxe_payment_height', 40);
    $social_s = get_option('advaxe_social_size', 36);

// Default Links Setup
    $default_ql = [
        1 => ['label' => 'About Us', 'url' => '/about-us'],
        2 => ['label' => 'Contact Us', 'url' => '/contact'],
        3 => ['label' => 'FAQ', 'url' => '/faq'],
        4 => ['label' => 'Track Order', 'url' => '/track-order'],
        5 => ['label' => 'Return Policy', 'url' => '/return-policy'],
    ];

$default_sl = [
        1 => ['label' => 'Help Center', 'url' => '/help-center'],
        2 => ['label' => 'How to Order', 'url' => '/how-to-order'],
        3 => ['label' => 'Shipping Info', 'url' => '/shipping'],
        4 => ['label' => 'Refund Policy', 'url' => '/refund'],
        5 => ['label' => 'Live Chat', 'url' => '/live-chat'],
    ];
    
    wp_enqueue_media();
    ?>
    <div class="wrap">
        <h1>Advaxe Footer Design Settings</h1>
        <form method="post">
            <table class="form-table">
                <tr>
                    <th scope="row">Brand Logo</th>
                    <td>
                        <input type="text" name="footer_logo" id="footer_logo" value="<?php echo esc_attr($logo); ?>" class="regular-text">
                        <input type="button" class="upload_img_btn button" data-target="#footer_logo" value="Upload Logo"><br>
                        <label>Logo Height (px): </label>
                        <input type="number" name="advaxe_logo_height" value="<?php echo esc_attr($logo_h); ?>" style="width: 80px;"> px (Width will be auto)
                    </td>
                </tr>

<tr>
                    <th scope="row">Contact Info & Styling</th>
                    <td>
                        Address: <input type="text" name="advaxe_address" value="<?php echo esc_attr($address); ?>" class="regular-text"><br><br>
                        Phone: <input type="text" name="advaxe_phone" value="<?php echo esc_attr($phone); ?>" class="regular-text"><br><br>
                        Email: <input type="text" name="advaxe_email" value="<?php echo esc_attr($email); ?>" class="regular-text"><br><br>
                        Icon Color: <input type="color" name="advaxe_icon_color" value="<?php echo esc_attr($icon_color); ?>">
                    </td>
                </tr>

<tr>
                    <th scope="row">Quick Links</th>
                    <td>
                        <?php for ($i = 1; $i <= 5; $i++) { 
                            $ql_label = get_option('advaxe_ql_'.$i.'_label', $default_ql[$i]['label']);
                            $ql_url = get_option('advaxe_ql_'.$i.'_url', $default_ql[$i]['url']);
                        ?>
                            Link <?php echo $i; ?> Label: <input type="text" name="advaxe_ql_<?php echo $i; ?>_label" value="<?php echo esc_attr($ql_label); ?>" style="width: 150px;">
                            Slug/URL: <input type="text" name="advaxe_ql_<?php echo $i; ?>_url" value="<?php echo esc_attr($ql_url); ?>" class="regular-text"><br><br>
                        <?php } ?>
                    </td>
                </tr>

<tr>
                    <th scope="row">Customer Support Links</th>
                    <td>
                        <?php for ($i = 1; $i <= 5; $i++) { 
                            $sl_label = get_option('advaxe_sl_'.$i.'_label', $default_sl[$i]['label']);
                            $sl_url = get_option('advaxe_sl_'.$i.'_url', $default_sl[$i]['url']);
                        ?>
                            Link <?php echo $i; ?> Label: <input type="text" name="advaxe_sl_<?php echo $i; ?>_label" value="<?php echo esc_attr($sl_label); ?>" style="width: 150px;">
                            Slug/URL: <input type="text" name="advaxe_sl_<?php echo $i; ?>_url" value="<?php echo esc_attr($sl_url); ?>" class="regular-text"><br><br>
                        <?php } ?>
                    </td>
                </tr>

<tr>
                    <th scope="row">Payment Image</th>
                    <td>
                        <input type="text" name="payment_img" id="payment_img" value="<?php echo esc_attr($payment); ?>" class="regular-text">
                        <input type="button" class="upload_img_btn button" data-target="#payment_img" value="Upload Image"><br>
                        <label>Image Height (px): </label>
                        <input type="number" name="advaxe_payment_height" value="<?php echo esc_attr($pay_h); ?>" style="width: 80px;"> px (Width will be auto)
                    </td>
                </tr>

<tr>
                    <th scope="row">Social Media</th>
                    <td>
                        <label>Icon Size (px): </label>
                        <input type="number" name="advaxe_social_size" value="<?php echo esc_attr($social_s); ?>" style="width: 80px;"> px<br><br>
                        Facebook: <input type="text" name="fb_link" value="<?php echo esc_attr($fb); ?>"><br>
                        Instagram: <input type="text" name="ig_link" value="<?php echo esc_attr($ig); ?>"><br>
                        YouTube: <input type="text" name="yt_link" value="<?php echo esc_attr($yt); ?>"><br>
                        WhatsApp: <input type="text" name="wa_link" value="<?php echo esc_attr($wa); ?>">
                    </td>
                </tr>
            </table>
            <input type="submit" name="save_advaxe_settings" class="button button-primary" value="Save Changes">
        </form>
    </div>
    <script>
        jQuery(document).ready(function($){
            $('.upload_img_btn').click(function(e) {
                e.preventDefault();
                var target = $(this).data('target');
                var image = wp.media({ title: 'Select Image', multiple: false }).open()
                .on('select', function(){
                    var url = image.state().get('selection').first().toJSON().url;
                    $(target).val(url);
                });
            });
        });
    </script>
    <?php
}

// 3. RENDER FOOTER
function advaxe_render_custom_footer() {
    $logo_url = get_option('advaxe_footer_logo');
    $pay_url = get_option('advaxe_payment_img');
    $phone = get_option('advaxe_phone', '+8801XXXXXXXXX');
    $email = get_option('advaxe_email', 'support@yourstore.com');
    $address = get_option('advaxe_address', 'Dhaka, Bangladesh');
    $icon_color = get_option('advaxe_icon_color', '#00796b');

// Get Size Options
    $logo_h = get_option('advaxe_logo_height', 60);
    $pay_h = get_option('advaxe_payment_height', 40);
    $social_s = get_option('advaxe_social_size', 36);

wp_enqueue_style( 'dashicons' );
    ?>
    
    <style>
        /* ISOLATION ID: #advaxe-pro-footer-wrapper */

/* 1. Main Wrapper */
        #advaxe-pro-footer-wrapper {
            background-color: #ffffff;
            width: 100%;
            margin-top: 50px;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.06);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            box-sizing: border-box;
            position: relative;
            z-index: 99;
        }

#advaxe-pro-footer-wrapper .advaxe-inner-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px 30px 20px;
            box-sizing: border-box;
        }

/* 2. Grid Layout */
        #advaxe-pro-footer-wrapper .advaxe-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* Desktop: 4 Columns */
            gap: 14px;
            margin-bottom: 20px;
        }

/* Reset styles */
        #advaxe-pro-footer-wrapper h4,
        #advaxe-pro-footer-wrapper ul,
        #advaxe-pro-footer-wrapper li,
        #advaxe-pro-footer-wrapper p,
        #advaxe-pro-footer-wrapper a {
            margin: 0;
            padding: 0;
            line-height: normal;
            text-decoration: none;
            box-sizing: border-box;
            list-style: none;
        }

/* Typography */
        #advaxe-pro-footer-wrapper h4 {
            font-size: 18px;
            font-weight: 700;
            color: #222;
            margin-bottom: 25px;
        }

#advaxe-pro-footer-wrapper ul li {
            margin-bottom: 12px;
        }

#advaxe-pro-footer-wrapper ul li a {
            color: #555;
            font-size: 15px;
            transition: color 0.2s ease;
            display: inline-block;
        }

#advaxe-pro-footer-wrapper ul li a:hover {
            color: <?php echo esc_attr($icon_color); ?>; /* Hover color matches selected icon color */
            padding-left: 3px;
        }

/* --- Column 1: Brand Info --- */
        #advaxe-pro-footer-wrapper .logo-img {
            /* Width Auto, Height Controlled via PHP inline style */
            width: auto; 
            margin-bottom: 20px;
            display: block;
        }
        
        #advaxe-pro-footer-wrapper .trusted-text {
            color: #666;
            font-size: 15px;
            margin-bottom: 25px;
            line-height: 1.6;
        }

#advaxe-pro-footer-wrapper .contact-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: #444;
            font-size: 15px;
        }
        
        /* DYNAMIC ICON COLOR */
        #advaxe-pro-footer-wrapper .contact-row .dashicons {
            color: <?php echo esc_attr($icon_color); ?> !important; 
            margin-right: 12px;
            font-size: 20px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/* --- Column 4: Payment & Social --- */
        #advaxe-pro-footer-wrapper .payment-img {
            width: auto; /* Height controlled via PHP */
            margin-bottom: 25px;
            display: block;
        }

#advaxe-pro-footer-wrapper .social-icons-row {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

/* Round Icons & Size Control */
        #advaxe-pro-footer-wrapper .social-icons-row a img {
            /* Size controlled via PHP inline style */
            border-radius: 50%; /* Make it Round */
            transition: transform 0.2s;
            display: block;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        #advaxe-pro-footer-wrapper .social-icons-row a img:hover {
            transform: translateY(-3px);
            opacity: 0.9;
        }

/* Footer Bottom */
        #advaxe-pro-footer-wrapper .advaxe-bottom {
            border-top: 1px solid #eaeaea;
            padding-top: 15px;
            margin-top: 20px;
            text-align: center;
            color: #888;
            font-size: 14px;
        }

/* --- MOBILE RESPONSIVE LOGIC --- */
        @media (max-width: 900px) {
            #advaxe-pro-footer-wrapper .advaxe-grid {
                grid-template-columns: 1fr 1fr; /* Tablet: 2 cols */
            }
        }

@media (max-width: 600px) {
            #advaxe-pro-footer-wrapper .advaxe-grid {
                grid-template-columns: 1fr 1fr; /* Keep 2 Columns */
                gap: 10px;
            }

/* 1. Brand: Full Width */
            #advaxe-pro-footer-wrapper .advaxe-col-brand {
                grid-column: span 2; 
            }

/* 2. Links & Support: Side by Side */
            #advaxe-pro-footer-wrapper .advaxe-col-links {
                grid-column: span 1; /* Left side */
            }
            #advaxe-pro-footer-wrapper .advaxe-col-support {
                grid-column: span 1; /* Right side */
            }

/* 3. Payment: Full Width */
            #advaxe-pro-footer-wrapper .advaxe-col-payment {
                grid-column: span 2;
                margin-top: 10px;
            }

#advaxe-pro-footer-wrapper .advaxe-inner-container { 
                padding: 20px 20px 10px 20px; 
            }
        }
    </style>

<footer id="advaxe-pro-footer-wrapper">
        <div class="advaxe-inner-container">
            
            <div class="advaxe-grid">
                
                <div class="advaxe-col-brand">
                    <?php if($logo_url): ?>
                        <img src="<?php echo esc_url($logo_url); ?>" alt="Logo" class="logo-img" style="height: <?php echo $logo_h; ?>px;">
                    <?php else: ?>
                        <h2 style="margin:0 0 15px 0; font-size:26px; color:#0052cc;">Your<span style="color:#2ecc71;">Store</span></h2>
                    <?php endif; ?>
                    
                    <p class="trusted-text">Trusted Online Shopping Platform providing authentic products and fast delivery.</p>
                    
                    <div class="contact-row">
                        <span class="dashicons dashicons-location"></span>
                        <span><?php echo esc_html($address); ?></span>
                    </div>
                    <div class="contact-row">
                        <span class="dashicons dashicons-phone"></span>
                        <span><?php echo esc_html($phone); ?></span>
                    </div>
                    <div class="contact-row">
                        <span class="dashicons dashicons-email"></span>
                        <span><?php echo esc_html($email); ?></span>
                    </div>
                </div>

<div class="advaxe-col-links">
                    <h4>Quick Links</h4>
                    <ul>
                        <?php 
                        $default_ql = [
                            1 => ['label' => 'About Us', 'url' => '/about-us'],
                            2 => ['label' => 'Contact Us', 'url' => '/contact'],
                            3 => ['label' => 'FAQ', 'url' => '/faq'],
                            4 => ['label' => 'Track Order', 'url' => '/track-order'],
                            5 => ['label' => 'Return Policy', 'url' => '/return-policy'],
                        ];
                        for ($i = 1; $i <= 5; $i++) {
                            $label = get_option('advaxe_ql_'.$i.'_label', $default_ql[$i]['label']);
                            $url = get_option('advaxe_ql_'.$i.'_url', $default_ql[$i]['url']);
                            if(!empty($label)){
                                echo '<li><a href="'.esc_attr($url).'">'.esc_html($label).'</a></li>';
                            }
                        }
                        ?>
                    </ul>
                </div>

<div class="advaxe-col-support">
                    <h4>Customer Support</h4>
                    <ul>
                        <?php 
                        $default_sl = [
                            1 => ['label' => 'Help Center', 'url' => '/help-center'],
                            2 => ['label' => 'How to Order', 'url' => '/how-to-order'],
                            3 => ['label' => 'Shipping Info', 'url' => '/shipping'],
                            4 => ['label' => 'Refund Policy', 'url' => '/refund'],
                            5 => ['label' => 'Live Chat', 'url' => '/live-chat'],
                        ];
                        for ($i = 1; $i <= 5; $i++) {
                            $label = get_option('advaxe_sl_'.$i.'_label', $default_sl[$i]['label']);
                            $url = get_option('advaxe_sl_'.$i.'_url', $default_sl[$i]['url']);
                            if(!empty($label)){
                                echo '<li><a href="'.esc_attr($url).'">'.esc_html($label).'</a></li>';
                            }
                        }
                        ?>
                    </ul>
                </div>

<div class="advaxe-col-payment">
                    <h4>Payment Methods</h4>
                    <?php if($pay_url): ?>
                        <img src="<?php echo esc_url($pay_url); ?>" class="payment-img" alt="Payment Methods" style="height: <?php echo $pay_h; ?>px;">
                    <?php else: ?>
                        <p style="color:#aaa; font-style:italic;">(Upload payment image)</p>
                    <?php endif; ?>

<h4 style="margin-top:20px; font-size:16px;">Follow Us</h4>
                    <div class="social-icons-row">
                        <?php 
                        $icon_style = "width: {$social_s}px; height: {$social_s}px;";
                        ?>
                        
                        <?php if(get_option('advaxe_fb_link')) : ?>
                            <a href="<?php echo esc_url(get_option('advaxe_fb_link')); ?>">
                                <img src="https://cdn-icons-png.flaticon.com/512/5968/5968764.png" alt="FB" style="<?php echo $icon_style; ?>">
                            </a>
                        <?php endif; ?>
                        
                        <?php if(get_option('advaxe_ig_link')) : ?>
                            <a href="<?php echo esc_url(get_option('advaxe_ig_link')); ?>">
                                <img src="https://cdn-icons-png.flaticon.com/512/3955/3955024.png" alt="IG" style="<?php echo $icon_style; ?>">
                            </a>
                        <?php endif; ?>

<?php if(get_option('advaxe_yt_link')) : ?>
                            <a href="<?php echo esc_url(get_option('advaxe_yt_link')); ?>">
                                <img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YT" style="<?php echo $icon_style; ?>">
                            </a>
                        <?php endif; ?>

<?php if(get_option('advaxe_wa_link')) : ?>
                            <a href="<?php echo esc_url(get_option('advaxe_wa_link')); ?>">
                                <img src="https://cdn-icons-png.flaticon.com/512/3670/3670051.png" alt="WA" style="<?php echo $icon_style; ?>">
                            </a>
                        <?php endif; ?>
                    </div>
                </div>

</div>

</div>
    </footer>
    <?php
}
add_action('wp_footer', 'advaxe_render_custom_footer');
?>