Search

DIY Job Portal on WordPress with Jobify Theme & WP Job Manager

Listen to this article

keep-calm-and-use-the-jobify-themeA quick search on Google of why WordPress should be your preferred choice of CMS will give you innumerable results. On clicking through the first few links you will notice that ‘ease-of-use’ is a predominant factor to use WordPress as a content management system.

And rightly so!

WordPress along with the plethora of plugins and themes available in the market provide users with the unique experience of setting up complete systems without having to actually seek out for any professional assistance. This unique aspect makes WordPress stand apart from other open source content management systems.

In today’s post I am going to take you through the steps of setting up a Job Portal on WordPress all by yourself 🙂 You really don’t need to fret if you’re not a techno-geek. Just do as I am saying, use a little of good sense and you’ll be good to go.

 Mind you, in this post I am going to explain the central idea here that of setting up a job listings website. So, my descriptions will revolve around it. However, if you have any accessory question feel free to get them answered using the comments section.

Software Needed for Job Portal on WordPress

1. WP Job Manager Plugin

WP Job Manager is a free job listing plugin available on wordpress.org that allows users to post jobs directly on your website. The plugin provides an option to classify jobs into various categories and types. Additionally you can extend the plugin functionality with an array of premium plugins available.

2. Jobify Theme

The Jobify theme has been specially developed for WP Job Manager and is recommended by the makers of WP Job Manager themselves.  The theme has been integrated to work seamlessly with the custom post type for jobs, job listing categories and job listing types offered by the WP Job Manager plugin.

3. WordPress Importer

To get started with WP Job Manager and Jobify theme with ease, we will be importing the dummy data that has been provided by the theme developers and comes with the downloadable files on purchasing the plugin. To import this data we will need the WordPress Importer plugin which is available for free on wordpress.org.

4. Testimonials by WooThemes

If you want a testimonials page you can download and install the Testimonials extension by Woothemes which is also available for free on wordpress.org

Getting Started with the Job Portal

1. Install and Activate the Jobify Theme

The first step towards setting up a job portal on WordPress would be to install and activate the Jobify theme on your WordPress website. The installation process is pretty routine and is similar to that of other WordPress themes.

You can either go through the automatic installation process by uploading the zip folder of the theme from the website dashboard. Alternatively, you can upload the theme from your choice of FTP application. Once you have uploaded the theme it should be activated from the website’s back end by navigating to Appearance -> Themes in the navigation menu.

2. Set Up the WP Job Manager Plugin

Once you have activated the theme the next obvious step would be to install and activate the WP Job Manager plugin. Here again, you either download manually through FTP or automatically from the website dashboard. You will then have to go to the Plugins tab in the admin menu and activate the WP Job Manager plugin.

Now that the plugin has been activated a new tab labeled ‘Job  Listings’ will be created in the admin menu. You will have to navigate to Job  Listings -> Settings to specify various details for the plugin. The settings menu include a tab for ‘Job Listings’, ‘Job Submissions’ and ‘Pages’ and can be customized as per your requirement.

job-manager-for-wordpress-settings
WP Job Manager Settings

3. Import Dummy Data

  • On installing and activating the plugin you can choose to install demo content provided by the theme using the WordPress Importer plugin.
  • While some might like to avoid the unnecessary clutter that comes with dummy content, I would strongly recommend its use as it would help you avoid some unnecessary hassle later. The least recommended import would be that of the jobify.xml file. This file will add job listings, blog posts, testimonials, sample pages, and a few other items. (The most important item being sample pages)
  • To import the dummy content install and activate the WordPress Importer plugin. Now navigate to Tools -> Import -> WordPress in the admin menu and click on WordPress.
job-manager-for-wordpress-import
Import Mock-up Data Provided by Jobify Theme
  • Now choose the jobify.xml file from the ‘XML Dummy Content Folder’ in the theme download folder and click the ‘Upload file and import’.
  • Assign all content that will be imported to an existing user, check the ‘Download and import file attachments’ and click on the ‘Submit’ button.
  • Now your website is equipped with starter pages along with job listings, testimonials, blog posts and comments. You can navigate to each of these options in the back end and delete the content that you do not require.

Note: If you would like to see the testimonial content to import to you will need Testimonials by WooThemes to be installed and activated on your website.

What happens if I do not Import Dummy Data?

If you have skipped importing the demo content to avoid unnecessary clutter then you must try accessing your-website-name/wp-admin link in the incognito mode. In doing so you will notice that login fails and instead some other page is displayed. In my case, the default sample page was displayed. And just so you know the login page is only the start.

You will need to manually create all pages such as login, signup, blog, etc to get started with your website. Following is a list of pages that will have to be manually created.

Pages with Shortcodes

While creating the following pages you will have to add the accompanying shortcode in the page content area.

  • Login: [jobify_login_form]
  • Sign Up: [jobify_register_form]
  • Manage Jobs: [job_dashboard]
  • Post a job: [submit_job_form]

Pages with Templates

