Castos Mega Menu Builder with SVG Sprites

castos-mega-menu-sprites.php

<?php
/**
 * Castos Mega Menu Options page
 * Purpose: store location of SVG Sprite and display preview of sprite symbols
 * Retrieve sprite URL options with:
 * $castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
 * $svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
 */
class CastosMegaMenu {
    private $castos_mega_menu_options;
    
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'castos_mega_menu_add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'castos_mega_menu_page_init' ) );
    }
    
    public function castos_mega_menu_add_plugin_page() {
        add_theme_page(
            'Castos Mega Menu', // page_title
            'Castos Mega Menu', // menu_title
            'manage_options', // capability
            'castos-mega-menu', // menu_slug
            array( $this, 'castos_mega_menu_create_admin_page' ) // function
        );
    }
    
    public function castos_mega_menu_create_admin_page() {
        $this->castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); ?>
        
        <div class="wrap">
            <h2>Castos Mega Menu</h2>
            <p>This is a test options page</p>
            <?php settings_errors(); ?>
            
            <form method="post" action="options.php">
                <?php
                settings_fields( 'castos_mega_menu_option_group' );
                do_settings_sections( 'castos-mega-menu-admin' );
                submit_button();
                ?>
            </form>
        </div>
        <?php
        
    }
    
    public function castos_mega_menu_page_init() {
        register_setting(
            'castos_mega_menu_option_group', // option_group
            'castos_mega_menu_option_name', // option_name
            array( $this, 'castos_mega_menu_sanitize' ) // sanitize_callback
        );
        
        add_settings_section(
            'castos_mega_menu_setting_section', // id
            'Settings', // title
            array( $this, 'castos_mega_menu_section_info' ), // callback
            'castos-mega-menu-admin' // page
        );
        
        add_settings_field(
            'svg_sprite_url_0', // id
            'SVG Sprite URL', // title
            array( $this, 'svg_sprite_url_0_callback' ), // callback
            'castos-mega-menu-admin', // page
            'castos_mega_menu_setting_section' // section
        );
    }
    
    public function castos_mega_menu_sanitize($input) {
        $sanitary_values = array();
        if ( isset( $input['svg_sprite_url_0'] ) ) {
            $sanitary_values['svg_sprite_url_0'] = sanitize_text_field( $input['svg_sprite_url_0'] );
        }
        
        return $sanitary_values;
    }
    
    public function castos_mega_menu_section_info() {
        $castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
        $svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
        if ($svg_sprite_url_0) {
            $dom = new DomDocument();
            $dom->load($svg_sprite_url_0);
            $symbols = $dom->getElementsByTagName('symbol');
            echo '<div class="icons-container">';
            foreach ($symbols as $symbol) {
                $symbol_ref = substr($symbol->getAttribute('id'), 5);
                echo '<div class="icons-item"><svg width="40px" height="40px" class="icon"><use xlink:href="'.$svg_sprite_url_0.'#icon-'. $symbol_ref .'"></use></svg><span>', $symbol_ref , '</span></div>';
            }
            echo '</div>';
            echo '<style>.icons-container {display: flex; flex-wrap: wrap;}.icons-item{flex-basis: 250px; display: flex; align-items: center; padding: 10px; background-color: #fff; margin: 0 10px 10px 0;}.icons-item svg{margin-right: 20px;}</style>';
        }
    }
    public function svg_sprite_url_0_callback() {
        printf(
            '<input class="regular-text" type="text" name="castos_mega_menu_option_name[svg_sprite_url_0]" id="svg_sprite_url_0" value="%s">',
            isset( $this->castos_mega_menu_options['svg_sprite_url_0'] ) ? esc_attr( $this->castos_mega_menu_options['svg_sprite_url_0']) : ''
        );
    }
}
if ( is_admin() ) {
	$castos_mega_menu = new CastosMegaMenu();
}

/**
 * Castos Mega Menu Builder
 * Purpose: Add wp_nav_menu_item_custom_fields for Item Descrition, SVG Icon and CTA content
 */

