Elementor Connector for WP Job Manager

Elementor Connector for WP Job Manager is a a plugin that adds design/layout widgets to your Elementor-powered website. This allows you to tweak the design and layout of all pages in WP Job Manager, including:

It’s the perfect Elementor extension to customise your WordPress Job Board!

Requirements #

In order for Elementor Connector for WP Job Manager to work, you will need the following:

To make use of the advanced features of this plugin, you’ll also need the following:

Installation #

To install Elementor Connector for WP Job Manager, please follow these steps:

  1. Download the .zip file from your account at Tiny Giant Studios after purchase.
  2. Go to: WordPress Admin > Plugins > Add New to upload the zip file you downloaded in step 1.
  3. Activate the extension.

If you need to install WordPress plugins manually via FTP, please follow the guide: “How to Install a WordPress Plugin – Step by Step for Beginners“.

Please note that both Elementor and WP Job Manager needs to be installed and activated before activating the Elementor Connector for WP Job Manager

Usage #

When Elementor Connector for WP Job Manager is active, the following Elementor widgets are added to your Elementor page editor / themebuilder settings:

WP Job Manager – General

WP Job Manager – Template Builder (Requires Elementor Pro)

WP Job Manager – Advanced

WP Job Manager – General

Elementor Widget: Job Listings

The Job Listings widget is the heart of the Elementor Connector for WP Job Manager and is used to display the job search form and/or a list of jobs that meet meet specific criteria.

To add the Job Listings widget to a page/post on your website using Elementor, follow these steps:

  1. Log into your WordPress admin area
  2. Navigate to a page/post of your chosing
  3. Click on the Edit with Elementor button
  4. Using the Elementor widget navigation panel on the left, scroll down until you find a section called WP Job Manager
  5. Drag and drop the Job Listings widget to the right-hand side in a section of your choosing

Once a widget has been added to the page, the widget settings panel will appear on the left with the following options:

Content Tab

  • Job Per Page – The number of that will be shown
  • Show Filters – A toggle to show/hide the search job search form
  • Show Categories – A toggle to show/hide the category input field on the job search form
  • Show Pagination – A toggle to show/hide pagination at the end of the job list
  • Show Only Filled Jobs – A toggle to only display jobs that have already been filled
  • Order by – The order in which jobs should be displayed
  • Order – Whether the order determined above should be in ascending or descending order
  • Location – The (optional) default location that should be used for the search form
  • Keyword – The (optional) default keyword that should be used for the search form
  • Categories – The (optional) default categorie(s) that should be used for the search form
  • Job types – The (optional) default job types that job listings should be limited to (e.g. Full time, Freelance etc.)
  • Post Status – The (optional) post status that each job should contain (e.g. Published, Expired)

Style Tab

  • Search Box
  • Regular Listings
  • Featured/Expired Listings

All sub-tabs under the Style Tab mentioned above include options for the Background, Colour, Typography/Fonts, Margin, Padding and Border. These settings can be configured by clicking on their respective settings areas to tweak the design/layout on the page itself.

Elementor Widget: Single Job Listing

The Single Job Listings widget is used to display a single job on a post/page of your choosing. In order for this widget to be displayed, you’ll need the Job ID number. To find the Job ID number, follow these steps:

  1. Log into your WordPress admin area
  2. Navigate to Job Listings > All Jobs > YOUR JOB
  3. In the address bar at the top of your browser, look for this section: ?post=1390 (where 1390 is the Job ID number; This will be different on your site)

The Single Job Listings widget provides the following options:

Content Tab

  • Job ID – This is the ID of the Job to be used when displaying it on a single post/page

Style Tab

  • Header / Job Title
  • Meta
  • Company
  • Job Description
  • Application

All sub-tabs under the Style Tab mentioned above include options for the Background, Colour, Typography/Fonts, Margin, Padding, Border and Alignment. These settings can be configured by clicking on their respective settings areas to tweak the design/layout on the page itself.

Elementor Widget: Single Job Summary

