Create navigation acordion in the WordPress admin panel

In this tutorial we will learn a new piece of code that allows the WordPress user experience with menu management quite different from that which currently has : navigation to acordion style ( or toggle between menus). With this code , the open , for example , the submenu posts , all other submenus hide automatically , thus ensuring that only the submenu of Posts is visible. In addition , this small code possible to place well in the functions.php file of your theme which you are using.




Create navigation acordion in the WordPress admin panel

WHY NAVIGATION acordion STYLE?

Who updated WordPress to version 3.2 was faced with a new interface in the administration, most modern, elegant and intuitive. This was one of the main new features of this version, however, a legacy that me is hard to conceive remained: the organization of the management of the submenus is terrible!
Sometimes when you look at my WordPress admin menu I had that feeling that was completely disorganized, meaningless and contained a lot of information. The reason is simply this: the submenus can all be visible at the same time, spending too much unnecessary information! When this happens, the user experience turns out to be bad and contradictory to what is expected from a simple and intuitive interface as it should be WordPress.
Many of my clients without experience is not accustomed or found difficult to work with WordPress – tasks like posting a simple post reported to me to be “confused”. To want to understand why, I realized that many of them kept all open submenus and of course, look for the most important tasks became difficult. It was then that I decided to create this code and surprise, surprise: my clients loved it!
    My clients thought the confusing interface to try it with this hack. It was an absolute success!
With this code we can guarantee two things:
    Only the active submenu is visible . All others are hidden when not needed .
    intuitive navigation between menus, opening and closing the respective submenus as the need .
The CODE ” MAGIC “
Let’s move on to the practical part !
Place the following code in the functions.php file of your theme :
function escolawp_toogle_admin_menu() {
?>
<style type=”text/css”>
<!–
ul#adminmenu .wp-has-submenu .wp-submenu { display: none }
ul#adminmenu .wp-has-submenu.wp-has-current-submenu .wp-submenu { display: block }
ul#adminmenu .wp-has-submenu.wp-menu-open .wp-menu-toggle { display: none; }
–>
</style>
<script type=”text/javascript”>
<!–
jQuery(document).ready(function($){
    $(‘ul#adminmenu .wp-has-submenu’).not(‘.wp-has-current-submenu’).removeClass(‘wp-menu-open’);
    $(‘ul#adminmenu .wp-menu-toggle’).click(function(){
        $(‘ul#adminmenu li.wp-has-submenu’).find(‘.wp-submenu’).slideUp(200,function(){
            $(this).parent().removeClass(‘wp-menu-open’);
        });
    });
});
–>
</script>
<?php
add_action( ‘admin_print_scripts’, ‘escolawp_toogle_admin_menu’, 100 );
}
And here we have the result ! The next time you load the administration will see the new animation acordion the menu. Easy , right? It may not be as easy to understand the code that we have just entered and what it does exactly . Here are some tips to demystify this stretch .
Demystifying CODE
WordPress is a very powerful platform , not only because of their appearance or features but due to its advanced API ( Application Programming Interface) that allows developers to access it at certain times of its loading and foist additional code – this is what we do with this code .
First we create a function we call escolawp_toogle_admin_menu () which will print in the header < head> pagination CSS and jQuery code that will make our magic .
Or CSS
ul#adminmenu .wp-has-submenu .wp-submenu { display: none }
ul#adminmenu .wp-has-submenu.wp-has-current-submenu .wp-submenu { display: block }
ul#adminmenu .wp-has-submenu.wp-menu-open .wp-menu-toggle { display: none; }
The CSS code creates rules that will facilitate us implement our magic without much effort.
The first line assures us that at the time of loading of any page of the administration, no submenu will be visible. So when we started the session again we will never see any open submenu, regardless of having left any visible last time: new day, new session, new job and his sights set only on the Dashboard.
The second line ensures that it is only visible submenu is active. For example, if you open the editor for posts, then the submenu Posts will be visible and all the other hidden, and so on for each of the main menus.
Finally, the third line is just a technical shot but helps usability menu. He sends the browser to hide the toggle arrow active submenu, since no longer be used while this submenu is visible – practical, is not it?
In short, the first part of the hack is already implemented. We ensure that only the active submenu is visible. We now need to create the acordion experience between menus. For this please help our friend jQuery.
O code JQUERY
jQuery(document).ready(function($){
    $(‘ul#adminmenu .wp-has-submenu’).not(‘.wp-has-current-submenu’).removeClass(‘wp-menu-open’);
    $(‘ul#adminmenu .wp-menu-toggle’).click(function(){
        $(‘ul#adminmenu li.wp-has-submenu’).find(‘.wp-submenu’).slideUp(200,function(){
            $(this).parent().removeClass(‘wp-menu-open’);
        });
    });
});
This is the code that we will increase the usability and experience of ensuring that menu to open a submenu by toggle arrow , which was previously visible , closes ! In the background, will allow us to switch between the submenus.
Thus, by clicking the toggle button on a main menu, the previously opened item will close , ensuring that only a sub-menu will be visible at a time.
In the first line we instantiate a jQuery function so that we can make our “magic ” without much cost :
1
jQuery ( document) .ready (function ( $ )
The second line is a complement to the CSS code and a hack that removes all the main menus CSS class .wp -menu -open responsible for maintaining the submenu open adjancente .
1
$ ( ‘ Ul # adminmenu .wp -has- submenu ) . Not ( ‘ . Wp -has- current- submenu ) . RemoveClas
The method not () in the middle of this removal excludes the menu that has the class .wp -has- current- submenu that is , no more, no less , the menu that is active by default.
The third line is responsible for the animation of the accordion submenus. It instantiates a function / action (which is defined in the following 3 lines ) when the user clicks the arrow toogle one of the main menus.
1
$ ( ‘ Ul # adminmenu .wp -menu -toggle ‘ ) . Click ( function () {
Basically , this function looks for the sub-menu that is currently active , closing it with a slide-up animation as the submenu we just click opens – transition effect. At the end of the animation , for compatibility reasons , this removes the class .wp -menu -open the previously open submenu.
Et voila ! This is a little hack that adds toggle action / animation accordion between the submenus of the administration panel.

THIS CODE IN VERSION PLUGIN

For those who for some reason can not or will not change the functions.php file of your theme , we packed a plugin that can be installed and activated through the WordPress admin . Just download via the link below , save the plugin and go to the administration of your WordPress . Then , click Plugins > Add New ( Add New ) , click the Upload tab and upload the Zip file plugin . Activate the plugin and you’re done!
Link to Plugin Download
I want to make one final note is that this hack only works on WordPress installations to version 3.2 or higher.
Who found this hack ? Improves the usability of the administration? His customers were more satisfied ? Review and post your opinion !




LEAVE A REPLY

Please enter your comment!
Please enter your name here