While creating the following pages you will have to select the accompanying templates from the ‘Template’ dropdown in the ‘Page Attributes’ widget located on the right-hand side of the page.

  • Find a job page / Jobs (template: maps + jobs)
  • Home (template: Jobify Home)
  • Pricing & Plans  (template: Pricing)
  • Testimonials (template: Testimonials)

Accessory Pages

  • Blog Page
  • Contact Page
  • Privacy Policy
  • Terms & conditions 

4. Create Custom Menus

The theme has been installed, the plugin has been set up, pages have been created and mock-up data has been added. The next step would now be to make this data accessible to website users.

Creating a Navigation Menu

The navigation menu on a website is the topmost menu on any website. To create the navigation menu you will have to go to Appearance -> Menu. You will be able to select a menu to edit from the drop-down list provided. Here you should select the ‘Main Menu (Navigation Menu)’. On selecting the main menu a menu structure will be displayed. Here you can link pages, testimonials, job categories, and job types to the main navigation menu. The option to add these items to the menu is provided in an accordion on the left of the menu structure.

In the ‘Menu Settings’ below the menu structure, you should select the ‘Navigation Menu’ field against the ‘Theme locations’ label. Save the menu structure once you have completed the changes.

Here’s a sneak peek of the navigation menu that I created.

job-manager-for-wordpress-navigation-menu
My Navigation Menu

Note: To display the login and signup page as a modal form add the ‘login’ and ‘register’ classes respectively to the ‘CSS Classes’ field in the menu item. job-manager-for-wordpress-menu-css-class

Creating a Footer Menu

The Jobify theme has restricted the use of the footer menu (the one that is displayed on the right-hand bottom corner) to social media links. It looks something as below.

job-manager-for-wordpress-footer-menu
Footer Menu (Social)

To add your social media profile links in a similar way you will have to once again go to ‘Appearance‘ -> ‘Menus‘ and select the ‘Social Links (Footer Social)’ from the drop-down list.

To add a menu item you will have to go to the ‘Links’ accordion add the link to your social media profile in the ‘URL’ field and any text that you might like to see in the ‘Link Text’ field and add it to the menu structure.

You can add more such items to the menu item.

In the ‘Menu Settings’ below the menu structure, you should select the ‘Footer Social’ field against the ‘Theme locations’ label. Save the menu structure once you have completed the changes.

Add Widgets

Various widgets specific to the WP Job Manager plugin have been provided by the Jobify theme. These widgets can be used on your job portal website at various locations.

Let’s take a look at how to use these widgets provided by the theme.

You will first have to navigate to Appearance? Widgets from the admin menu. Here, on the left-hand side of the page, you will be able to view the available widgets. On the right-hand side are the areas on the website to which you can add the available widgets.

Now it is important to note that some widgets are dependent on additional WP Job Manager add-ons and cannot be used unless the addon has not been installed and activated. The resume related widgets are a good example of widgets dependent on an additional extension.

Now if you want to add a widget to the home page you will have to expand the ‘Homepage Widget Area’ and drag and drop the required widget. On expanding a widget that has been added, parameters provided for that particular widget can also be set.

job-manager-for-wordpress-widget
Search Widget Area in Home Widget Area 

The same procedure can be followed to add widgets to other areas such as ‘Footer Widget Area’.  Here’s how the search widget we added to the ‘Homepage Widget Area’ will look like in the front end. 

job-manager-for-wordpress-widget-front-end
Search Widget on Homepage

 

Theme Options

The theme gives various customization options to style the look and feel of the website. To access these options you will have to navigate to ‘Appearance’ -> ‘Customize’ from the admin menu. Once you click on customize a new window will open. Here’s what it will look like.

job-manager-for-wordpress-customize-theme
Theme Customization Options

Let’s take a look at how you can use the options provided to customize your job portal on WordPress.

General

The general tab provides a checkbox to enable a responsive design.

Jobs

The ‘Jobs’ tab provides an option to control the layout of an individual job listing. The information display area field lets you decide the location of job information on the job listing page. The locations provided by the theme are ‘Sidebar’ & ‘Top’.

If ‘Top’ is selected for the information display area then the number of columns and the column span can also be decided using the ‘Top Widgets Columns’ and ‘Column Span’ fields respectively.

job-manager-for-wordpress-customize-jobs-tab
Job Page Layout Options

Site Title and Tagline

This tab allows you to assign a site title along with a tagline. The site title will be displayed in the left corner of the website header if you check the ‘Display Header Text

job-manager-for-wordpress-customize-sitetitle-tab
Site Title and Tagline Settings

 

This setting can also be controlled from the website back end by navigating to ‘Settings’ -> ‘General’.

Colors