The Single Job Summary widget is similar to the Single Job Listing widget albeit in a summarised form. In order for this widget to be displayed, you’ll need the Job ID number. To find the Job ID number, follow these steps:

  1. Log into your WordPress admin area
  2. Navigate to Job Listings > All Jobs > YOUR JOB
  3. In the address bar at the top of your browser, look for this section: ?post=1390 (where 1390 is the Job ID number)

The Single Job Summary widget provides the following options:

Content Tab

  • Job ID – This is the ID of the Job to be used when displaying it on a single post/page

Style Tab

  • General
  • Job Type
  • Job Logo
  • Job Title
  • Job Meta

All sub-tabs under the Style Tab mentioned above include options for the Background, Colour, Typography/Fonts, Margin, Padding, Border and Alignment. These settings can be configured by clicking on their respective settings areas to tweak the design/layout on the page itself.

Elementor Widget: Submit Job Form

The Submit Job Form widget adds the WP Job Manager  submission form to any area using the Elementor page builder. While this widget doesn’t have any content settings of its own, the style tab does allow for the following sections to be configured:

  • Fieldsets (Sections containing the labels and input fields)
  • Labels
  • Input Fields


 
To add the Job Submit Form widget to your page, follow these steps:

  1. Log into your WordPress admin area
  2. Navigate to Pages > All Pages > YOUR JOB SUBMISSION PAGE
  3. Click on the Edit with Elementor button
  4. Using the Elementor widget navigation panel on the left, scroll down until you find a section called WP Job Manager
  5. Drag and drop the Job Sumit Form widget to the right-hand side in a section of your choosing

Elementor Widget: Job Dashboard

The Job Dashboard widget is used to display a list of all active/expired jobs on the front-end for the logged-in user. In order for this widget to be displayed, you’ll to select a number of jobs to be displayed on the dashboard page (WP Job Manager sets this default to 10)


 
The Job Dashboard widget provides the following options:

Content Tab

  • Number of Jobs – This is the number of active/expired jobs to display on the dashboard page before pagination is displayed.

Style Tab

  • Table Header
  • General Listings
  • Inactive Listings

WP Job Manager – Theme Builder (Elementor Pro)

Theme Builder Widget: Single Job Title

The Single Job Title widget is used in instances where a custom layout for the single job listing page is required. Elementor Pro is required (installed, activated and connected to an active license key) in order to use this widget.

To override the single job listing template with a custom one, please follow these steps:

  1. Log into the WordPress admin area
  2. Ensure that Elementor Pro is installed, activated and connected to an active license key)
  3. Navigate to Template > Theme Builder > Add New
  4. In the pop-field field, select Single Post for the template type
  5. Choose any name for the template override in the field provided (e.g. Single Job Template)
  6. When ready to publish, ensure that “Jobs” and “All” are selected if this template is to be used for all single job pages on the site

Once a widget has been added to the template, the widget settings panel will appear on the left with the following options:

Content Tab

  • Title – Includes the ability to add pre- and post title HTML markup selectors for custom CSS
  • Link – In case the job title is used to link elsewhere
  • Size – Used for adjusting the size of the title
  • Tag – Used to determine the HTML priority of the heading, ranging from H1 to H6
  • Alignment – Used to adjust the layout of the job title

Style Tab

  • Text color
  • Typography
  • Text Shadow
  • Blend Mode

Theme Builder Widget: Single Job Meta

The Single Job Meta widget is used in instances where a custom layout for the single job listing page is required – this section adds the meta information (Job type, location, listing date, company logo, company name, company tagline and twitter & website links). Elementor Pro is required in order to use this widget.


 
Once the Single Job Meta widget has been added to the template, the widget style settings panel will appear on the left with the following options:

Style Tab

  • Meta Information
  • Company Information

All sub-tabs under the Style Tab mentioned above include options for the Background, Colour, Typography/Fonts, Element Visibility, Margin, Padding, Border and Alignment. These settings can be configured by clicking on their respective settings areas to tweak the design/layout on the meta section itself.

Theme Builder Widget: Single Job Content

