Why use a custom post type for careers?
A custom post type turns each job listing into its own piece of content, managed directly from the WordPress admin – the same way you manage blog posts. You can add, edit, and unpublish listings without touching the page builder at all. The careers page updates automatically.
It also unlocks things a static layout can’t do. Each listing links through to its own job detail page. As your hiring needs change, the page keeps up without the difficult design work.
Why use the Element UI Careers components?
The Element UI Careers components are pre-built archive page, loop item and single post templates you copy directly into your website. The layout is done, and because the ACF field group uses matching field names, the dynamic tags map automatically. No wiring things up manually.
Setting up a careers system this way is one of the highest-value things you can add to a business website – and once it’s in place, the business can manage it entirely themselves.
What you’ll need
ACF (free) plugin installed and activated on your site.
Step 1: Import the ACF CPT and field group JSON file
Download the Careers ACF field group JSON from the bottom of this post and import it into your site via ACF → Tools → Import. This creates the Careers post type and all the required custom fields automatically. Once imported, you’ll see a Careers item in your WordPress admin menu.
Step 2: Add your job posts
Go to Careers → Add New and create a few job listings. Each post already has the following fields to fill in alongside the standard title and content:
- Short description: a one or two sentence summary shown on the listing card
- Location: e.g. Remote, London, New York
- Salary: e.g. £40,000–£50,000 or Competitive
- Employment type: Full-time, Part-time, Contract, or Freelance
- Department: e.g. Engineering, Marketing, Design
- Experience level: Junior, Mid, or Senior
These fields are all easy to customize or feel free to add new ones or remove any inside the ACF plugin.
Step 3: Set up your Elementor Loop item
Create a new Loop Item template in Elementor, then copy any Job loop from the library and paste it in. If you have created any new fields in ACF then you can connect them to widgets inside the loop item.
Step 4: Create an archive page template and connect the loop grid
In Elementor > Saved Templates. Create an archive page template and name it e.g ‘Careers page template’. Then copy a Careers archive component from Element UI and paste it in. This gives you the full section layout with a loop grid inside. Click on a loop grid to connect it to a loop item you created from Step 3. Then select the Loop Grid in Elementor and go to the Query settings to set the Source to Jobs.
Your job listings will populate the grid. When publishing the archive template – make sure to set the display conditions to Jobs archive.
Step 5: Create a job post template
In Elementor > Saved Templates. Create a single post template and name it e.g ‘Job post template’. Then copy a Job Post component from Element UI and paste it in. Make sure everything is connected to your ACF fields and then publish by setting the display conditions to Careers.
Using your own existing careers CPT
If you already have a careers post type set up with your own field structure, you can still use the components but you’ll need to remap the dynamic tags manually. Inside the Loop item template, each widget is connected to a specific field name. You’ll need to update each one to point to the equivalent field in your setup.