admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'mmb_admin_nonce' ), 'media_title' => __( 'Select Icon/Image', 'mega-menu-builder' ), 'media_button' => __( 'Use this file', 'mega-menu-builder' ), ) ); } } /** * Enqueue frontend scripts and styles. */ public function enqueue_frontend_scripts() { // Enqueue frontend CSS wp_enqueue_style( 'mmb-frontend-style', MMB_PLUGIN_URL . 'assets/css/mega-menu.css', array(), '1.0' ); // Enqueue frontend JS wp_enqueue_script( 'mmb-frontend-script', MMB_PLUGIN_URL . 'assets/js/mega-menu.js', array( 'jquery' ), '1.0', true ); } } // Initialize the plugin new Mega_Menu_Builder(); ?> _x( 'Mega Menu Panels', 'Post Type General Name', 'mega-menu-builder' ), 'singular_name' => _x( 'Mega Menu Panel', 'Post Type Singular Name', 'mega-menu-builder' ), 'menu_name' => __( 'Mega Menu Panels', 'mega-menu-builder' ), 'name_admin_bar' => __( 'Mega Menu Panel', 'mega-menu-builder' ), 'archives' => __( 'Panel Archives', 'mega-menu-builder' ), 'attributes' => __( 'Panel Attributes', 'mega-menu-builder' ), 'parent_item_colon' => __( 'Parent Panel:', 'mega-menu-builder' ), 'all_items' => __( 'All Panels', 'mega-menu-builder' ), 'add_new_item' => __( 'Add New Panel', 'mega-menu-builder' ), 'add_new' => __( 'Add New', 'mega-menu-builder' ), 'new_item' => __( 'New Panel', 'mega-menu-builder' ), 'edit_item' => __( 'Edit Panel', 'mega-menu-builder' ), 'update_item' => __( 'Update Panel', 'mega-menu-builder' ), 'view_item' => __( 'View Panel', 'mega-menu-builder' ), 'view_items' => __( 'View Panels', 'mega-menu-builder' ), 'search_items' => __( 'Search Panel', 'mega-menu-builder' ), 'not_found' => __( 'Not found', 'mega-menu-builder' ), 'not_found_in_trash' => __( 'Not found in Trash', 'mega-menu-builder' ), 'featured_image' => __( 'Featured Image', 'mega-menu-builder' ), 'set_featured_image' => __( 'Set featured image', 'mega-menu-builder' ), 'remove_featured_image' => __( 'Remove featured image', 'mega-menu-builder' ), 'use_featured_image' => __( 'Use as featured image', 'mega-menu-builder' ), 'insert_into_item' => __( 'Insert into panel', 'mega-menu-builder' ), 'uploaded_to_this_item' => __( 'Uploaded to this panel', 'mega-menu-builder' ), 'items_list' => __( 'Panels list', 'mega-menu-builder' ), 'items_list_navigation' => __( 'Panels list navigation', 'mega-menu-builder' ), 'filter_items_list' => __( 'Filter panels list', 'mega-menu-builder' ), ); $args = array( 'label' => __( 'Mega Menu Panel', 'mega-menu-builder' ), 'description' => __( 'Custom post type for Mega Menu panel content.', 'mega-menu-builder' ), 'labels' => $labels, 'supports' => array( 'title', 'editor', 'revisions' ), // Add editor support for basic content blocks 'hierarchical' => false, 'public' => false, // Not publicly viewable on the frontend via its own URL 'show_ui' => true, 'show_in_menu' => true, 'menu_position' => 25, // Below Comments 'menu_icon' => 'dashicons-layout', 'show_in_admin_bar' => true, 'show_in_nav_menus' => false, // Do not show in standard nav menus list 'can_export' => true, 'has_archive' => false, 'exclude_from_search' => true, 'publicly_queryable' => false, 'capability_type' => 'post', 'show_in_rest' => true, // Enable Gutenberg/REST API if needed ); register_post_type( 'mega_menu_panel', $args ); } } ?> ID, '_mmb_panel_content_data', true ); // Default structure (can be expanded with repeatable fields) $panel_data = is_array( $panel_data ) ? $panel_data : array( array( 'type' => 'menu_items', 'value' => '' ), // Example: Display children menu items array( 'type' => 'image', 'value' => '' ), array( 'type' => 'video_embed', 'value' => '' ), array( 'type' => 'html', 'value' => '' ), ); // Output fields (simplified - ideally this would be dynamic/repeatable) ?>

<?php echo esc_textarea( $panel_data[2]['value'] ?? '' ); ?>

<?php echo esc_textarea( $panel_data[3]['value'] ?? '' ); ?>

$type, 'value' => $value ); } } update_post_meta( $post_id, '_mmb_panel_content_data', $sanitized_data ); } else { delete_post_meta( $post_id, '_mmb_panel_content_data' ); } } } ?> 'mega_menu_panel', 'posts_per_page' => -1, 'orderby' => 'title', 'order' => 'ASC', 'fields' => 'ids', // Get only IDs for performance ) ); ?>

<?php echo esc_textarea( $icon_svg ); ?>

0 ) { update_post_meta( $menu_item_db_id, '_mmb_panel_id', $panel_id ); } else { delete_post_meta( $menu_item_db_id, '_mmb_panel_id' ); } // Save Icon URL $icon_url = isset( $_POST['menu-item-mmb-icon-url'][$menu_item_db_id] ) ? esc_url_raw( $_POST['menu-item-mmb-icon-url'][$menu_item_db_id] ) : ''; if ( ! empty( $icon_url ) ) { update_post_meta( $menu_item_db_id, '_mmb_icon_url', $icon_url ); } else { delete_post_meta( $menu_item_db_id, '_mmb_icon_url' ); } // Save Icon SVG $icon_svg = isset( $_POST['menu-item-mmb-icon-svg'][$menu_item_db_id] ) ? wp_kses_post( $_POST['menu-item-mmb-icon-svg'][$menu_item_db_id] ) : ''; if ( ! empty( $icon_svg ) ) { update_post_meta( $menu_item_db_id, '_mmb_icon_svg', $icon_svg ); } else { delete_post_meta( $menu_item_db_id, '_mmb_icon_svg' ); } } /** * Load custom fields into the menu item object. * * @param object $menu_item The menu item object. * @return object */ public function setup_menu_item_fields( $menu_item ) { $menu_item->mmb_is_mega_menu = get_post_meta( $menu_item->ID, '_mmb_is_mega_menu', true ); $menu_item->mmb_panel_id = get_post_meta( $menu_item->ID, '_mmb_panel_id', true ); $menu_item->mmb_icon_url = get_post_meta( $menu_item->ID, '_mmb_icon_url', true ); $menu_item->mmb_icon_svg = get_post_meta( $menu_item->ID, '_mmb_icon_svg', true ); return $menu_item; } } ?> ' ); if ( $pos !== false ) { // Insert our custom fields just before the closing fieldset $custom_fields = $this->get_custom_fields( $item, $depth, $args, $id ); $item_output = substr_replace( $item_output, $custom_fields, $pos, 0 ); } $output .= $item_output; } /** * Get the custom fields HTML for a menu item. * * @param object $item Menu item object. * @param int $depth Depth of menu item. * @param array $args Arguments. * @param int $id Menu item ID. * @return string HTML for custom fields. */ protected function get_custom_fields( $item, $depth, $args = array(), $id = 0 ) { ob_start(); // Fields are added via the 'wp_nav_menu_item_custom_fields' action in Mega_Menu_Item_Meta // We just need to ensure the action is called here. // The action hook is called within the parent::start_el method, // but we need to ensure our Mega_Menu_Item_Meta class is hooked into it. // This method is primarily for adding wrapper divs or specific logic if needed, // but the actual fields are handled by the action hook. // The fields added by Mega_Menu_Item_Meta::add_menu_item_fields() // will appear within the standard menu item settings block. // We can add specific classes or wrappers here if needed for styling/JS targeting ?> is_rendering_mega_panel ) { // Do nothing for standard sub-levels within the panel rendering context // The panel content handles its own structure. return; } // Default behavior for non-mega menus parent::start_lvl( $output, $depth, $args ); } /** * Ends the list of after the elements are added. * * @see Walker_Nav_Menu::end_lvl() */ public function end_lvl( &$output, $depth = 0, $args = null ) { if ( $this->is_rendering_mega_panel ) { // Do nothing for standard sub-levels within the panel rendering context return; } // Default behavior for non-mega menus parent::end_lvl( $output, $depth, $args ); } /** * Starts the element output. * * @see Walker_Nav_Menu::start_el() */ public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) { // Check if this item is a mega menu parent $is_mega_menu = get_post_meta( $item->ID, '_mmb_is_mega_menu', true ); $panel_id = get_post_meta( $item->ID, '_mmb_panel_id', true ); $icon_url = get_post_meta( $item->ID, '_mmb_icon_url', true ); $icon_svg = get_post_meta( $item->ID, '_mmb_icon_svg', true ); // Add custom classes $item->classes[] = 'menu-item-' . $item->ID; if ( $is_mega_menu ) { $item->classes[] = 'mmb-mega-menu-item'; if ( $panel_id ) { $item->classes[] = 'mmb-has-panel'; } } if ( ! empty( $icon_url ) || ! empty( $icon_svg ) ) { $item->classes[] = 'mmb-has-icon'; } // Build the standard menu item output $item_output = parent::start_el( '', $item, $depth, $args, $id ); // Add icon/image/svg before the link text if available $icon_html = ''; if ( ! empty( $icon_svg ) ) { // Sanitize SVG - basic example, consider a dedicated SVG sanitizer $icon_html = '' . wp_kses( $icon_svg, array( 'svg' => array( 'xmlns' => true, 'viewbox' => true, 'width' => true, 'height' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'path' => array( 'd' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'circle' => array( 'cx' => true, 'cy' => true, 'r' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'rect' => array( 'x' => true, 'y' => true, 'width' => true, 'height' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'line' => array( 'x1' => true, 'y1' => true, 'x2' => true, 'y2' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'polygon' => array( 'points' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'polyline' => array( 'points' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'ellipse' => array( 'cx' => true, 'cy' => true, 'rx' => true, 'ry' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ) ) ) . ''; } elseif ( ! empty( $icon_url ) ) { $icon_html = '