Similar to the Single Job Title and Single Job Meta widgets, the Single Job Content widget aims to add the job listing description with uniquely styled layout & design.

Once the Single Job Description widget has been added to the template, the widget style settings panel will appear on the left with the following options:

Style Tab

  • Job Description

The Job Description sub-tab include options for the color, font, margin, padding and alignment.

Theme Builder Widget: Single Job Application

The Single Job Application widget adds the application but to the single job listing page and allows for a custom layout & design.

Once the Single Job Application widget has been added to the template, the widget style settings panel will appear on the left with the following options:

Style Tab

  • Application Button

The Application Button sub-tab include options for the background, color, font, margin, padding and alignment.

WP Job Manager – Advanced

Advanced: Preview Widget (Optional)

By default, the Job Preview section following job submission will draw its design/layout from the WP Job Manager plugin directly unless an additional Advanced Preview widget is added to the Job Submission page. For custom styles/layout of the job preview page following submission, please for these steps:

  1. Log into your WordPress admin area
  2. Ensure the Dynamic Visibility for Elementor plugin is installed and active
  3. Navigate to Pages > All Pages > YOUR JOB SUBMISSION PAGE
  4. Add the Job Preview Styles widget below the Submit Job Form widget
  5. Select the Visbility tab in the top left-hand corner and ensure that both Enable Visibillity and Hide this block is set to “Yes”
  6. Adjust the options of the Preview Widget under the Style tab as per normal


 
Once the Job Preview Styles widget has been added to the page, the widget style settings panel will appear on the left with the following options:

Style Tab

  • Header
  • Meta
  • Company
  • Job Description
  • Application
  • Preview Container

All sub-tabs under the Style Tab mentioned above include options for the Background, Colour, Typography/Fonts, Margin, Padding and Border. These settings can be configured by clicking on their respective settings areas to tweak the design/layout on the page itself.

Advanced: Edit Job Form (Optional)

By default, the Edit Job Form that’s triggered from the Job Dashboard will draw its design/layout from the WP Job Manager plugin directly unless an additional Advanced Edit Job Form widget is added to the Job Dashboard page. For custom styles/layout of the edit job page, please for these steps:

  1. Log into your WordPress admin area
  2. Ensure the Dynamic Visibility for Elementor plugin is installed and active
  3. Navigate to Pages > All Pages > YOUR JOB DASHBOARD PAGE
  4. Add the Edit Job Form widget below the Job Dashboard widget
  5. Select the Visbility tab in the top left-hand corner and ensure that both Enable Visibillity and Hide this block is set to “Yes”
  6. Adjust the options of the Preview Widget under the Style tab as per normal


 
Once the Edit Job Form widget has been added to the page, the widget style settings panel will appear on the left with the following options:

Style Tab

  • Form
  • Preview Container

All sub-tabs under the Style Tab mentioned above include options for the Background, Colour, Typography/Fonts, Margin, Padding and Border. These settings can be configured by clicking on their respective settings areas to tweak the design/layout on the page itself.

Frequently Asked Questions #

Can I change the job search box and the job listing styles using the Elementor Connector for WP Job Manager plugin?

Yes – that’s the heart of this plugin. To toggle between the search box and the job listings while using the “Job Listings” widget, use the “Show Filters” display toggle. Any changes made will affect both the search box AND the listings on the front end.

Can I change the layout & design of the single job listing page?

Yes – this is perfectly possible although you’ll need to create a custom job page template under Templates > Theme Builder > Add New. This requires Elementor Pro to be installed & active.

Can I can the design of the “Job Preview” step after submitting a job

Yes – you’ll need to make use of the advanced Job Preview widget while also using the free Dynamic Visbility for Elementor plugin

Will Elementor Connector for WP Job Manager work with my theme?

Very likely – As long as your theme does not override the core templates of the Job Manager plugin with its own custom-designed ones. We endeavour to make our plugin as flexible/compatible as possible. At the moment, the only known theme that’s incompatible is BuddyBoss due its fixed template overrides.