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( , ); {
 $urls[ ] = ( => __( , ), => , => dokan_get_navigation_url( ), => ); $urls;
} 'dokan_get_dashboard_nav' 'dokan_add_help_menu' function dokan_add_help_menu ( $urls ) 'help' array 'title' 'Help' 'dokan' 'icon' '' 'url' 'help' 'pos' 51 return This part brings you a custom menu item with "Help". When you click on the help menu item, it should redirect you to the `help` page. You can see title and - 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: title url add_filter( , ); {
 $urls[ ] = array( => __( , ), => , => dokan_get_navigation_url( ), => ); $urls;
} 'dokan_get_dashboard_nav' 'dokan_add_help_menu' ( ) function dokan_add_help_menu $urls 'help' 'title' 'Contact' 'dokan' 'icon' '' 'url' 'help' 'pos' 51 return Say we want to navigate through wedevs.com instead of a page inside the vendor dashboard. We have to remove as the value of the key . dokan_get_navigation_url() url So we change the value of the key here like this: url add_filter( , ); {
 $urls[ ] = array( => __( , ), => , => , => ); $urls;
} 'dokan_get_dashboard_nav' 'dokan_add_help_menu' ( ) function dokan_add_help_menu $urls 'help' 'title' 'Help' 'dokan' 'icon' '' 'url' 'https://wedevs.com' 'pos' 51 return 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 , because Dokan doesn't allow you to add values for target attribute in <a> tag. JS 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 hook to do that. wp_enqueue_scripts add_action( , ); {
 wp_enqueue_script( , get_stylesheet_directory_uri(). , array(), , );
} 'wp_enqueue_scripts' 'enqueue_custom_js' ( ) function enqueue_custom_js 'custom' '/scripts/custom.js' false true Here, you can see we have used 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. /script/custom.js Now, inside the custom.js file, add the following block of code: ( { link = .getElementsByClassName( )[ ];

link.addEventListener( , (e) => {
 e.preventDefault(); url = e.target.getAttribute( ); .open(url, );
})
})(); ( ) function var document 'help' 0 'click' var 'href' window '_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 and on . GitHub Twitter

Open Custom Dashboard Menu Item using WP Hooks

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Increase Functionality of the Account Page of WP User Frontend

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

How to Increase Functionality of the Account Page of WP User Frontend

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps