Employees Shortcode

Updated on January 30, 2018

The employees shortcode allows you to display a list of employees with portrait photos, job titles, descriptions and social media links. Different style options are also available for the employees shortcode.

In this article, we will explain how to display and configure the employees section, as well as change the style.

To see the employees shortcode in action, check out the demo page.

Employees shortcode - demo


Enabling the Employees Post Type

Before starting, you’ll need to make sure that the employees post type is enabled in your theme.

To enable the employees post type:

1From the WordPress left menu, go to Theme Options > Advanced > Post Types.
2Enable the Employees Post Type option.
3Click on Save Settings.

Adding Employees

You’ll need to add a new employee or edit an existing employee’s details, such as the portrait photo, job title, description or social media links.

To add a new employee:

1From the WordPress left menu, go to Employees > Add New.

Employees shortcode - add new employee

2Fill out the fields with the necessary information and click on Publish.

To edit an existing employee:

1From the WordPress left menu, go to Employees > All Employees.

Employees shortcode - all employees

2Hover over an employee name and click on the Edit button.

Employees shortcode - edit employee

3Edit the values in the fields as needed and click on Update.

Displaying Employees

To display employees:

1Add or edit an existing page.
2In the Visual Composer section, click on the + button.

Employees shortcode - visual composer section

3In the Add Element pop-up screen, search for Employees and click on it to be added to the page.

Employees shortcode - add element

4When the shortcode is added, a new pop-up screen called Employees Settings will open that allows you to configure the shortcode settings.

Employees shortcode - Employees settings

5Click on Save Changes and publish or update the page to check the result.

Available Employees Settings

There are a few settings in employees pop-up screen regarding the employee details.

SettingDescription
Style Sets the employee display style.
Column Sets the employees column count.
Rounded Employee’s Photo Displays the employees’ photos with rounded corners.
Count Sets the employee count.
Select Specific Categories Sets a specific category to display.
Select Specific Employees Sets a specific employee to display.
Offset Sets the number of employees posts to displace or pass over.
Description Enables displaying the employees’ descriptions.
Order Sets the employee listing order according to the orderby value.
Orderby Sets the employee listing order.
Viewport Animation Sets the viewport animation.
Extra Class Name Adds a class name to the shortcode for Custom CSS.
Employee Name Color Sets the employees’ names color.
Employee Position Color Sets the employees’ positions color.
Employee About Color Sets the employees’ about section color.
Employee Social Color Sets the employees social media icons color.

 Configuring the Style

The employees shortcode has a few options that allow you to configure the style. With these options, you can configure the layout style, column and employee count, job title and description colors and many other options.

1From the WordPress left menu, go to Pages and click on Edit for the page that includes the employees shortcode.
2Hover over the employees shortcode and click on the Edit button.

Employees shortcode - edit employees

3A new pop-up screen called Employees Settings will open.

Employees shortcode - Employees settings

4There are a few options for configuring the employees shortcode in this page. Configure your shortcode settings according to your needs.
SettingDescription
Style Sets the employee display style. Available Options are: Classic, Boxed, Simple.
Column Sets the employee column count.
Rounded Employee’s Photo Displays the employees’ photos with rounded corners.
Employee Name Color Sets the employees’ name color.
Employee Position Color Sets the employees’ position color.
Employee About Color Sets the employees’ about section color.
Employee Social Color Sets the employees’ social media icons color.
Box Background Color Sets box background color. Available if Boxed style is selected.
Box Border Color Sets box border color. Available if Boxed style is selected.

Configuring the visibility for devices

Visibility For Devices field in the setting pop-up allows you to configure the visibility of the shortcode in different devices.

You can read Configuring the visibility for devices article for further explanation.

Adding an entrance animation

Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read Configuring shortcode’s entrance animation article for further explanation.

 

5Click on Save Changes and publish or update the page to check the result.
Did this answer your question?