JetEngine profile builder menu and dropbar

gistfile1.txt

UPDATED: 22.07.2024: User role functionality has been added to WordPress menus.
Remember to select a user role for any specific menu item if applicable.

Copy the following PHP code and create a PHP snippet using your snippet plugin. Paste the code into the plugin and save it.

This code snippet integrates the JetEngine Profile Builder menu into the WordPress menu system. 
After adding this code, you will see a new menu item named "My Templates" on the left side of the WordPress menus. 
Create a new menu and add the desired items from "My Templates". Save the menu, and you can then use any navigation 
menu or megamenu widget to display the menu you just created.

_______________________________________________

// Register Elementor templates for use in menus
function register_elementor_templates_for_menus() {
    $post_type_object = get_post_type_object('elementor_library');

    if (!$post_type_object) {
        return;
    }

    if (!current_user_can('edit_theme_options')) {
        return;
    }

    $post_type_object->show_in_nav_menus = true;
}
add_action('init', 'register_elementor_templates_for_menus', 20);

// Add user role field to menu items
function add_user_role_field_to_menu_items($item_id, $item, $depth, $args) {
    if ('elementor_library' === get_post_type($item->object_id)) {
        $user_roles = get_post_meta($item_id, '_user_roles', true);
        $all_roles = wp_roles()->roles;
        
        // Pre-select user roles based on the current user's roles
        $current_user = wp_get_current_user();
        $current_user_roles = $current_user->roles;
        $selected_roles = !empty($user_roles) ? $user_roles : $current_user_roles;
        $selected_roles = array_unique(array_merge($current_user_roles, (array)$selected_roles));

        // Add nonce field
        $nonce = wp_create_nonce('user_roles_nonce');

        echo '<p class="field-user-roles description description-wide">';
        echo '<label for="edit-menu-item-user-roles-' . esc_attr($item_id) . '">';
        _e('User Roles');
        echo '</label>';
        echo '<div id="user-roles-container-' . esc_attr($item_id) . '" class="user-roles-container">';

        // Display selected roles
        foreach ($selected_roles as $role_key) {
            $role = get_role($role_key);
            if ($role) {
                echo '<span class="selected-role" data-role="' . esc_attr($role_key) . '">';
                echo esc_html($role->name) . '<span class="remove-role" aria-label="Remove role">&times;</span>';
                echo '</span>';
            }
        }

        echo '<select name="menu-item-user-roles[' . esc_attr($item_id) . '][]" multiple="multiple" class="widefat user-roles-dropdown" id="edit-menu-item-user-roles-' . esc_attr($item_id) . '" style="width:100%; height: 100px;">';
        foreach ($all_roles as $role_key => $role) {
            $selected = in_array($role_key, $selected_roles) ? 'selected="selected"' : '';
            echo '<option value="' . esc_attr($role_key) . '" ' . $selected . '>' . esc_html($role['name']) . '</option>';
        }
        echo '</select>';
        echo '<input type="hidden" name="user_roles_nonce" value="' . esc_attr($nonce) . '">';
        echo '</div>';
        echo '</p>';

        // Enqueue JavaScript for interactive user roles dropdown
        ?>
        <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                const container = $('#user-roles-container-<?php echo esc_js($item_id); ?>');
                const dropdown = $('#edit-menu-item-user-roles-<?php echo esc_js($item_id); ?>');

                // Display selected roles
                function updateSelectedRoles() {
                    container.find('.selected-role').remove();
                    dropdown.find('option:selected').each(function() {
                        const role = $(this).val();
                        if (!container.find(`.selected-role[data-role="${role}"]`).length) {
                            const roleName = $(this).text();
                            container.prepend(`<span class="selected-role" data-role="${role}">${roleName}<span class="remove-role" aria-label="Remove role">&times;</span></span>`);
                        }
                    });
                }

                // Toggle role selection on click
                container.on('click', '.selected-role', function() {
                    const role = $(this).data('role');
                    dropdown.find(`option[value="${role}"]`).prop('selected', false);
                    $(this).remove();
                });

                // Add or remove role on dropdown option click
                dropdown.on('mousedown', 'option', function(e) {
                    e.preventDefault(); // Prevent default action of changing the dropdown
                    const role = $(this).val();
                    const isSelected = $(this).is(':selected');
                    
                    if (isSelected) {
                        $(this).prop('selected', false);
                    } else {
                        $(this).prop('selected', true);
                    }

                    // Update selected roles display
                    updateSelectedRoles();
                });

                // Initialize
                updateSelectedRoles();
            });
        })(jQuery);
        </script>
        <style>
        .user-roles-container {
            position: relative;
        }
        .selected-role {
            display: inline-block;
            background-color: #0073aa;
            color: #fff;
            padding: 2px 6px;
            margin: 2px;
            border-radius: 3px;
            font-size: 14px;
            cursor: pointer;
        }
        .selected-role .remove-role {
            margin-left: 5px;
            cursor: pointer;
        }
        .user-roles-dropdown {
            margin-top: 5px;
        }
        </style>
        <?php
    }
}
add_action('wp_nav_menu_item_custom_fields', 'add_user_role_field_to_menu_items', 10, 4);

// Save the user roles custom field data
function save_user_role_field_data($menu_id, $menu_item_db_id) {
    // Verify nonce
    if (!isset($_POST['user_roles_nonce']) || !wp_verify_nonce($_POST['user_roles_nonce'], 'user_roles_nonce')) {
        return;
    }

    if (isset($_POST['menu-item-user-roles'][$menu_item_db_id])) {
        $user_roles = array_map('sanitize_text_field', $_POST['menu-item-user-roles'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_user_roles', $user_roles);
    } else {
        delete_post_meta($menu_item_db_id, '_user_roles');
    }
}
add_action('wp_update_nav_menu_item', 'save_user_role_field_data', 10, 2);

// Filter menu items based on user roles
function filter_menu_items_based_on_role($items, $args) {
    if (!is_user_logged_in()) {
        return $items;
    }

    $current_user = wp_get_current_user();
    $user_roles = $current_user->roles;

    foreach ($items as $key => $item) {
        if ('elementor_library' === get_post_type($item->object_id)) {
            $allowed_roles = get_post_meta($item->ID, '_user_roles', true);
            if (!array_intersect($user_roles, $allowed_roles)) {
                unset($items[$key]);
            }
        }
    }
    
    return $items;
}
add_filter('wp_nav_menu_objects', 'filter_menu_items_based_on_role', 10, 2);