Creating Organizational chart of your company using Employee Directory Pro

Organizational charts provide a visual way to showcase reporting hierarchies within an organization by graphically displaying the roles and structure.

Employee Directory Pro draws organizational charts based on employee to manager relationships stored in employee profiles. Clicking on an employee photo takes you the corresponding employee’s profile page. Clicking on a job title shows all employees having the same job title. Clicking on an arrow icon after hovering on a photo shows or collapses the nodes below or across depending on the direction of the arrow icon clicked.

This page has been created using the following shortcode:

[employee_orgchart]

To fit the whole chart into 1200px space, we wrapped the org chart shortcode with a div element having reduce-hsize id:

#reduce-hsize .orgchart .node { width: 100px}

Color-coding Organization Charts

Use the following CSS code as an example to change the colors based on each department, group etc. Put the following code in Plugin settings > Tools > Custom CSS or theme’s style.css.

div.emd-container .orgchart .node.finance .title {
background-color: #006699;
}
div.emd-container .orgchart .node.finance .content {
border-color: #006699;
}
div.emd-container .orgchart .node.marketing .title {
background-color: #009933;
}
div.emd-container .orgchart .node.marketing .content {
border-color: #009933;
}
div.emd-container .orgchart .node.it .title {
background-color: #993366;
}
div.emd-container .orgchart .node.it .content {
border-color: #993366;
}
view raw gistfile1.txt hosted with ❤ by GitHub

Customizing Organization Charts

Employee Directory Pro displays scrollbars when an organization chart goes out of bounds of the screen space available. If you prefer not to display scrollbars, you can use one or a combination of multiple strategies: