Adding a Job
The first task with the jobs section is to add a new job. So navigate to Jobs -> Add Job in your admin. Here you will generally add a job title and description in the usual sections. Then underneath you will find the ‘Job Options’ panel where you can supply additional criteria such as ‘Position’, ‘Location’ etc.
Once you are happy with the details you have filled out there, simply Publish the job. You can add as many of these as you like and they can be edited or removed at any time. They are displayed on the front end in the order that they are found in the admin and you can change this order at any time by going to Jobs and simply dragging the rows around into your preferred order.
You will probably also notice when adding a job that there is a box in the right column for ‘Departments’. Here you can simply assign a job to a department which allows for filtering on the front end of the site. You can add as many of these as you like and jobs can be assigned to as many departments as you see fit; much like categories for posts. Once added, they can also be managed in the admin under Jobs -> Departments.
Displaying Jobs on the site
Once you have all your current vacancies set up, you will want to display them on a page somewhere for users to navigate. We have created a table with departments filter for the front end that can be used to display these jobs for users to then click through to see the full details. And this section is adding using the Visual Composer ‘Jobs’ element. To add this you will need to follow these steps:
- Edit the page you want the table to display on (or create a new page if you have not got one designated already).
- Select the ‘Visual Composer Template’ as the template under Page Attributes in the right column.
- Make sure that the Visual Composer is showing the ‘Backend Editor’ view.
- Click to ‘Add Row’.
- Edit the row you just added by clicking the pencil icon in the top right.
- Add a class where it says ‘Extra Class Name’ of ‘ftcontainer’. Yuo may want to swithc the the Design Options view here and add padding to the top of 60px and to the bottom of 40px. Save.
- Add another row inside that row, edit this one as the last one and add a class of ‘ftrow’.
- Click ‘Add Element’ and select the ‘Jobs’ element (seen in the image below).
- Save and Publish/Update the page.
Once that is done and you navigate to the front end of the sit,e you will find that the page should have something like the following in place.
Your users can then click through the departments and then in to see the full vacancy.