How to Add Team in Employee Post Type

Before you can use the Employees Shortcode you will need to add single Employee Items which is known as Employees Post Type. If you do not need to use the Employees Post Type or Shortcode you can go to Theme Options > Advanced > Manage Theme and turn off the Employees Post Type from there.

Employees

In this topic

We will explain about how to Add Team in Employee Post Type

1. Adding an Employees Item

The following is detailed information about the Employees Post Type Item and how to add one with description:

Employees

Go to WordPress Admin Menu > Employees > Add New and you will be redirected to the Employees Addition page.

1.1. Add a Title

new-employees

Add new title for your Employees item. You will refer to this item in the Employees Shortcode using this title.

1.2. Add Employees Item Content

Use the provided default WordPress Editor section to add the content of the single Employee Post. The Employees Shortcode can be set to have a link from the Employees loop page to a Single Employee page. Use this section to add extra information on the single page.

new-employees1

To activate the Visual Composer plugin for this section, you need to go to WordPress Admin Menu > Visual Composer > Role Manager Tab and check the Employees checkbox and save the settings.

1.3. Set Jupiter Employees Options

Set Jupiter Employees Options to configure your Employee item properly. The following is a detailed description for each item in Jupiter Employees Options section:

new-employees2

1.3.1 Single Employee Page

Use this option to decide if you want to have a single post page for this employee or not. If set to “Yes Please” add the description of the single post page for this employee in the default WordPress Editor available at the top of the page and the one we gave information for in the previous item. Available options are:

  1. Yes Please
  2. No

1.3.2 Single Post Layout

This option will be available if you set the item 1 to “Yes Please”. Use this option to set the layout for this employee single post page. Available options are:

  1. Style 1
  2. Style 2
  3. Style 3

Style 1: The Style 1 layout shows the thumbnail of the employee at the left section of the screen with a circle frame. Below the thumbnail it shows the employee title, position and social media links. The actual description of the single post page shows at the right of the screen next to the thumbnail image.

Style 2: The Style 2 layout shows the thumbnail of the employee at the left section of the screen with a square frame. The rest of the information including title, position, description and social icons show next to the thumbnail image at the right section of the screen.

Style 3: The Style 3 layout has a hero section at the top of the screen including a background image, the small thumbnail image of the employee, the title, position and social media icons. The description of the single post page goes below the hero section.

1.3.3 Header Hero Background Image

This option will be available if you set the item 1 to “Yes Please”. Use this option to upload a background image for the hero section of Style 3 described in the previous section. By clicking the Upload Image button the standard WordPress Media Selection screen will be available for you to choose images from or upload new images from your system.

new-employees3

1.3.4 Header Hero Background Color

This option will be available if you set the item 1 to “Yes Please”. Use this option to set the background color for the hero section of Style 3 described in the previous section.

1.3.5 Header Hero Content Skin

This option will be available if you set the item 1 to “Yes Please”. As the content of the single post page for the Style 3 sits on top of the background image it may conflict with the color of the background resulting in an unreadable situation where text color and background image color tone are the same. To avoid such cases you can use this option to set the Header Hero Content Skin. Available options are:

  1. Light
  2. Dark

1.3.6 Employee Position

Use this option to add the employee position. It can be anything such as officer, manager, support staff, etc.

1.3.7 About Member

Use this option to add a short description about the member which will show in the loop page and not the single post page. The loop page contains the list of employees shown with different styles depending on the options you set in the Employees Shortcode. We will give detailed information about those options later in this article. This option has the standard WordPress editor which you can use to fine tune the style of the short description text.

Note: Visual Composer is NOT available for this option and you can use the standard WordPress Editor only.
about-member

1.3.8 Email Address

Use this option to set the email address of the employee which will show with an envelope icon. Clicking the icon will bring up the default email client of the user.

1.3.9 Social Network (Facebook)

Use this option to add the Facebook address of the employee’s which will show the Facebook icon linked to the employee Facebook page. Make sure to add http:// at the beginning of the URL.

1.3.10 Social Network (Twitter)

Use this option to add the Twitter address of the employee’s which will show the Twitter icon linked to the employee Twitter page. Make sure to add http:// at the beginning of the URL.

new-employees4

1.3.11 Social Network (Google Plus)

Use this option to add the Google Plus address of the employee’s which will show the Google Plus icon linked to the employee Google Plus page. Make sure to add http:// at the beginning of the URL.

1.3.12 Social Network (LinkedIn)

Use this option to add the LinkedIn address of the employee which will show the LinkedIn icon linked to the employee’s LinkedIn page. Make sure to add http:// at the beginning of the URL.

1.3.13 Social Network (Instagram)

Use this option to add the Instagram address of the employee’s which will show the Instagram icon linked to the employee Instagram page. Make sure to add http:// at the beginning of the URL.

1.4. Set Featured Image

Use this option to upload and add a featured image for your Employee. The uploaded image will show as a thumbnail image in the loop page and the single post page if you set the item 1 to “Yes Please”. In this option the standard WordPress Media Selection screen is available for you to choose images from or upload new images from your system.

1.5. Set the Employee Category

The Employees post type in Jupiter has an option to add categories and retrieve the list of employees depending on which category they belong to from the Employees Shortcode options. We will give detailed information about that Employees Shortcode option later in this article. Use this option to set the category which this employee will be in. You can either add the categories separately by accessing the WordPress Admin Menu > Employees > Employees Categories or you can directly add the new category and assign this employee to it using this option at the right section of the screen.

employees-category

1.6. Publish Employee Item

Click on the Publish button to save your Employees Item. You need to repeat the steps above to add other Employees which will be used in the Employees loop page.

employee-publish

2. Adding Employees to a Page or Post

Now that you have added Employees you need to use the Employees Shortcode to add it to a page or post to show in the front end of the website. Follow the steps below to do that:

add-element-employee

After adding a page, use the Visual Composer tool to add Employees shortcode by clicking on + (plus) icon, and searching for Employees.

2.1. Set the Employees Shortcode Settings

After you add the Employees Shortcode, a pop up window will appear where you can set options for this shortcode to allow you to fine tune your Employees and add it to the page. The following is the detailed description of each option for Employees Shortcode:

2.2. Options in the General Tab

2.2.1. Style

Use this option to set the style for the employees loop page. Please click here to see a live demo for each style. Available options are:

  1. Simple
  2. Boxed
  3. Classic
employee-settings

2.2.2. Column

Use this option to set the column count for each row in Employees Shortcode.

2.2.3. Rounded Employee’s Photo

This option is available only if you set the Style option to Simple. Use this option to make the thumbnail image of the employees rounded in the loop page.

2.2.4. Box Background Color

This option is available only if you set the Style option to Simple. Use this option to make the thumbnail image of the employees rounded in the loop page.

2.2.5. Box Border Color

This option is available only if you set the Style option to Boxed. Use this option to set the employees containing block border color.

employee-settings1

2.2.6. Count

Use this option to set how many employees you want to show in the loop page. If you want to show All employees, set this option to -1.

2.2.7. Select Specific Employees

Use this option to set the Employee items which you want to show. Leave this option to blank if you want to show all items.

2.2.8. Offset

If you select items in the previous option, you can set the number of those selected items you want to skip over using this option.

2.2.9. Description

Enable this option if you want to show the short description of employees. This option will show/hide whatever you add in the About Member option when you add the information of simple employee described at the beginning of this article as an item 7.

2.2.10. Order

Use this option to set the order of Employees. Available options are:

  1. ASC (Ascending Order)
  2. DESC (Descending Order)

2.2.11. Order By

Use this option to set the criteria you want for Employee items order. Available options are:

  1. Date
  2. Posts (Manually Selected Posts)
  3. Menu Order
  4. Post ID
  5. Title
  6. Comment Count
  7. Ransom
  8. Author
  9. No Order

2.2.12. Viewport Animation

Viewport animation will be triggered when this element is being viewed when you scroll page down. You only need to choose the animation style from this option. Please note that this only works in modern web browsers. We have disabled this feature in touch devices to increase browsing speed. Available options are:

  1. None
  2. Fade In
  3. Scale Up
  4. Scale Down
  5. Right to Left
  6. Left to Right
  7. Top to Bottom
  8. Bottom to Top
  9. Flip Horizontally
  10. Flip Vertically
  11. Rotate

2.2.13. Extra Class Name

This is an option which is common among most of the shortcodes. If you wish to style any particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Options > Advanced > Custom CSS.

2.3. Options in the Color Tab

employee-settings3

2.3.1. Employee Name Color

Use this option to set the employee name color in the loop page.

2.3.2. Employee Position Color

Use this option to set the employee position color in the loop page.

2.3.3. Employee About Color

Use this option to set the employee short description or about color in the loop page.

2.3.4. Employee Social Color

Use this option to set the employee social icons color in the loop page.

0