paint-brush
Open Custom Dashboard Menu Item using WP Hooksby@shabnam
400 reads
400 reads

Open Custom Dashboard Menu Item using WP Hooks

by Mushrit ShabnamJuly 18th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Dokan's vendor dashboard allows you to open a custom menu item in a new tab. We will use a bit of custom JS to generate a menu item with title Help. We need to add the code in your child theme's functions.php file and then try to visit the vendor dashboard. It should show you the menu item and then open the link in new tab. You can see title andurl as 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: "Contact"

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Open Custom Dashboard Menu Item using WP Hooks
Mushrit Shabnam HackerNoon profile picture

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.