Edit pages in Elementor from WP Admin Bar

Question

I need a way of quickly getting to edit in elementor from Wordpress admin without having to return to the pages page. There are probably plugins but I need a quick solutions made in wordpress that I can implement without having to install a bulky plugin.

Answer 1

1. Navigate to /wp-includes and find the class-wp-admin-bar.php.
2. Scroll down to the id="wpadminbar" section

3. This code will pull pages, replace links for Elementor and style the menu. Insert this after...

        <!-- Calls the Wordpress Menu -->
        <ul class="edit-pages-menu">
            <?php wp_list_pages();?>
   
        </ul>
        <!-- Adds the appropriate classes and elementor parameters -->
        <script type="text/javascript">
            jQuery('.edit-pages-menu  .pagenav').prepend('Edit ').append(' in Elementor');
            jQuery('.edit-pages-menu > li').addClass('menupop');
            jQuery('.edit-pages-menu .pagenav > ul').wrap('<div class="ab-sub-wrapper"></div>').addClass('ab-submenu');
            jQuery('.edit-pages-menu a').each(function(){
                    jQuery(this).addClass('ab-item');
                }
            );
            jQuery('.edit-pages-menu .ab-submenu li').each(function(){
                    var link = jQuery(this).attr('class');
                    var pageID = link.substr(link.length - 2);
                   jQuery(this).find('a').attr('href', '/wp-admin/post.php?post='+pageID+'&action=elementor').attr('target','_blank');
                }
            ); 
        </script>
        <!--  Style Menu To Wordpress -->
        <style >
            ul.edit-pages-menu li.pagenav.menupop {
                display: block!important;
                padding-left: 10px!important;
                padding-right: 10px!important;
                cursor: pointer;
            }
            ul.edit-pages-menu {
                display: block;
                float: left;
   
            }
            ul.edit-pages-menu ul.ab-submenu {
                padding: 0;
                display: block!important;
                float: left!important;
                width: 160px!important;
            }
            ul.ab-submenu, ul.ab-submenu li {
                padding: 0;
                display: block!important;
                float: left!important;
                width:100%!important;
   
            }
            ul.edit-pages-menu a {
                padding-left: 10px!important;
                padding-right: 10px!important;
                display: block!important;
                float:left!important;
            }
            ul.edit-pages-menu a:hover {
                color:#72aee6!important;
            }
        </style>
   

4. Result is something like this, that when clicked will take you directly to edit in elementor in new tab.

5. Change the parameters in the href for any plugin you prefer.