Change Menu Order in Flowmattic

Following a post on the Flowmattic Facebook group about wanting to change the order of the items in the menu and how they should be re-ordered, I thought to myself; it is an interesting idea and one that I should easily be able to accomplish with a snippet.

So the first thing I did was inspect the code of the flowmattic admin page and found the element that creates the menu. Conveniently, its a single class called “class=”nav nav-pills flex-column mt-4″”

The Default menu position looks like the photo below, and what the poster wanted was for the integration menu item to be above settings and the workflow item to be below the dashboard.

So I knew I needed some JS for this one but also wanted that JS to run within a PHP snippet so I began to put some work on recording those items and within a few minutes, had a working example in the console.

I was able to further refine that and allow me to make it totally customisable and using WPCodeBox’s conditional loading only load on the flowmattic admin page and be totally customisable as can be seen below in this screenshot of my wpcodebox and the code being conditionally run when the URL contains admin.php?page=flowmattic

You can view the code snippet for this modification here:

<?php 
function reorder_flowmattic_menu() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            // Select the nav items
            var nav = $(".nav.nav-pills.flex-column.mt-4");

            // Reorder menu items as needed
            var order = [
                "Dashboard",
                "Workflows",                
                "Connects",
                "Custom Apps",
                "Tables",
                "AI Assistants",
                "Variables",
                "History",
                "Integrations",
                "Settings",
                "Status",
                "License"
            ];

            // Rearrange the list
            order.forEach(function (name) {
                var item = nav.find("a:contains('" + name + "')").parent();
                nav.append(item);
            });
        });
    </script>
    <?php
}
add_action('admin_footer', 'reorder_flowmattic_menu');

Warning: This only takes into account current menu items and will need to be adjusted if there is a change to the menu items, i.e. if a feature is added or the code changes,