Most of our clients are small businesses. They often ask us to add a way for them to post job openings and accept applications. Early on, we would select one of the popular WordPress job plugins. But each time we found our clients overwhelmed with features they didn’t want and too complicated for their tastes.

Ultimately, we created our own Job Opening & Application Feature that we use on websites we build using Divi.

What Our Job Opening & Application Feature Does

The feature provides the ability to post job opening by adding a set of menu items in administrative panel.

Image showing Job menu items in administration panel

Job categories can be created. In our example, we have two categories: Part-Time and Full-Time.Iamge showing Job Categories

Jobs openings are added and managed just like ordinary WordPress posts.

Image showing job opening post

The Job Openings page can be added to the navigation menus by selecting “All Jobs” from Jobs section and changing the title to Job Openings.

Image showing Jobs Section in Menu ManagerImage showing Change Menu Title to Job Openings

On the Front End, when the Job Openings menu item is selected, a page showing all job openings is displayed.

Image showing Job Opening Page

Clicking on the Job Title or Learn More button displays the Job Opening.

Image showing a Job Opening

Clicking on the Apply Now button displays the Application Form.

Image showing Job Application

How To Implement Our Job Openings & Application Feature

Step One: Create a Jobs Custom Post Type and Job Category Taxonomy

Add this code to your child theme’s functions.php file.

function job_category_taxonomy() {
  register_taxonomy(
    'job_category',
    'job',
    array(
      'hierarchical' => true,
      'labels' => array(
        'name'               => 'Job Category',
        'singular_name'      => 'Job Category',
        'menu_name'          => 'Job Categories',
        'name_admin_bar'     => 'Job Category',
        'add_new'            => 'Add New',
        'add_new_item'       => 'Add New Job Category',
        'new_item'           => 'New Job Category',
        'edit_item'          => 'Edit Job Category',
        'view_item'          => 'View Job Category',
        'all_items'          => 'All Job Categories',
        'search_items'       => 'Search Job Categories',
        'parent_item_colon'  => 'Parent Job Categories:',
        'not_found'          => 'No Job Categories found.',
        'not_found_in_trash' => 'No Job Categories found in Trash.'
      ),
      'query_var' => true,
      'rewrite' => array(
        'slug' => 'job_category',
        'with_front' => false
      )
    )
  );
}
add_action( 'init', 'job_category_taxonomy');

function job_cpt() {
  register_post_type( 
    'job', array(
      'labels' => array(
        'name'               => 'Job',
        'singular_name'      => 'Job',
        'menu_name'          => 'Jobs',
        'name_admin_bar'     => 'Job',
        'add_new'            => 'Add New',
        'add_new_item'       => 'Add New Job',
        'new_item'           => 'New Job',
        'edit_item'          => 'Edit Job',
        'view_item'          => 'View Job',
        'all_items'          => 'All Jobs',
        'search_items'       => 'Search Jobs',
        'parent_item_colon'  => 'Parent Jobs:',
        'not_found'          => 'No jobs found.',
        'not_found_in_trash' => 'No jobs found in Trash.'
      ),
      'description' => 'Job openings.',
      'public' => true,
      'menu_position' => 20,
      'has_archive' => true,
      'rewrite' => array('slug' => 'jobs'),
      'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail', 'revisions', )
    )
  );
}
add_action( 'init', 'job_cpt' );

Step 2: Update Your Permalinks

Any time a new custom post type is added, you must updated your permalinks. Simply go to Settings > Permalinks and click the Save button.

Step 3. Save Templates in Child Theme Directory

There are three templates that need to be copied and saved in your child theme directory. I created these by taking Divi template files and making minor modifications.

  1. archive-job.php – Displays all jobs
  2. taxonomy-job_category.php – Displays job category listings
  3. single-job.php – Displays a single job opening

to display the All Jobs Listing (archive template), Job Category Listings (taxonomy template) and Job Opening (single template)

Step 4. Add Two Plugins (Optional)

I recommend using Contact Form 7 and the Contact Form 7 – Dynamic Text Extension plugins.

