Search code examples
wordpressmenutaxonomysubmenuwp-admin

Wordpress: moving admin submenu from Posts to a parent level

I want to now if there is any method to change level of an admin submenu taxonomy (as categories and tags) from Posts to make it as a parent menu (such as Page, Comment ...)

enter image description here

enter image description here

Solution

  • Ok, I don't know if I get you 100% right... You changed the name and appereance of the default "post"!?

    Maybe it would have been better to introduce a custom post type for that, but that won't change the problem with the sub menu as said before...

    If your clinet wants it that way, here we go, I tested this solution and it works fine, of course you may have to do some styling:

    function load_custom_wp_admin_style() { ?>
<script>
    jQuery("#menu-posts ul li:nth-of-type(4)").prependTo("#adminmenu");
    jQuery("#menu-posts ul li:nth-of-type(4)").prependTo("#adminmenu");
</script>
<?php }
add_action( 'admin_footer', 'load_custom_wp_admin_style' );

    I added this code to my functions.php and this moved "categories" and "tags" of the post type "posts" to the top of the admin menu right before "dashbord"!

    If you want it after the "dashboard" try to use: 

    function load_custom_wp_admin_style() { ?>
<script>
    jQuery("#menu-posts ul li:nth-of-type(4)").insertAfter("#menu-dashboard");
    jQuery("#menu-posts ul li:nth-of-type(4)").insertAfter("#menu-dashboard");
</script>
<?php }
add_action( 'admin_footer', 'load_custom_wp_admin_style' );

    If you are not using the post type "posts" you must change the selector "#menu-posts", just look it up in the inspector!

    EDIT REGARDING TO YOUR LAST COMMENTS:

    If you want to do some styling do not ever change the wordpress core admin-css, you will loose these changes on every wordpress update!!!

    But you can insert styles via your function css the same way like we've inserted the script and so i.e. add an icon via css backgrounds like this:

    function load_custom_wp_admin_style() { ?>
    <script>
        // I add an id to the element so it can be selected more easily for styling...      
        jQuery("#menu-posts ul li:nth-of-type(5)").attr('id', 'custom_tag_link');
        // Here I change the position as done before...
        jQuery("#menu-posts ul li:nth-of-type(5)").insertAfter("#menu-dashboard");

        jQuery("#menu-posts ul li:nth-of-type(4)").attr('id', 'custom_cat_link');
        jQuery("#menu-posts ul li:nth-of-type(4)").insertAfter("#menu-dashboard");
    </script>
    <style>
        /* Here comes the styling... */

        /* Do some margins/paddings and background-alignments... */
        #custom_cat_link, #custom_tag_link {
            background-size: auto 100%;
            background-repeat: no-repeat;
            padding-left: 25px !important;
            margin: 10px !important;
        }

        /* Set your Icons here... */
        #custom_cat_link {
            background-image: url('https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/examples.png');   
        }   
        #custom_tag_link {
            background-image: url('https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/examples.png');
        }       
    </style>
<?php }
add_action( 'admin_footer', 'load_custom_wp_admin_style' );

    Second thing: The renaming... As mentioned before I would've not changed the post type "post", better practice would have been to introduce a custom post type, you can name them as you want and also their taxonomies, but I guess you don't want to change that now, so again we go the "unclean hack-a-like" way with JS... Full code:

    function load_custom_wp_admin_style() { ?>
    <script>
        // I add an id to the element so it can be selected more easily for styling...      
        jQuery("#menu-posts ul li:nth-of-type(5)").attr('id', 'custom_tag_link');
        // Change the name of the <a>-element in the <li>-elem here...
        jQuery("#menu-posts ul li:nth-of-type(5) a").html('NEW TAG TITLE');
        // Here I change the position as done before...
        jQuery("#menu-posts ul li:nth-of-type(5)").insertAfter("#menu-dashboard");

        jQuery("#menu-posts ul li:nth-of-type(4)").attr('id', 'custom_cat_link');
        jQuery("#menu-posts ul li:nth-of-type(4) a").html('NEW CAT TITLE');
        jQuery("#menu-posts ul li:nth-of-type(4)").insertAfter("#menu-dashboard");
    </script>
    <style>
        /* Here comes the styling... */
        /* Do some margins/paddings and background-alignments... */
        #custom_cat_link, #custom_tag_link {
            background-size: auto 100%;
            background-repeat: no-repeat;
            padding-left: 25px !important;
            margin: 10px !important;
        }

        /* Set your Icon here... */
        #custom_cat_link {
            background-image: url('https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/examples.png');   
        }   
        #custom_tag_link {
            background-image: url('https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/examples.png');
        }       
    </style>
<?php }
add_action( 'admin_footer', 'load_custom_wp_admin_style' );

    Here you can see the whole thing in action:

    working example