How to Build a WordPress Job Board Using GravityView

Job boards play an important role in our daily lives by helping to connect job seekers with employers. If online job boards didn’t exist, it would be very difficult for businesses to find suitable talent. In this post, we’re going to show you how to build a WordPress job board using Gravity Forms and GravityView.

GravityView is a plugin that extends Gravity Forms by allowing you to display form entries on the front end of your website. By taking advantage of GravityView’s powerful functionality and flexibility, you can create a niche job board without writing any code.

If that interests you, keep reading to find out more!

💡 Check out a live demo of the job board and get your own free trial site preloaded with all GravityKit add-ons!

Creating the Job Listing Form in Gravity Forms

Let’s start by creating a job posting form in Gravity Forms. First, log into your WordPress admin panel, hover over Forms, and click New Form.

After giving your form a name, you can start adding fields to it using the drag and drop form builder. Start by adding a Single Line Text field called “Job Title” and another one called “Company Name”.

Now add two Dropdown fields – one called Job Type (with the options “full-time”, “part-time”, or “freelance”) and one called “Job Category”. To keep things simple, we’ll add three categories – “Sales & Marketing”, “Design”, and “Programming”.

Finally, add another Single Line Text field called “Location” and then a Paragraph field called “Job Description”. 

Here’s what our completed form looks like:

The next step is to embed our form on a post or page.

Adding Your Form to a Post or Page

Okay, now that our form is ready, the next step is to embed it on a post or page. If you’re using the WordPress block editor (Gutenberg), you can do this by adding a Gravity Forms block to your page layout.

Click on the ‘+’ icon to add a new block, search for “Gravity Forms” and add the Gravity Forms block to your page. Now,  select your job posting form from the dropdown menu and you’re done!

Now it’s time for the fun part – using GravityView to display job listings on the front end!

Displaying Jobs on the Front End Using GravityView

GravityView allows you to harness your Gravity Forms data to create powerful web apps and meaningful website content. GravityView also makes for one of the best WordPress job board plugins.

If you don’t have a GravityView license, you can purchase one from our website. After that, download the plugin file and install it on your website.

After activating GravityView, you’ll be able to create your first View. A View is a custom post type that allows you to display Gravity Forms data using a drag and drop interface.

Creating a View

Head over to your WordPress admin dashboard, hover over Views and click New View. Give your View a name (something like “Job Listings”) and select your job posting form as the Data Source.

Now under where it says Choose a View Type, select the List layout.

Okay, now we can start constructing our View layout to display job listings on the front end. There are three layouts that make up a View – the Multiple Entries layout, Single Entry layout, and Edit Entry layout.

Configuring the Multiple Entries Layout

Let’s start by customizing the Multiple Entries layout – this is the page where all of our job listings will be displayed. At the top, there are spaces to add widgets. Widgets are tools that help users navigate through your View.

To help users search job listings, let’s add a Search Bar widget at the top and pagination info on the left. You can add new widgets to widget areas by clicking the + Add Widget button.

The Entries Fields section allows us to add fields to our View. Fields added here correspond to the fields in your form. Under Listing Title, add the Job Title field, and under Subheading, add the Company Name field.

If there are other fields you want to show on the listing page, you can add these under Other Fields. In our example, we’ll add the Job Type and Category, but we’ll add both fields inside a Custom Content field.

Custom Content fields allow you to add plain text, HTML, merge tags, shortcodes, and other custom content to your View layouts. Here we’ll use it to add the Type and Category fields next to each other and we’ll make them both bold using inline CSS.

Here’s what the Multiple Entries layout looks like on the backend:

Configuring the Single Entry Layout

Now let’s turn our attention to the Single Entry layout. This is where users go to find out more information about a particular job posting. Before we can configure the Single Entry layout, we need to add a link to the Single Entry from the Multiple Entries screen.

Let’s make the Job Title field link through to the Single Entry. To do this, click on the gear icon next to the field name and check the box that says “Link to single entry”.

In this example, we’ll keep the Single Entry layout the same as the Multiple Entries layout, except we’ll also add the Location field and the Job Description field.

When you’re done setting up your View, it’s time to embed it on a post or page. To do this, copy the GravityView embed shortcode on the right side of the page and paste it into your text editor.

Okay, the moment of truth… Let’s see what this all looks like on the front end.

Checking Out Our WordPress Job Board on the Front End

Here’s what the Multiple Entries screen looks like on the front end using the WordPress 2020 theme. As you can see, there’s a search bar at the top with the job listings appearing below, one after the other.

Clicking on the job title takes you through to the Single Entry page where you can view more information about that particular job, such as the location and job description.

It’s looking good, isn’t it?

Taking it Further

In this post, we created a relatively simple WordPress job board, but if you want to build something more sophisticated, that’s also possible.

For example, using the GravityView Featured Entries extension you can add “featured” listings to your job board that show up at the top of the results. And if you’re looking to create a private job board that’s only available to registered members, you can restrict your View by login status or user role.

Here’s what can be achieved by using a slightly “flashier” theme combined with a couple of GravityView extensions.

Finally, if you want to use GravityView to manage job applications as well, read our tutorial Making a job application management system with GravityView.

Build Your WordPress-Powered Job Board Today

GravityView is an add-on for Gravity Forms that allows you to display your form entries on the front end of your website. In this post, we demonstrated the versatility of GravityView by showing you how to create an online job board powered by WordPress. 

Job boards are important tools for connecting companies with potential employees. While most job boards are general, allowing anyone to post listings, niche job boards for smaller, specialist industries are growing in popularity.

If you enjoyed this tutorial, check out how to build an online petition or learn how to create a custom real estate listing site!