WP Project Manager Pro WordPress Plugin

WP Project Manager Pro WordPress Plugin

An excellent tool to manage team-work and deliver projects regular through your WordPress powered internet site.

WP Project Manager Pro WordPress Plugin

installation

How to Create a module in Project Manager Pro

Module having a sub-menu under project manager

1.Copy our exiting module menu and rename as your module name.
2. webpack configuration
→ Open webpack.config.js file.
→ change filename and jsonpFunction. JsonpFunction will be like

module.exports = {
output: {
filename: ‘filename.js’,
jsonpFunction: ‘wedevsPmProModuleNameWebpack’,
}
}
→ include module webpack.config.js file in our main webpack.config.js file like.

const moduleName1 = require(‘./modules/module_name/webpack.config.js’);

module.exports = [ moduleName1, moduleName2, …]

3. Rename menu.php as your module directory name like module_name.php

4. open module_name.php file and and put your php code here.

→ write module name, description, and others details.
/**
* Module Name: module name
* Description: Description
* Module URI:
* Thumbnail URL:
* Author:
* Version:
* Author URI:
*/
→ Add sub-menu name, permission and path.

add_action( ‘pm_menu_before_load_scripts’, function( $home ) {
global $submenu;
$submenu[‘pm_projects’][] = [ __( ‘Woo Project’, ‘pm’ ), ‘read’, ‘admin.php? page=pm_projects#/woo-project’ ];
add_action( ‘admin_print_styles-‘ . $home, ‘pm_pro_menu_load_scripts’ );

} );

→ enqueue script and style for modules.

function pm_pro_menu_load_scripts() {
wp_enqueue_script( ‘pm-pro-menu’, plugins_url( ‘views/assets/js/woo-project.js’, __FILE__ ), array(), time(), true );
wp_enqueue_style( ‘pm-pro-menu’, plugins_url( ‘views/assets/css/woo-project.css’, __FILE__ ), array(), time() );
}

5. Register module and routers in vue.

→ Open module_name/view/assests/src/router/router.js file

→ Register module with function weDevsPmProAddonRegisterModule, it takes two argument with module name and module path name. Module path name must be same as your module folder name.

weDevsPmProAddonRegisterModule(‘moduleName’, ‘module_path’);

→ Register routers with function weDevsPMRegisterChildrenRoute, it tasks two argument parentRouteName and routes Array. ParentRouteName can have ‘project_root’ for root page, routes array will be same as vue router array.

weDevsPMRegisterChildrenRoute(‘project_root’,
[
{
path: ‘route-path’,
component: component,
name: ‘route_name’,
}
]
)

6. how to get mixin, store, and set commit

→ mixins: [PmProMixin.moduleName]

→ this.$store.state.moduleName
→ this.$store.commit(‘moduleName/function’)