---
title: "Customize Workable job pages"
description: "Customize Workable job pages: edit the block templates in the Site Editor, override any of the 13 PHP templates, or restyle with CSS custom properties."
source: https://workable.w4dev.com/docs/templates/
---

## Block themes: edit job pages in the Site Editor

On WordPress 6.7 or newer with a block theme, the plugin adds block templates for its pages.
Find them under **Appearance → Editor → Templates**:

| Template | Page | What it holds |
|---|---|---|
| **Single Job** | Each job | A link back to all jobs, the title, **Job Details**, the description, **Job Application Form** and **Job Sharing**. |
| **Jobs Archive** | `/jobs/` | The page title, **Job Filters** and **Job List**. |
| **Department archive**, **Location archive**, **Employment type archive** | Each [job archive](/docs/job-archives/) | The same as **Jobs Archive**, for one term. |

Each taxonomy with an archive slug gets its own archive template. Edit a template like any
other: add [blocks](/docs/shortcodes-and-blocks/) such as **Related Jobs**, move them or
change their settings.

Your version always wins. A template you save in the Site Editor is used instead of the
plugin's, and so is one your theme ships in its `templates` folder under the same name, such as
`single-wkjb_job.html`, `archive-wkjb_job.html` or `taxonomy-wkjb_location.html`.

When you build your own archive template, the **Jobs archive** pattern in the **Workable Jobs**
category inserts the title, filters and list in one go.

The plugin's blocks in these templates render with the PHP templates below, so overriding one
of those changes the block too.

## Override a PHP template

1. Create a `workablewp` folder in your theme, ideally a child theme:
   `wp-content/themes/your-theme/workablewp/`.
2. Copy the template you want from `wp-content/plugins/workablewp/templates/` into that folder,
   keeping the file name.
3. Edit your copy.

The plugin looks in your theme first and falls back to its own copy, so updates leave your
copies alone. The comment at the top of each template lists the variables it receives.

After a plugin update, compare your copies with the new originals. A template may gain a
variable or a fix worth carrying over.

## The 13 templates

| File | What it renders |
|---|---|
| `jobs.php` | The job list: count, the list itself, grouping and pagination. |
| `job-list-item.php` | One job in the list. |
| `no-jobs.php` | The message shown when no job matches, or none are open. |
| `jobs-filter-form.php` | The search box and the filter dropdowns. |
| `single-job.php` | One job: title, meta, description and apply area. |
| `job-meta.php` | The details box on a job: department, location, employment type, remote, posting date, and optionally function, industry, experience and education. |
| `job-sharing.php` | The share links and the **Copy link** button. |
| `related-jobs.php` | The **Related jobs** list. |
| `apply-button.php` | The **Apply on Workable** button. |
| `application-form.php` | The on-site application form: wrapper, captcha, consent, submit button. |
| `application-form-fields.php` | The list of fields inside the application form. |
| `page-jobs.php` | The full page around the job list at `/jobs/` and around each [job archive](/docs/job-archives/). |
| `page-single-job.php` | The full page around a single job. |

<figure class="ak-shot">
  <img src="/screenshots/job-detail.webp" alt="A single job page with the job description and the apply button" width="1200" height="844" loading="lazy" decoding="async" />
  <figcaption>A job page rendered by single-job.php and job-meta.php, before any template override.</figcaption>
</figure>

### Take over the whole page on classic themes

`page-jobs.php` and `page-single-job.php` build the whole page, including your theme's header and
footer, on classic themes. A block theme on WordPress older than 6.7 uses them too, with the
theme's header and footer template parts. With the block templates above, they are not used.

To replace the whole page, either:

- override `workablewp/page-jobs.php` or `workablewp/page-single-job.php` as above, or
- add a standard WordPress template for the `wkjb_job` post type to your theme:
  `archive-wkjb_job.php` for the list, `single-wkjb_job.php` for a job,
  `taxonomy-wkjb_department.php` and the like for [job archives](/docs/job-archives/#templates-and-hooks-for-archives).
  The plugin uses them when your theme has them.

## Restyle with CSS classes and custom properties

Every element has a class starting with `wkjb-`. Job lists, filter forms, single jobs and the
apply area sit inside a `.wkjb-root` wrapper. The main classes:

| Class | Element |
|---|---|
| `.wkjb-jobs` | The job list wrapper |
| `.wkjb-job-item` | One job in the list |
| `.wkjb-filters` | The filter form |
| `.wkjb-single` | The single job wrapper |
| `.wkjb-job` | A job's content |
| `.wkjb-apply-button` | The **Apply on Workable** button |
| `.wkjb-application` | The application form |
| `.wkjb-share` | The share links |
| `.wkjb-related` | The related jobs list |
| `.wkjb-pagination` | Page links |
| `.wkjb-no-jobs` | The empty message |

Colours, spacing and corners are CSS custom properties on `.wkjb-root`. Override them in one
rule in your theme's stylesheet or in **Appearance → Customize → Additional CSS**. For example:

```css
.wkjb-root {
	--wkjb-accent: #0a5cff;          /* buttons and links */
	--wkjb-accent-contrast: #ffffff; /* text on the accent colour */
	--wkjb-border: #e2e2e2;
	--wkjb-muted: #6b6b6b;           /* secondary text */
	--wkjb-surface: transparent;     /* card background */
	--wkjb-radius: 4px;
	--wkjb-gap: 1rem;
	--wkjb-gap-lg: 2rem;
}
```

By default the accent follows your block theme's `contrast` colour and the text on it follows
its `base` colour. Borders and secondary text are your theme's text colour, faded, so they suit
light and dark themes without any CSS.

## Developer hooks

| Hook | Type | Use it to |
|---|---|---|
| `wkjb_locate_template` | filter | Change which file is used for a template. Receives the path and the template name. |
| `wkjb_template_args` | filter | Add or change the variables a template receives. Receives the arguments and the template name. |
| `wkjb_normalized_job` | filter | Change a job as it is imported from Workable, before it is saved. Receives the job and Workable's raw data. |
| `wkjb_normalized_post_job` | filter | Change a job as it is read back from WordPress for display. |
| `wkjb_job_schema` | filter | Change the `JobPosting` structured data for a job. |
| `wkjb_organization_name` | filter | Change the `og:site_name` tag on job pages. The plugin prints its sharing tags only when no SEO plugin (Yoast, Rank Math, AIOSEO, SEOPress, Slim SEO) is active. |
| `wkjb_jobs_page_title` | filter | Change the list title on `/jobs/` and on job archives. Receives the title and the term (null on `/jobs/`). Default "Careers". |
| `wkjb_job_permalink` | filter | Change a job's link. |
| `wkjb_jobs_page_url` | filter | Change the job list's link. |
| `wkjb_apply_url` | filter | Change where the **Apply on Workable** button points. |
| `wkjb_jobs_query_args` | filter | Change the arguments used to query the job list. |
| `wkjb_jobs_database_query` | filter | Return `false` to build job lists from every stored job in memory, instead of loading only the jobs a page shows from the database. |
| `wkjb_share_links` | filter | Add, remove or reorder the networks in the share links. Receives the links, the job URL and the title. |
| `wkjb_block_templates` | filter | Return `false` to use the PHP templates on block themes too. They then replace any block template for job pages, including your own. |
| `wkjb_enqueue_frontend_assets` | filter | Return `true` to load the plugin's stylesheet on every page. |
| `wkjb_sync_completed` | action | Run code after each import. Receives the import summary. |

Example: Workable's public job feed has no salary, so add a salary range to one job's markup
yourself. `A1B2C3D4E5` is the job's shortcode, from the end of its address.

```php
add_filter( 'wkjb_job_schema', function ( $data, $job ) {
	if ( 'A1B2C3D4E5' !== $job['id'] ) {
		return $data;
	}
	$data['baseSalary'] = array(
		'@type'    => 'MonetaryAmount',
		'currency' => 'USD',
		'value'    => array(
			'@type'    => 'QuantitativeValue',
			'minValue' => 60000,
			'maxValue' => 80000,
			'unitText' => 'YEAR',
		),
	);
	return $data;
}, 10, 2 );
```

Hooks for the application form are listed in [Workable application form](/docs/on-site-applications/).