Elementor, Divi, and block themes
Whether Vakanssi works with Elementor, Divi, and block themes like Twenty Twenty-Five, and what to do for listings, apply buttons, and fully custom job templates on each.
On this page(9)
Short answer: yes, on all three, with nothing extra to install. This page covers the native widgets and module, the shortcodes, what a block theme gives you automatically, and how to get the application form and job details onto a fully custom single-job template.
The three paths
- Three native Elementor widgets, grouped under a Vakanssi section of the widget panel: Vakanssi Jobs (the listing), Vakanssi Application Form, and Vakanssi Job Details. Divi gets a matching native Vakanssi Jobs module (listing only). All are registered automatically whenever that builder is active.
- Shortcodes, which work in any builder, on any theme.
- On a block theme (Twenty Twenty-Five and similar), the archive and single job page already render through editable Site Editor templates, no builder needed at all.
What has been tested, and what has not
Elementor is verified end to end against Elementor 4.2.2 with Elementor Pro 4.1.2: all three widgets, both Theme Builder locations, and the page templates. Block themes are verified on Twenty Twenty-Five and Twenty Twenty-Four, classic themes on Hello Elementor and a plain classic theme, each in both archive and page mode and on both pretty and plain permalinks.
The Divi module is not covered by that: it is registered on Divi’s own et_builder_ready hook and shares the renderer the shortcode uses, but it has not been driven on a real Divi install. Bricks, Beaver Builder and Oxygen have no native element and have not been tested either. On any of them, [vakanssi_jobs] in a text or shortcode element is the path we can vouch for.
Native Elementor widgets and the Divi module
Jobs. Drag it onto any page (Elementor or Divi) and it renders the same branded listing as [vakanssi_jobs], with its own controls for departments, locations, and which facts to show. No shortcode needed. See Shortcodes for every setting both builders expose.
Application Form and Job Details (Elementor only). Drag either widget onto an Elementor Pro Theme Builder Single, or onto a job you build directly with Elementor, and it picks up the current job automatically, nothing to configure.
Each widget also has a Job field: leave it at 0 for the current job, or enter a specific job’s ID to show that job’s form or details on any other page (see Placement and job IDs for how to find one). They render the exact same markup as [vakanssi_job_apply] and [vakanssi_job_details].
In the Elementor editor canvas, both widgets now match the published page: Application Form previews the real, styled form whenever a published job resolves (a specific Job ID entered, or editing directly on a single-job template; a draft shows the “open soon” notice instead), and Job Details does the same. When no job resolves, each shows a placeholder box instead.
Divi has no matching Application Form or Job Details module. Keep using [vakanssi_job_apply] and [vakanssi_job_details] there, in a Text element, same as any other builder without the native widgets.
No Elementor dynamic tags for job fields
Binding an individual job field (salary, location, and so on) to a generic Elementor widget through the “dynamic” toggle is an Elementor Pro-only feature; free Elementor has no dynamic-tag UI. Use the Job Details widget, or [vakanssi_job_details], for field-level placement instead.
Shortcodes: the reliable path everywhere
Drop these into Elementor’s Shortcode widget, Divi’s Text module, or the equivalent element in any other builder:
[vakanssi_jobs], the listings board.[vakanssi_job_apply], a per-job apply button.[vakanssi_job_details], a single job’s facts block.
Styling and search/filter behavior come along automatically when the shortcode renders. See the full attribute table at Shortcodes.
Block themes get a branded archive and single page for free
On WordPress 6.7 or later with a block theme active, Vakanssi registers two editable Site Editor templates, Jobs archive and Single job, built from your theme’s own header and footer parts. Open either one under Appearance, then Editor, then Templates, and restyle it like any other template.
A theme that ships its own archive-vakanssi_job.html or single-vakanssi_job.html, or a copy you have already edited in the Site Editor, always wins over Vakanssi’s registration. On a classic (non-block) theme, the classic PHP templates still apply, as before.
A classic theme needs its own header.php and footer.php (in the theme or its parent) for Vakanssi’s branded archive and single templates to load. If either is missing, Vakanssi steps aside rather than let WordPress print its old fallback header or footer (since v0.35.3 for the footer).
The archive then shows the same open roles through your theme’s own post list, without the filter toolbar, and the single job page keeps its details and apply form.
Since v0.35.3, on a theme that already opens the page’s main content area in its header (Twenty Twenty-One is one), Vakanssi’s templates no longer open a second one, so screen readers announce one main region, not two.
The two override routes do not cross over. A block theme overrides with templates/archive-vakanssi_job.html or templates/single-vakanssi_job.html; a PHP file of the same name is ignored there. A classic theme overrides with archive-vakanssi_job.php or single-vakanssi_job.php, in the theme root or in a vakanssi/ subfolder, and since v0.33.32 both of those locations behave identically whichever Page layout is set.
Block theme on WordPress older than 6.7: the archive falls back to your theme's post list
Site Editor template registration itself needs WordPress 6.7, so on an older WordPress neither template registers. For the single job page this doesn’t matter: the job details and apply form ride the post content itself, so they still show up whatever template the theme falls back to.
For the archive, though, nothing fills the gap and WordPress falls through to your theme’s plain post list: no search, no department or remote filters, and expired roles stay visible. Since v0.33.29, Vakanssi flags this with a Site Health check and a notice on Hiring screens. See Troubleshooting for the fix.
Since v0.33.28, both paths carry the same vakanssi- wrapper classes, so custom CSS written against them works the same whether the active theme is a block theme or a classic one.
Since v0.36.0 Vakanssi has no Custom CSS box of its own: add your rules under Appearance, then Customize, then Additional CSS, which the Appearance card under Hiring, then Settings, then Jobs & Careers links to. See CSS classes on the careers and job pages for the full class list.
Single job: only when Page layout is left on Vakanssi
The single job Site Editor template only registers while Page layout (Hiring, then Settings, then Jobs & Careers, in the Job page card) is left on Vakanssi layout, the default. Switching it to my theme’s template hands the single page fully back to the theme, block theme or not. See Settings reference.
Listings paginate properly
/jobs/page/2/, /3/, and so on now work on the built-in archive. Page size is 20 by default and configurable for developers through the vakanssi/jobs/archive_per_page filter, see Hooks.
Since v0.33.7, a careers page built with [vakanssi_jobs] or the Job Listings block, including the page the setup wizard creates, paginates the same way: limit roles per page (20 by default) with matching pagination controls, and /careers/page/2/ works whether or not the built-in archive is on.
This also fixes a routing bug where, with the archive off, page 2 of the careers page 404’d as a job literally named “page”.
Turn pagination off with the block’s Split into pages toggle, or paginate="false" on the shortcode, for a fixed-size teaser instead. See Pagination for the full behavior.
Elementor Pro Theme Builder
Because Jobs is a public custom post type with a REST endpoint and editor, excerpt, and custom-fields support, Elementor Pro users can build custom single-job and archive templates in the Theme Builder, use dynamic tags for the title and excerpt, and pull a raw job field in with the Custom Field dynamic tag.
Job fields are stored under keys that start with an underscore, which the tag’s Key list hides, so type the key into Custom Key. The value arrives unformatted (for example FULL_TIME), so the Job Details widget is the formatted option.
Since v0.33.30, the post type does not support a featured image by default, so Elementor Pro’s Featured Image dynamic tag has nothing to show on a job. A site that wants one can add thumbnail back through the vakanssi/jobs/supports filter, see Hooks; rendering it is then the theme’s own Theme Builder work.
Both an archive template and a single-job template built this way are now respected automatically: the built-in archive and the built-in single job page each check for a matching Theme Builder template first, and only fall back to their own layout when none matches.
A Theme Builder archive still lists only open roles: Vakanssi shapes the archive’s own query, so expired jobs and, since v0.35.3, password-protected jobs stay off a page Elementor draws. Under a Theme Builder Single, a password-protected job shows no facts, no form, and no structured data, and the Application Form widget declines too.
There is nothing to flip in Settings to hand either page over, not disable_archive for the archive, and not Page layout (Hiring, then Settings, then Jobs & Careers) for the single job page. A matching Theme Builder condition just wins.
Custom single templates: drag the widgets in directly
The job description, facts block, and apply button are appended automatically wherever the post content renders, which means a Theme Builder Single template needs a Post Content widget for them to show up. You no longer have to rely on that: drag the Application Form and Job Details widgets onto the template directly, they resolve the current job automatically, or add [vakanssi_job_apply] / [vakanssi_job_details] in a Shortcode widget.
A Single template with none of the above (no Post Content widget, no Vakanssi widgets, no shortcodes) renders as a title only, no application form or job details. The block-theme Site Editor “Single job” template already includes a Post Content block, so this only affects classic themes using Theme Builder.
Since v0.32.15, adding a Post Content widget and the Application Form widget to the same template no longer shows the form twice: it appears once, wherever the template puts it first.
A Theme Builder template replaces Vakanssi's wrapper classes
When a Theme Builder Single or Archive owns the page, it owns the whole layout, so vakanssi-single-job, vakanssi-careers-archive and their child classes are not on the page. Custom CSS written against those selectors stops applying there. Style the Theme Builder template itself instead, or hang your rules on the classes the listing and the form still emit (vakanssi-jobs, vakanssi-job-link, vakanssi-apply-button), which are unaffected.
Wizard default: a careers page is now your one jobs index
Connecting or creating a careers page in the setup wizard now switches your site to page mode: the built-in /jobs/ archive turns itself off, and the page you chose becomes the one place jobs are listed (single job pages still use the job URL base as before). Re-enable the built-in archive any time under Hiring, then Settings, then Jobs & Careers. See The setup wizard.
Recommended workflow
| Goal | Approach |
|---|---|
| Listings on any Elementor or Divi page | The native Jobs widget/module, or [vakanssi_jobs] in a Shortcode widget |
| An apply button or single-job facts on Elementor | The native Application Form / Job Details widgets, or the shortcodes in a Shortcode widget |
| An apply button or single-job facts on Divi or another builder | [vakanssi_job_apply] / [vakanssi_job_details] (shortcode only, no native widget on Divi) |
| A branded archive and single page with no builder work | Use a block theme. Site Editor templates ship automatically on WordPress 6.7+ |
| Styled single-job pages on a classic theme | A Theme Builder single template with a matching condition. It wins automatically; add the Application Form / Job Details widgets (or a Post Content widget) for the form and details |
| A fully custom archive (Elementor Pro) | Build a Theme Builder archive template with a matching condition. It wins automatically |