Employee Directory Pro WordPress plugin offers advanced customization using Visual Shortcode Builder. You can create all of the shortcodes below using GUI. Watch the video to see how.

Employee Directory Pro Customization Tips

1

The shortcode below displays IT department employees with a paged navigation, limiting the displayed employees to 2 per page.

[employee_circle_grid filter="tax::departments::is::it;misc::posts_per_page::is::2;"]
2

The shortcode below displays all IT department employees without a paged navigation

[employee_circle_grid filter="tax::departments::is::it;misc::posts_per_page::is::-1;"]
view raw gistfile1.txt hosted with ❤ by GitHub
3

The CSS code below provides browser based panning (showing navigation bars) solution for large organization charts. Adjust the size based on the size of the chart and put it in your theme’s style.css file.

div.emd-container .google-visualization-orgchart-table td {
min-width: 20px;
}
4

The shortcode below displays all IT department employees without a paged navigation and in squares instead of circles.

// Add the code below your theme's style.css if you need to change all employee images
div.emd-container .person-img {
border-radius: 0;
}
//If you want to change it for shortcode bases, wrap your shortcode in .square class
<div class="square">[employee_circle_grid filter="tax::departments::is::it;misc::posts_per_page::is::-1;"]</div>
// And add the following code to your theme's style.css file
.square div.emd-container .person-img {
border-radius: 0;
}
view raw Make-it-all-square hosted with ❤ by GitHub
5

Use the following code for displaying horizontal scroll bar in large org charts. Copy and paste in a page. Do not use the visual editor.

//Copy and paste the following code in your theme's style.css file
div.emd-container .table-responsive {
overflow-x: auto;
}
//Copy and paste the following code in a page "text" editor
<div class="table-responsive">[employee_orgchart]</div>
view raw gistfile1.txt hosted with ❤ by GitHub
6

Removing specific fields from the employee bio page, details tab through CSS.

Find Employee entity from settings page and select “Hide From Frontend” option for the attribute(s) you want to hide.

7

To be able to create departments like here in the demo, follow the steps below:

  1. Login to WordPress admin as administrator
  2. Go to Appearance > Menus
  3. Create a menu if you’ve not already created one and assign it to a theme location under Menu Settings on the right hand side.
  4. Click on Departments accordion and select a department and click Add Menu button
  5. You will see the department on the right hand side.
  6. Click Save Menu
  7. Go to the frontend and click on the department link
More details in WordPress Codex
8

How to show employees in the list grid format in alphabetical order by first name.

// The following shortcode displays employees in alphabetical order using list grid view in Employee Directory WordPress plugin
[employee_circle_grid filter="misc::orderby::is::title;misc::order::is::ASC;"]
view raw gistfile1.txt hosted with ❤ by GitHub
9

If you need to show all your employees at one page, you can reduce the box size to fit everyone in or disable the photos (Plugin settings > Globals > Hide Org Chart Photo). To reduce the org chart adjust the following code based on your needs, put the following code in Plugin settings > Tools > Custom CSS or theme’s style.css.

div.emd-container .orgchart .node {
width: 80px !important; \\ Adjust this based on your team's size
}
view raw gistfile1.txt hosted with ❤ by GitHub