WP Job Manager
BuddyX Pro’s WP Job Manager support is styling only. The theme ships one stylesheet that restyles the job pages WP Job Manager already creates. It adds no job features of its own: no templates, no shortcodes, no widgets, no settings screen, and no JavaScript. Everything a job board does still comes from the plugin. The theme only decides how it looks.
What is WP Job Manager?
Section titled “What is WP Job Manager?”WP Job Manager is a plugin that turns a WordPress site into a job board. It registers the job listing content type, the front-end submission form, the employer dashboard, and the job search and filter form. Its add-ons extend that with applications, bookmarks, and resumes.
BuddyX Pro’s part is the appearance. When WP Job Manager is active, the theme loads a stylesheet that makes the job pages match your saved colors, border radius, and dark mode.
Requirements
Section titled “Requirements”| Requirement | Notes |
|---|---|
| BuddyX Pro theme | Active |
| WP Job Manager | Active. The theme checks for the WP_Job_Manager class and loads its job stylesheet if that class exists. |
The add-on stylesheets are part of the same file, so Applications, Bookmarks, and Resume Manager surfaces are styled too. No extra step is needed for them.
Installation & Setup
Section titled “Installation & Setup”Step 1: Install WP Job Manager
Section titled “Step 1: Install WP Job Manager”- Go to Plugins > Add New
- Search for “WP Job Manager”
- Click Install Now, then Activate
Once the plugin is active, the theme’s job stylesheet loads on the front end. There is no theme setting to switch it on.
Step 2: Set Up Your Job Board in the Plugin
Section titled “Step 2: Set Up Your Job Board in the Plugin”Job board configuration lives entirely in WP Job Manager: which pages hold the job listings, the submission form, and the dashboard; which job types you offer; whether listings need approval. Follow the plugin’s own setup for all of it. The theme does not add or replace any of those screens.
Step 3: Set Your Colors and Corners
Section titled “Step 3: Set Your Colors and Corners”The job pages read the same colors and radius values as the rest of your site. Set them once and the job pages follow.
- Go to Appearance > Customize > Site Skin for colors
- Go to Appearance > Customize > General > Site Layout for border radius
- Click Publish
- Open a job listing page to see the result
Details and defaults for each of these settings are in the Settings section below.
What You Can Do
Section titled “What You Can Do”The theme restyles eight areas of WP Job Manager and its add-ons. These are the areas the stylesheet names in its own table of contents.
| Area | What the theme styles |
|---|---|
| Job Dashboard | Table cells, form fields and their focus state, the Select2 control, the action menu popover, job rows, the responsive job title column, and the footer “Post a Job” link rendered as a theme button |
| Jobs | The search and filter form, the job type checkbox list, job listing rows, company logos, job type labels |
| Post a Job | The submit form card and the listing preview screen |
| Job Single | The company block, the application details block, and the bookmarks form border |
| Bookmark | The bookmarks form on a single listing |
| Past Applications | The past applications table |
| Candidate Dashboard | Candidate-facing dashboard tables |
| Resume Listings | The resume table, the resume filter form, the resume list, and the education and experience blocks on a single resume |
Theme Features
Section titled “Theme Features”Job Cards That Follow Your Palette
Section titled “Job Cards That Follow Your Palette”Job listing rows are drawn as one connected, bordered, rounded list. Borders between rows collapse into a single line. The first and last rows take your global border radius. The company logo becomes a 44px circle. Hovering a row changes its background, raises it with a shadow, and lifts it above its neighbours.
All of the colors involved are theme tokens, so a job card picks up whatever you set in Site Skin.
Job Type Chips
Section titled “Job Type Chips”Each job type is shown as a small pill next to the listing. These use a fixed pastel palette, one color per type:
| Job type | Text | Background |
|---|---|---|
| Full-time | #48bf1e |
#e4f6dd |
| Part-time | #f08d3c |
#fff6ef |
| Freelance | #39c |
#DCF2FD |
| Internship | #6033cc |
#e6ddfb |
| Temporary | #d93674 |
#FFE2E0 |
These five colors are deliberately hard-coded. They carry meaning per job type, so they do not change with your customizer palette and they do not flip in dark mode. If you want different chip colors, override them with custom CSS.
Two other rules are hard-coded for the same reason and will also stay as they are in dark mode: the dashboard table header text is #fff, and the dashboard row-hover shadow uses a fixed Google Material style shadow.
Search and Filter Form as a Card
Section titled “Search and Filter Form as a Card”The keyword, location, region, categories, remote, and submit fields are laid out in three equal columns inside a bordered, rounded panel. The job type checkbox list sits directly beneath it and shares the same border. The “Remote position” checkbox is given a flex order of 1, so it sits after the other fields in the panel.
At 640px and narrower the form collapses to a single stacked column, and the job type checkboxes go full width without their per-item borders.
Dashboard Action Icons
Section titled “Dashboard Action Icons”The dashboard action links (Edit, Relist, Mark filled, Mark not filled, Duplicate, Delete) get a small glyph icon before the label. The icons come from Font Awesome 6 Pro, which BuddyX Pro loads on every page, so no extra font setup is needed. There is an explicit right-to-left rule for these icons, and the icon spacing uses logical properties so it mirrors correctly on RTL sites.
Mobile Layout
Section titled “Mobile Layout”Job listing rows stack vertically at 640px and narrower. The company logo grows to 64px and centers, and the position, location, and meta columns each go full width and center-align. The dashboard job title column has its own adjustment at 1024px and narrower.
Dark Mode
Section titled “Dark Mode”There is no separate dark stylesheet for job pages. Job pages follow dark mode because the theme re-emits the same color variables the job stylesheet reads under the dark selector. Set your dark colors in Site Skin and job pages flip with the rest of the site, except for the hard-coded rules listed above.
Card Treatment on Forms
Section titled “Card Treatment on Forms”The submit job form, the submit resume form, and the generic job manager form are wrapped in a card: the box background color, a 1px themed border, your global radius, and 1rem of padding. The bookmarks form is excluded from that card treatment on purpose, so a bookmark button on a single listing does not sit inside a panel of its own.
Settings
Section titled “Settings”There are no WP Job Manager settings in the BuddyX Pro customizer. The job stylesheet reads thirteen shared theme variables, so the settings below are the ones that visibly change job pages. They are ordinary theme settings and they affect the whole site, not only job pages.
Colors
Section titled “Colors”Location: Appearance > Customize > Site Skin
All color fields below only apply when custom colors are switched on.
| Setting | What it changes on job pages | Default |
|---|---|---|
| Set Custom Colors? | Turns the color fields below on or off | Default: Yes (on) |
| Global Border Color | Job row borders, filter panel borders, table borders, company and application detail borders | Default: #e4e3e3 |
| Global Border Color (Dark Mode) | The same borders in dark mode | Default: #2a2a2a |
| Box Background Color | The card background behind job forms, the filter panel, and the preview title bar | Default: #ffffff |
| Box Background Color (Dark Mode) | The same card backgrounds in dark mode | Default: #161616 |
| Secondary Background Color | Job row hover background and other pale surfaces on job pages | Default: #fafafa |
| Headings Color | Job and resume headings | Default: #003049 |
| Body Text Color | Body text on job pages | Default: #505050 |
| Button Background Color | The dashboard “Post a Job” link and WP Job Manager’s own .jm-ui-button buttons |
Default: #ee4036 |
| Button Background Hover Color | The same buttons on hover and focus | Default: #f83939 |
| Button Text Color | Label on those buttons | Default: #ffffff |
| Button Text Hover Color | Label on those buttons on hover | Default: #ffffff |
| Button Background Color (Dark Mode) | Those buttons in dark mode | Default: #ff6b6b |
Corners
Section titled “Corners”Location: Appearance > Customize > General > Site Layout
| Setting | What it changes on job pages | Default |
|---|---|---|
| Global Border Radius | Job list corners, filter panel, form cards, tables. This is the most-used value in the job stylesheet. | Default: 8px |
| Buttons Border Radius | The dashboard “Post a Job” link and .jm-ui-button buttons |
Default: 6px |
| Form Border Radius | Job form fields | Default: 6px |
Not Configurable
Section titled “Not Configurable”The company name, location, and posted-date lines on a job card use a fixed muted color with no customizer field: #757575 in light mode and #a0a0a0 in dark mode. Change it with custom CSS if you need to.
Use Cases
Section titled “Use Cases”A niche job board
Section titled “A niche job board”You run a job board for one industry and want it to look like a product, not a plugin. Install WP Job Manager, set your brand color as the button background in Site Skin, and set Global Border Radius to match the rest of the site. The listing rows, the filter panel, and the employer dashboard all pick up those two values without touching a template.
A paid community with a member jobs area
Section titled “A paid community with a member jobs area”You run a membership community on BuddyX Pro and add a jobs page for members. The job pages inherit the same card background, border color, and radius as your activity and group pages, so the jobs area reads as part of the community rather than a bolted-on section. Switch on dark mode and the job pages flip with everything else.
A recruitment agency site
Section titled “A recruitment agency site”You use WP Job Manager plus the Applications and Resume Manager add-ons. Candidates see a styled resume table and resume filter form, employers see a styled dashboard with icon-labelled Edit, Relist, and Delete actions, and past applications appear in a themed table. All three surfaces are covered by the same stylesheet, so there is no add-on-specific setup.
A regional or multilingual board
Section titled “A regional or multilingual board”You run a board in Arabic or Hebrew alongside English. The dashboard action icons have an explicit right-to-left rule and the icon spacing uses logical properties, so the icons sit on the correct side of each label after the direction flips.
Troubleshooting
Section titled “Troubleshooting”Job pages look unstyled
Section titled “Job pages look unstyled”The theme’s job stylesheet loads only when the WP_Job_Manager class exists. Confirm WP Job Manager is active, then clear any page or CSS caching plugin and reload.
Job type chips do not change in dark mode
Section titled “Job type chips do not change in dark mode”That is intended. The five job type chip colors are hard-coded so each type keeps its own meaning. Override them with custom CSS if you want them to follow your palette.
A custom color is not reaching the job pages
Section titled “A custom color is not reaching the job pages”Check that Set Custom Colors? is set to Yes in Appearance > Customize > Site Skin. The individual color fields do nothing while it is off.
The Select2 dropdown on job forms is not themed
Section titled “The Select2 dropdown on job forms is not themed”The dropdown styling is scoped with the CSS :has() selector. Browsers without :has() support will show the plugin’s own dropdown styling instead. The dropdown still works; only its colors differ.
Dashboard action icons show as empty boxes
Section titled “Dashboard action icons show as empty boxes”The icons use Font Awesome 6 Pro, which the theme loads globally. If the icons are missing, something is dequeueing the buddyxpro-load-fontawesome stylesheet. Check optimization plugins that strip unused CSS.
For Developers
Section titled “For Developers”The Whole Integration
Section titled “The Whole Integration”| Item | Value |
|---|---|
| Stylesheet handle | buddyx-wpjobmanager |
| Built file | assets/css/buddyx-wpjobmanager.min.css |
| Source file | assets/css/src/buddyx-wpjobmanager.css |
| Registered in | inc/Styles/Component.php, in the $css_files manifest |
| Load condition | class_exists( 'WP_Job_Manager' ) |
| Templates | None. The theme ships no WP Job Manager template files. |
| JavaScript | None |
There is no other WP Job Manager code in the theme.
Loading Behaviour
Section titled “Loading Behaviour”The manifest entry has no global key, so it defaults to false. On a normal request the stylesheet is registered and then emitted as a preload link that swaps to a stylesheet on load. The preload condition is the bare class_exists() check, so the preload tag is emitted on every front-end page once WP Job Manager is active, not only on job pages. On AMP requests preloading is off and the stylesheet is enqueued directly.
If you want it loaded only on job screens, filter the manifest and replace the callback with a content-aware one.
Filters
Section titled “Filters”| Filter | Where | Use |
|---|---|---|
buddyxpro_css_files |
inc/Styles/Component.php |
Filters the whole CSS manifest. Use it to change the buddyx-wpjobmanager entry’s preload_callback, deps, or media, or to unset the entry entirely. |
buddyxpro_preloading_styles_enabled |
inc/Styles/Component.php |
Turns the preload strategy on or off site-wide. When off, manifest stylesheets are enqueued directly. |
CSS Custom Properties Consumed
Section titled “CSS Custom Properties Consumed”The stylesheet reads these thirteen variables and nothing else. Redefine any of them in a child theme to change job pages without editing the stylesheet.
| Variable | Uses |
|---|---|
--global-border-radius |
30 |
--global-border-color |
27 |
--color-theme-white-box |
16 |
--global-body-lightcolor |
7 |
--color-meta |
4 |
--global-title-color |
3 |
--button-background-hover-color |
3 |
--button-background-color |
3 |
--global-font-color |
2 |
--button-text-hover-color |
2 |
--button-text-color |
2 |
--button-border-radius |
2 |
--form-border-radius |
1 |
These are legacy names. inc/Tokens/Component.php maps each one to a canonical --bx-color-* or --bx-radius-* token and re-emits both the token and the legacy alias in the light :root block and in the dark block. That mapping is why job pages follow saved customizer colors and flip in dark mode with no job-specific field anywhere in the theme.
Deliberately Hard-Coded Rules
Section titled “Deliberately Hard-Coded Rules”Three sets of rules in the source are hard-coded rather than token-driven:
- The job type chip palette, five colors, semantic per job type. Carries a
keepcomment. - The dashboard row-hover shadow, a fixed Google Material card shadow. Carries a
keepcomment. - The dashboard table header text color,
#fff. Nokeepcomment on this one.
Leave the two keep comments in place if you edit the source file.
Got a question? We’re a friendly team, happy to help.
- Visit our Documentation Portal
- Email us at support@wbcomdesigns.com