Open Custom Dashboard Menu Item using WP Hooks

Sometimes we want to show menu item content in a separate tab for various purposes.

In this tutorial, we will discuss the process of opening a custom menu item in new tab from popular multivendor marketplace Dokan's vendor dashboard. If you are wondering how can you generate a new menu item in the vendor dashboard, you can find the details here.

So we take a look at this bit of the code:

add_filter( 'dokan_get_dashboard_nav', 'dokan_add_help_menu' );
function dokan_add_help_menu( $urls ) {
    $urls['help'] = array(
        'title' => __( 'Help', 'dokan'),
        'icon'  => '<i class="fa fa-user"></i>',
        'url'   => dokan_get_navigation_url( 'help' ),
        'pos'   => 51
    );
    return $urls;
}

This part brings you a custom menu item with

title

"Help". When you click on the help menu item, it should redirect you to the `help` page. You can see title and

url

- these two are the keys and there are values against these keys. If you want to change the label from Help to anything else say contact, this will be the modification:

add_filter( 'dokan_get_dashboard_nav', 'dokan_add_help_menu' );
function dokan_add_help_menu( $urls ) {
    $urls['help'] = array(
        'title' => __( 'Contact', 'dokan'),
        'icon'  => '<i class="fa fa-user"></i>',
        'url'   => dokan_get_navigation_url( 'help' ),
        'pos'   => 51
    );
    return $urls;
}

Say we want to navigate through wedevs.com instead of a page inside the vendor dashboard. We have to remove

dokan_get_navigation_url()

as the value of the key

url

So we change the value of the key

url

here like this:

add_filter( 'dokan_get_dashboard_nav', 'dokan_add_help_menu' );
function dokan_add_help_menu( $urls ) {
    $urls['help'] = array(
        'title' => __( 'Help', 'dokan'),
        'icon'  => '<i class="fa fa-user"></i>',
        'url'   => 'https://wedevs.com',
        'pos'   => 51
    );
    return $urls;
}

Paste the above code in your child theme's functions.php file and then try to visit the vendor dashboard. It should show you the menu item with title Help. Now if you click on the item, it will redirect you to weDevs.com site.

Our next step is to open the link in a new tab. Here we will require a bit of custom JS, because Dokan doesn't allow you to add values for target attribute in <a> tag.

For adding custom JS in your page we need to add the following block of code in your child theme's functions.php file. We have to use

wp_enqueue_scripts

hook to do that.

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array(), false, true);
}

Here, you can see we have used

/script/custom.js

so we have to build this directory. In order to build the directory, please navigate through wp-content/themes/child theme folder. Inside the child theme folder, create a folder named script and inside the script folder, create a file named custom.js.

Now, inside the custom.js file, add the following block of code:

(function (){
	var link = document.getElementsByClassName('help')[0];

link.addEventListener('click', (e) => {
    e.preventDefault();
    var url = e.target.getAttribute('href'); 
    window.open(url, '_blank');
})
})();

Done!

Now visit the vendor dashboard and click on the 'help' menu item. Click on the item. You will see it opens in a new tab.

Feel free to let us know if it helps! You can follow me on GitHub and on Twitter.