The reason is that when a visitor clicks on an Apply Now button, Job ID is passed as a URL parameter and the Job Application form auto-populates (in a hidden field) the name of the job — and includes in the email.

If you wish to follow this recommendation, install these two plugins, if you don’t already have them installed.

Step 5. Create the Job Application Form

If you are following my recommendation and using Contact Form 7, create a form following the steps detailed below. If you prefer to use a different contact form manager, then create your own form and skip to the next step.

In Contact Form 7, add a new form and populate the Form tab with this:

[dynamichidden position "CF7_GET key='job_id'"]

<p><b>Full Name</b> (required)<br />
     </p>

<p><b>Address</b> (required)<br />
    [textarea* address] </p>

<p><b>City</b> (required)<br />
     </p>

<p><b>State</b> (required)<br />
     </p>

<p><b>Zip Code</b> (required)<br />
     </p>

<p><b>Telephone Number</b> (required)<br />
    [tel* phone]</p>

<p><b>Email</b> (required)<br />
    [email* email] </p>

<p><b>Do you have a degree?</b> (required)<br />
[radio degree default:2 "Yes" "No"]</p>

<p><b>Where did you complete your degree?</b><br />
    </p>

<p><b>Title of your degree</b><br />
    </p>

<p><b>Upload your resume in PDF or MS-Word format</b> (required)<br />
    [file* resume filetypes:pdf|doc|docx limit:4096mb]</p>

<p>[submit class:et_pb_submit_button class:et_pb_button class:et_pb_bg_layout_dark "Send"]</p>

On the Mail tab, modify the field shown below:

To: The email address where job applications are to be delivered.
From: [fullname]
Subject: Job Application via Website
Additional Headers: Reply-To: [email]
Message Body:
A job application has been submitted via the website.

Position: [position]

[fullname]
[address]
[city], [state] [zip]
[phone]
[email]

Degree? [degree]
Where from?: [college]
Degree title: [degree-title]

File Attachments: [resume]

Save the form and copy the shortcode.

Step 6. Create a Job Application page

Create a page titled Job Application. Make sure that the slug is: job-application. (Note: If you decide to use a different slug, you’ll need to change links in the archive and taxonomy templates.)

Paste the shortcode for the form into the content field. (If your shortcode contains a form title, you’ll probably want to delete it.]

Save and publish the page.

Step 7. Add CSS Code to Your Child Theme’s style.css File

Add this code to your child theme’s style.css file

/* Jobs Application Forms */
.wpcf7-submit.et_pb_submit_button.et_pb_button.et_pb_bg_layout_dark {
	display: block;
	margin: 0 auto;
}
.wpcf7-textarea {
	width: 100%;
}
.wpcf7-text,
.wpcf7-dynamictext {
	width: 100%;
}
@media all and (max-width: 768px) {
	.wpcf7-text{
		width: 100%;
	}
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .job-apply-table input, .job-apply-table textarea, .wpcf7-dynamictext {
	background-color: #eee !important;
	border: none !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	border-radius: 0 !important;
	font-size: 14px;
	color: #3a3a3a !important;
	padding: 8px !important;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input.wpcf7-form-control.wpcf7-file.wpcf7-validates-as-required {
	font-size:inherit;
}
.address .wpcf7-textarea {
	height: 4em;
}
.wpcf7-response-output {
	text-align: center;
}
div.wpcf7-validation-errors {
	border: 2px solid #f00;
	color: #f00;
}

/* Jobs */
.view-job {
	float: right;
	margin: 20px 0;
}
.job-apply {
	margin: 20px 0 50px;
	display: block;
	text-align: center;
}
.job-category {
	margin-bottom: 20px;
}
.no-jobs p {
	margin-top: 20px;
}

Summary

The implementation process may look difficult, but if you’ve already got a child theme set up, it should take less than 30 minutes to implement our Job Opening & Application Feature.

I believe that I’ve detailed all of the steps properly. I’ve been writing this as I’ve implemented it on a client’s website. If you experience problems, please leave a comment below and I’ll help.

If you found this useful, please let us know that too.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This