'; } // Insert icon before the link text (assuming the link text is wrapped in ) if ( ! empty( $icon_html ) ) { $item_output = str_replace( '', $icon_html . '', $item_output ); } // If this is a mega menu parent, append the panel content if ( $is_mega_menu && $panel_id ) { $this->current_mega_menu_item_id = $item->ID; // Store parent ID if needed $this->is_rendering_mega_panel = true; // Flag that we are rendering the panel $panel_content_html = $this->render_mega_panel( $panel_id, $item ); // Append the panel HTML after the standard menu item link // This assumes the standard link is the only thing inside the

before the panel // You might need to adjust this based on your theme's menu structure $item_output .= $panel_content_html; $this->is_rendering_mega_panel = false; // Reset flag $this->current_mega_menu_item_id = 0; } $output .= $item_output; } /** * Ends the element output. * * @see Walker_Nav_Menu::end_el() */ public function end_el( &$output, $item, $depth = 0, $args = null ) { // If we are inside a mega menu panel rendering, don't end standard list items. // The panel content handles its own structure. if ( $this->is_rendering_mega_panel ) { // Do nothing for standard end_el within the panel rendering context return; } // Default behavior for non-mega menus parent::end_el( $output, $item, $depth, $args ); } /** * Renders the content of a mega menu panel. * * @param int $panel_id The ID of the mega_menu_panel post. * @param object $parent_item The parent menu item object. * @return string HTML content for the panel. */ protected function render_mega_panel( $panel_id, $parent_item ) { $panel_post = get_post( $panel_id ); if ( ! $panel_post || $panel_post->post_type !== 'mega_menu_panel' ) { return ''; } $panel_data = get_post_meta( $panel_id, '_mmb_panel_content_data', true ); if ( ! is_array( $panel_data ) || empty( $panel_data ) ) { // Fallback to post content if no structured data exists $content = apply_filters( 'the_content', $panel_post->post_content ); return ''; } ob_start(); ?>

ID // and loop through them, potentially using a sub-walker. $child_items = $this->get_child_menu_items( $parent_item->ID, $parent_item->menu_item_parent, $parent_item->db_id ); // Need to fetch children correctly if ( ! empty( $child_items ) ) { echo '

'; echo '

' . wp_kses( $child_icon_svg, array( 'svg' => array( 'xmlns' => true, 'viewbox' => true, 'width' => true, 'height' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'path' => array( 'd' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'circle' => array( 'cx' => true, 'cy' => true, 'r' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'rect' => array( 'x' => true, 'y' => true, 'width' => true, 'height' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'line' => array( 'x1' => true, 'y1' => true, 'x2' => true, 'y2' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'polygon' => array( 'points' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'polyline' => array( 'points' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ), 'ellipse' => array( 'cx' => true, 'cy' => true, 'rx' => true, 'ry' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'class' => true, 'style' => true ) ) ) . '

'; echo ''; echo $child_icon_html; // Icon before text echo apply_filters( 'the_title', $child_item->title, $child_item->ID ); echo ''; echo ''; } echo '

'; echo '

'; } break; case 'image': if ( ! empty( $value ) ) { echo '

'; echo '

'; // Add alt text if possible echo '

'; } break; case 'video_embed': if ( ! empty( $value ) ) { echo '

'; // Use wp_oembed_get for URLs or just output the code if ( filter_var( $value, FILTER_VALIDATE_URL ) ) { echo wp_oembed_get( $value ); } else { echo wp_kses_post( $value ); // Output raw embed code, sanitized } echo '

'; } break; case 'html': if ( ! empty( $value ) ) { echo '

'; echo wp_kses_post( $value ); // Output custom HTML, sanitized echo '

'; } break; // Add cases for other block types } } ?>

menu_items. $child_items = array(); if ( isset( $this->db_fields ) && isset( $this->db_fields['parent'] ) ) { $parent_key = $this->db_fields['parent']; // Typically 'menu_item_parent' $id_key = $this->db_fields['id']; // Typically 'db_id' // Loop through all items in the menu (available in $args->menu_items, but not directly here) // A better way is to build the tree structure in wp_nav_menu_args filter // and pass it to the walker, or fetch it here if performance allows. // Let's simulate fetching children based on parent_db_id // This requires access to the full list of items, which the default Walker_Nav_Menu // doesn't easily provide in start_el for arbitrary lookups. // A simpler (but less flexible) approach for the 'menu_items' block // is to just list the direct children that the walker *would* have processed // if it wasn't a mega menu. But the panel content is separate. // Let's assume for this basic implementation that the 'menu_items' block // will render the direct children of the current mega menu item. // We need to find these children from the global list of menu items. // The full list is available in $args->menu_items when the walker is instantiated. // We need to store this list in the walker instance. // Re-fetching items here is inefficient, but demonstrates the concept. // In a real plugin, pass the full item list or tree to the walker. $menu_items = wp_get_nav_menu_items( $menu_id ); // This is inefficient if called for every mega menu item if ( $menu_items ) { foreach ( $menu_items as $menu_item ) { // Check if this item's parent is the current mega menu item's db_id if ( $menu_item->menu_item_parent == $parent_db_id ) { $child_items[] = $menu_item; } } } } return $child_items; } } ?> /* Basic Admin Styles for Mega Menu Fields */ .mmb-menu-item-settings .field-mmb-mega-menu, .mmb-menu-item-settings .field-mmb-panel, .mmb-menu-item-settings .field-mmb-icon, .mmb-menu-item-settings .field-mmb-icon-svg { margin-top: 1em; padding-top: 1em; border-top: 1px solid #eee; } .mmb-menu-item-settings .field-mmb-icon-url { width: calc(100% - 120px); /* Adjust based on button width */ display: inline-block; vertical-align: top; } .mmb-menu-item-settings .mmb-upload-icon-button { vertical-align: top; } /* Styles for the Panel Content Meta Box */ #mmb-panel-content-wrapper .mmb-panel-block { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; background: #f9f9f9; } #mmb-panel-content-wrapper .mmb-panel-block h4 { margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; } #mmb-panel-content-wrapper .mmb-panel-block label { font-weight: bold; display: block; margin-bottom: 5px; } #mmb-panel-content-wrapper .mmb-panel-block input[type="text"], #mmb-panel-content-wrapper .mmb-panel-block textarea { width: 100%; box-sizing: border-box; } .mmb-panel-block .mmb-upload-image-button { margin-top: 5px; } jQuery(document).ready(function($) { // --- Media Uploader for Icon/Image URL --- $(document).on('click', '.mmb-upload-icon-button', function(e) { e.preventDefault(); var button = $(this); var inputField = button.prev('.mmb-icon-url'); // Get the URL input field var custom_uploader = wp.media({ title: mmb_admin_params.media_title, library: { type: 'image' }, button: { text: mmb_admin_params.media_button }, multiple: false }); custom_uploader.on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); inputField.val(attachment.url); // Set the URL in the input field }); custom_uploader.open(); }); // --- Media Uploader for Panel Image Block (if using static fields) --- $(document).on('click', '#mmb-panel-content-wrapper .mmb-upload-image-button', function(e) { e.preventDefault(); var button = $(this); var inputField = button.prev('input[type="text"]'); // Get the URL input field var custom_uploader = wp.media({ title: mmb_admin_params.media_title, library: { type: 'image' }, button: { text: mmb_admin_params.media_button }, multiple: false }); custom_uploader.on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); inputField.val(attachment.url); // Set the URL in the input field }); custom_uploader.open(); }); // --- Add JS for repeatable fields in Panel Meta Box (Placeholder) --- // This would require significant JS to handle adding, removing, sorting blocks. // Example: // $(document).on('click', '.mmb-add-block-button', function() { // // Clone a template block, update names/IDs, append to wrapper // }); // $(document).on('click', '.mmb-remove-block-button', function() { // // Remove the block element // }); // $('#mmb-panel-content-wrapper').sortable({...}); // Enable sorting }); /* Basic Frontend Styles for Mega Menu */ /* Ensure the mega menu panel is hidden by default */ .mmb-mega-menu-panel { display: none; position: absolute; /* Or relative, depending on parent positioning */ left: 0; /* Align to the left edge of the menu/container */ width: 100%; /* Take full width of the menu/container */ background-color: #fff; /* Example background */ border: 1px solid #ccc; /* Example border */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Example shadow */ z-index: 100; /* Ensure it appears above other content */ padding: 20px; /* Example padding */ box-sizing: border-box; } /* Style for the mega menu parent item */ .mmb-mega-menu-item { position: relative; /* Needed for absolute positioning of the panel */ } /* Show the panel on hover (or use JS for click) */ .mmb-mega-menu-item:hover > .mmb-mega-menu-panel { display: block; } /* Style the inner content blocks */ .mmb-mega-menu-panel .mmb-panel-inner { display: flex; /* Example: Use flexbox for columns */ gap: 20px; /* Space between columns */ } .mmb-mega-menu-panel .mmb-panel-block { flex: 1; /* Example: Make blocks take equal width */ /* Add specific styles for different block types */ } .mmb-mega-menu-panel .mmb-block-menu-items ul { list-style: none; margin: 0; padding: 0; } .mmb-mega-menu-panel .mmb-block-menu-items li { margin-bottom: 5px; } .mmb-mega-menu-panel .mmb-block-image img { max-width: 100%; height: auto; } .mmb-mega-menu-panel .mmb-block-video iframe, .mmb-mega-menu-panel .mmb-block-video embed, .mmb-mega-menu-panel .mmb-block-video object { max-width: 100%; height: auto; /* Or set a fixed aspect ratio */ } /* Style for icons next to links */ .mmb-has-icon a .mmb-icon { display: inline-block; vertical-align: middle; margin-right: 8px; /* Space between icon and text */ width: 1.2em; /* Example size */ height: 1.2em; /* Example size */ fill: currentColor; /* Inherit text color for SVGs */ } .mmb-has-icon a .mmb-icon-img { max-width: 1.2em; max-height: 1.2em; } /* Adjust link padding if needed to accommodate icons */ .mmb-has-icon a { display: flex; /* Use flex to align icon and text */ align-items: center; } jQuery(document).ready(function($) { // Basic hover functionality for mega menus // You might need to adjust selectors based on your theme's menu structure $('.mmb-mega-menu-item').hover( function() { $(this).find('.mmb-mega-menu-panel').first().stop(true, true).slideDown(200); }, function() { $(this).find('.mmb-mega-menu-panel').first().stop(true, true).slideUp(200); } ); // Optional: Add click functionality for touch devices // This requires more complex logic to handle toggling and closing // when clicking outside the menu. });