// register custom fields and input form
function castos_menu_item_desc( $item_id, $item ) {
    wp_nonce_field('castos_custom_menu_meta_nonce', '_castos_custom_menu_meta_nonce_name');
    $menu_item_desc = get_post_meta( $item_id, '_castos_menu_item_desc', true );
    $menu_item_svg = get_post_meta( $item_id, '_castos_menu_item_svg', true );
    $menu_item_cta = get_post_meta( $item_id, '_castos_menu_item_cta', true );
    ?>
    <input type="hidden" name="castos_custom_menu_meta_nonce" value="<?php echo wp_create_nonce('castos_custom_menu_meta_nonce'); ?>" />
    <div style="clear: both;">
        <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br />
        <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
        <div class="logged-input-holder">
            <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" id="menu-item-desc-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_item_desc ); ?>" />
        </div>
    </div>
    <div style="clear: both;">
        <span class="svg"><?php _e( "Item SVG", 'menu-item-svg' ); ?></span><br />
        <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
        <div class="logged-input-holder">
            <input type="text" name="menu_item_svg[<?php echo $item_id ;?>]" id="menu-item-svg-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_item_svg ); ?>" />
        </div>
    </div>
    <div style="clear: both;">
        <span class="cta"><?php _e( "Item CTA", 'menu-item-cta' ); ?></span><br />
        <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
        <div class="logged-input-holder">
            <input type="text" name="menu_item_cta[<?php echo $item_id ;?>]" id="menu-item-cta-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_item_cta ); ?>" />
        </div>
    </div>
    <?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'castos_menu_item_desc', 10, 2 );

// Save custom field values
function castos_save_menu_item_desc( $menu_id, $menu_item_db_id ) {
    if ( ! isset( $_POST['_castos_custom_menu_meta_nonce_name'] ) || ! wp_verify_nonce( $_POST['_castos_custom_menu_meta_nonce_name'], 'castos_custom_menu_meta_nonce' ) ) {
        return $menu_id;
    }
    if ( isset( $_POST['menu_item_desc'][$menu_item_db_id]  ) ) {
        $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] );
        update_post_meta( $menu_item_db_id, '_castos_menu_item_desc', $sanitized_data );
    } else {
        delete_post_meta( $menu_item_db_id, '_castos_menu_item_desc' );
    }
    if ( isset( $_POST['menu_item_svg'][$menu_item_db_id]  ) ) {
        $sanitized_data = sanitize_text_field( $_POST['menu_item_svg'][$menu_item_db_id] );
        update_post_meta( $menu_item_db_id, '_castos_menu_item_svg', $sanitized_data );
    } else {
        delete_post_meta( $menu_item_db_id, '_castos_menu_item_svg' );
    }
    if ( isset( $_POST['menu_item_cta'][$menu_item_db_id]  ) ) {
        $sanitized_data = sanitize_text_field( $_POST['menu_item_cta'][$menu_item_db_id] );
        update_post_meta( $menu_item_db_id, '_castos_menu_item_cta', $sanitized_data );
    } else {
        delete_post_meta( $menu_item_db_id, '_castos_menu_item_cta' );
    }
}
add_action( 'wp_update_nav_menu_item', 'castos_save_menu_item_desc', 10, 2 );

// Conditionally display front end HTML
function castos_show_menu_item_desc( $title, $item ) {
    $castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
    $svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
    if( is_object( $item ) && isset( $item->ID ) ) {
        $menu_item_desc = get_post_meta( $item->ID, '_castos_menu_item_desc', true );
        $menu_item_svg = get_post_meta( $item->ID, '_castos_menu_item_svg', true );
        $menu_item_cta = get_post_meta( $item->ID, '_castos_menu_item_cta', true );
        if ( ! empty( $menu_item_svg ) && empty( $menu_item_cta ) ) {
            $title = '<svg width="40px" height="40px" class="icon"><use xlink:href="'.$svg_sprite_url_0.'#icon-'. $menu_item_svg .'"></use></svg><div class="title-wrap"><span class="menu-title">' . $title . '</span><p class="menu-item-desc">' . $menu_item_desc . '</p></div>';
        } if ( ! empty( $menu_item_cta ) ) {
            $title = '<div class="cta-wrap"><span class="menu-title">' . $title . '</span><p class="menu-item-desc">' . $menu_item_desc . '</p><span class="cta-button">' . $menu_item_cta . '</span></div>';
        }
    }
    return $title;
}
add_filter( 'nav_menu_item_title', 'castos_show_menu_item_desc', 10, 2 );