Styling and templates

You can change how the job board looks without editing the plugin: colours from the Colors screen, your own CSS from your theme, and whole page layouts by copying them into your theme. Never edit files inside wp-content/plugins/wp-job-portal; an update replaces them.

How the stylesheets load

On pages that show WP Job Portal content, the plugin loads these stylesheets:

Handle	File	Holds
wpjobportal-design-tokens	includes/css/job_portal_variables.css	The colour and font-size variables.
wpjobportal-design-system	includes/css/wpjobportal-design-system.css	Shared components.
wpjobportal-style	includes/css/style.css	The main front-end look.
wpjobportal-jobseeker-style	includes/css/jobseekercp.css	The job seeker dashboard.
wpjobportal-employer-style	includes/css/employercp.css	The employer dashboard.

When a design provider such as Pro’s Elegant Design is active, the same sheets are loaded inside CSS cascade layers (wpjp-legacy and wpjp-foundation) and the provider’s own stylesheet is loaded after them, outside any layer. Rules outside a layer beat layered rules whatever their specificity, so your theme’s CSS wins over the plugin’s without !important.

Change the colours

The Colors screen in the WP Job Portal side menu sets the primary, secondary and content colours and the heading and body font sizes. It writes them into job_portal_variables.css and saves a copy in the database, so they are restored after each update. See Design and colours.

The variables are CSS custom properties on :root:

Variable	Holds
--wpjp-primary-color	The primary colour.
--wpjp-secondary-color	The secondary colour.
--wpjp-body-font-color	The body text colour.
--wpjp-border-color	The border colour.
--wpjp-background-color	The background colour.
--wpjp-card-background	The card background.
--wpjp-success-color, --wpjp-warning-color, --wpjp-danger-color	Status colours.
--wpjp-main-heading, --wpjp-sub-heading, --wpjp-second-sub-heading, --wpjp-body-font-size	Font sizes.

Add your own CSS

WP Job Portal has no custom CSS box of its own. Put your rules where your theme keeps custom CSS: your child theme’s style.css, or Appearance → Customize → Additional CSS on a classic theme.

Front-end pages are wrapped in an element with the class wjportal-main-up-wrapper, and most classes start with wjportal-. Scope your rules under the wrapper so they only touch the job board:

.wjportal-main-up-wrapper .wjportal-page-header {
    border-bottom: 2px solid var(--wpjp-primary-color);
}

You can also override a variable for the whole job board:

:root {
    --wpjp-primary-color: #0b7a75;
}

Note

A value set in your theme replaces the one from the Colors screen wherever your stylesheet loads after the plugin’s. If a colour does not change, clear any page cache; the Colors screen notes that some changes need it.

Override a page layout from your theme

WP Job Portal looks in your theme before it uses its own layout. To override one:

1. Find the layout in the plugin. Layouts live in modules/<module>/tmpl/<layout>.php, for example modules/job/tmpl/viewjob.php for the job detail page.
2. In your child theme, create a folder called wp-job-portal.
3. Copy the layout into it and rename it <module>-<layout>.php, for example wp-job-portal/job-viewjob.php.
4. Edit your copy.

wp-content/themes/your-child-theme/
└── wp-job-portal/
    ├── job-viewjob.php        overrides modules/job/tmpl/viewjob.php
    └── company-viewcompany.php overrides modules/company/tmpl/viewcompany.php

The lookup uses WordPress’s locate_template(), so a child theme’s copy wins over the parent theme’s. If the layout has a companion <layout>.inc.php file, the plugin still loads that from its own folder before your copy.

Only whole layouts can be overridden this way. The partials in tmpl/views/ and the shared parts in templates/ are always loaded from the plugin.

Caution

Your copy does not change when WP Job Portal is updated. After each update, compare it with the plugin’s new version of the layout and bring across any changes, or the page may break or miss new features.

Overrides work the same way for layouts that Pro or Marketplace Suite supply. Name the file after the module key the plugin uses, for example wp-job-portal/departments-mydepartments.php for Pro’s My Departments page or wp-job-portal/multicompany-mycompanies.php for Marketplace Suite’s My Companies page. The companion .inc.php file still loads from the product’s own folder.

Override a widget template

The eight free widgets also look in your theme’s wp-job-portal folder. If the file is there, it is used instead of the built-in output.

Widget	Theme file, first match wins
Jobs	widget-newestjobs.php, widget-topjobs.php, widget-hotjobs.php or widget-featuredjobs.php (by the type of jobs chosen), then widget-jobs.php
Companies	widget-featuredcompanies.php, then widget-companies.php
Resumes	widget-resume.php, then widget-resumes.php
Jobs by category	widget-categories.php
Jobs by job type	widget-jobtypes.php
Jobs by location	widget-jobsbycities.php, widget-jobsbystates.php or widget-jobsbycountries.php, then widget-jobsbylocation.php
Job stats	widget-stats.php
Search jobs	widget-searchjobs.php

The widget’s records are in wpjobportal::$_data, for example wpjobportal::$_data['jobs_widget'] for the jobs widget.

Related

• Design and colours
• Theme
• Widgets
• Elementor
• How the plugin is built