The colors tab provides options to set the header text color (I have set it to #FFFFFF i.e. white), the website background color (again this I have set it to #FFFFFF i.e. white) and the primary color which will be used in various elements on the website. (here, the #d85677 color that I have set has been applied to elements such as the navigation menu).

Header Image

This tab can be used if you want to display a logo or image along with your site title. The suggested dimensions of this image are 200*44 pixels (width*height). 

job-manager-for-wordpress-header-image
Example of Header Image on Website

This setting can also be controlled from the website back end by navigating to ‘Appearance’ -> ‘Header’.

Background Image

This tab can be used if you want to display an image in the background of your job portal in WordPress. This setting can also be controlled from the website back end by navigating to ‘Appearance’ -> ‘Background’.

Navigation

Want to assign a menu you have created to the navigation of your website? You can do so using the navigation tab. The main menu will be set on selecting a menu from the ‘Navigation Menu’ drop-down list.

The menu on the right corner on the bottom of the page will be set by selecting a menu from the ‘Footer Social’ drop-down list.

job-manager-for-wordpress-customize-navigation-tab
Navigation Menu Settings

This setting can also be controlled from the website back end by navigating to ‘Appearance’? ‘Menus’.

Widgets

The widgets tab gives you an option to add widgets to various widgets areas on your job portal website. It is similar to the option provided at the website back end. (Refer to the ‘Add Widgets’ section explained earlier.

Static Front Page

Use this option to set the home page and blog page for your website. While this option too can be accessed from the back end by navigating to ‘Settings’ -> ‘Reading’ the good part of having it here is that you can make all the changes at once and then save them together, instead of having to go to the individual settings pages.

Call to Action

This last option provides in the theme customization options is indeed very useful! It allows you to add a call to action message on every page across the website. It is an optional element and if you choose to have it you will also need to provide some call to action text, text color and background color for that section of the page.

job-manager-for-wordpress-customize-cta-tab
Call to Action Section Settings

The default settings will be displayed if you do not make any changes. Here’s how my call to action section looks like 🙂

job-manager-for-wordpress-customize-cta
Call to Action Displayed on All Pages

Start Listing Jobs

Phew! We have finally set up the theme. Now we can start adding job listings to the website.

But before that, if you want to get rid of the dummy data we imported earlier, now would be a good time to do it easily. Go to ‘Job Listings’ -> ‘All Jobs’ check the checkbox next to the type column and apply the changes by selecting the ‘Move to Trash’ option from the ‘Bulk Actions’ drop-down list.

To add a job listing you will have to go to ‘Job Listings’ -> ‘Add New

Once on this page, you will have to add the job listing title and job description. Along with that, you can add additional details using the jobs meta box provided lower on the page. The fields provided in this field are self-descriptive so I’m going to skip explanation on that part. Yet, if you have a doubt, scroll to the end of the page to the comments section.

Apart from that, you can assign a job type and a job category to the particular listing using the meta boxes provided at the right-hand side of the page. Can’t find a job type or category that you need? There’s an option to add a new one right there!

job-manager-for-wordpress-job-category-types
Job Category and Job Type Meta boxes

The custom fields meta box can be used to define additional fields like address, city, state, etc for the job listings.

job-manager-for-wordpress-custom-fields
Custom Fields Meta box on Job Page

Can I Use the Visual Composer Plugin?

Well, the theme does not support any page builders. But, if you absolutely do need to use a form builder like visual composer you must know that the form builder elements cannot be used along with widgets on the same page. So, if that is what you are hoping then it’s not happening 🙁

Supercharge Your Job Portal on WordPress

If you’re on a budget but would like to still add a bit of functionality then you must take a look at the free extensions available on the WP Job Manager website. My favorites there are

  • WP All Import Integration – An extension that allows users to import job listings from any CSV or XML file to WP Job Manager
  • Company Profiles – An extension that provides a list of companies that have submitted a listing on the job listing website.
  • Restrict Content Pro Integration – An extension that allows users to restrict job applications based on subscriptions.

However, if you’re willing to spend a little then the two must have extensions for WP Job Manager are

  • WC Paid Listings – An extension that will allow you to charge employers to list jobs on your website.
  • Resume Manager – An extension that provides job seekers with a resume submission form on the front end. Also, admin can manage the resumes and job submissions from the back end.

So, that was about setting up a job portal on WordPress using the Jobify theme and the WP Job Manager plugin. It’s a lot of information, I agree! It’s will take you some time to stomach all of it and get your way around the system. However, though, follow my steps and you should be pretty much sorted. And obviously, if you have any doubt, I’m right here to solve your doubts. Just type away in the comments section 🙂

That’s all from my end. I’m planning another guide for the time being.

Until the next post, Adios 🙂

[space]

Tahseen Kazi

Tahseen Kazi

3 Responses

  1. I’ve spent 4 or 5 days trying to figure out how to add the modal login and signup. You finally provided the answer – thank you! However, my Signup button opens a Login window. Any help please? Also, is there a way to charge members to join, but keep job listings free? Thanks

  2. hi there,

    i have done everything and still unable to change the menu color from dark grey to blue. Can u please check and see whats the reason

  3. Hello,
    I wanted to check if there are any Rest APIs for WP job manager. I want to perform some functionality using mobile. So need the web services for the wp job manager.
    Or If you guys can suggest any suitable third party plugin which does this.

    Thank you so much in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads