Jobs listing Demosite

Live Demo and Testing Environment

đź“ť Note: You can view a live, working version of the jobs listing demo explained below by visiting this page. This demo showcases a functional job listing site built with the MPG plugin.

If you'd like to test how this setup looks and works directly from the WordPress dashboard with MPG already installed and configured, you can spin up a live version of WordPress. This version will be available for 4 hours and allows you to explore the setup in detail. You can access the live demo environment by clicking here.

đź“ť Note: The InstaWP environment will allow you to interact with the MPG plugin and view how it is configured within WordPress, providing hands-on experience with the project setup.

Step-by-Step Guide for Jobs Listing Setup

This guide will walk you through how to set up a job listing website using the MPG plugin. You will learn how to configure your project, generate pages dynamically, and customize job listings based on specific criteria (e.g., salary, experience, etc.).

1
Navigate to MPG > Create New and create a new project.

Here is how the MPG project setup looks, with important fields you need to configure:

2
Select source: Set Source Type to Direct Link. Provide the Direct link to your Google Sheet or file containing the job data.
Here is the spreadsheet used in this project: Job Listings Source File. Make sure to click Share in Google Sheets and use the link ending in ? usp=sharing.
3
Project Settings: Set Entity Type to "Pages" and choose your Template. The template is for the individual job listings, which will be explained further below.
4
Generate URLs: Set URL Format Template using shortcodes like {{mpg_job_title}} and {{mpg_company_name}} to create dynamic URLs, such as `/job-title-company-name/`. These URLs will be used for individual job listing pages.

Homepage Setup

Here’s the HTML code snippet for setting up the homepage to showcase job listings: 

<section style="padding: 50px 20px; background-color: #f9f9f9;">
  <div style="max-width: 1200px; margin: 0 auto; text-align: center;">
    <h1 style="font-size: 48px; font-weight: bold;">Explore Our Latest Job Listings</h1>
    <p style="font-size: 20px; margin-bottom: 40px;">Find your perfect job filtered by job type, salary range, experience level, and more.</p>
    <!-- High-Paying Jobs Section -->
    <h2 style="font-size: 36px; margin-top: 50px; margin-bottom: 20px;">High-Paying Jobs</h2>
    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
      [mpg project-id="2" where="mpg_salary_usd>90000" order-by="mpg_salary_usd" direction="desc" limit="9"]
      <div style="background-color: #fff; width: 300px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 20px;">
        <a href="{{mpg_url}}" style="text-decoration: none; color: inherit;">
          <img src="{{mpg_image_url}}" alt="{{mpg_company_name}}" style="width: 100%; height: 150px; object-fit: cover;">
          <div style="padding: 15px;">
            <h3 style="font-size: 24px; font-weight: bold;">{{mpg_job_title}}</h3>
            <p style="font-size: 18px; color: #555;">{{mpg_company_name}} - {{mpg_location}}</p>
            <p style="font-size: 20px; font-weight: bold; color: #27ae60;">Salary: ${{mpg_salary_usd}} per year</p>
            <p style="font-size: 16px; color: #888;">{{mpg_required_experience_years}} years of experience required</p>
          </div>
        </a>
      </div>
      [/mpg]
    </div>

    <!-- Recently Posted Jobs Section -->
    <h2 style="font-size: 36px; margin-top: 50px; margin-bottom: 20px;">Recently Posted Jobs</h2>
    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
      [mpg project-id="2" order-by="mpg_posted_date" direction="desc" limit="9"]
      <div style="background-color: #fff; width: 300px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 20px;">
        <a href="{{mpg_url}}" style="text-decoration: none; color: inherit;">
          <img src="{{mpg_image_url}}" alt="{{mpg_company_name}}" style="width: 100%; height: 150px; object-fit: cover;">
          <div style="padding: 15px;">
            <h3 style="font-size: 24px; font-weight: bold;">{{mpg_job_title}}</h3>
            <p style="font-size: 18px; color: #555;">{{mpg_company_name}} - {{mpg_location}}</p>
            <p style="font-size: 20px; font-weight: bold; color: #27ae60;">Salary: ${{mpg_salary_usd}} per year</p>
            <p style="font-size: 20px; font-weight: bold; color: #27ae60;">Posted on: {{mpg_posted_date}}</p>
            <p style="font-size: 16px; color: #888;">{{mpg_required_experience_years}} years of experience required</p>
          </div>
        </a>
      </div>
      [/mpg]
    </div>

    <!-- Jobs for Experienced Professionals Section -->
    <h2 style="font-size: 36px; margin-top: 50px; margin-bottom: 20px;">Jobs for Experienced Professionals</h2>
    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
      [mpg project-id="2" where="mpg_required_experience_years>=5" limit="9"]
      <div style="background-color: #fff; width: 300px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 20px;">
        <a href="{{mpg_url}}" style="text-decoration: none; color: inherit;">
          <img src="{{mpg_image_url}}" alt="{{mpg_company_name}}" style="width: 100%; height: 150px; object-fit: cover;">
          <div style="padding: 15px;">
            <h3 style="font-size: 24px; font-weight: bold;">{{mpg_job_title}}</h3>
            <p style="font-size: 18px; color: #555;">{{mpg_company_name}} - {{mpg_location}}</p>
            <p style="font-size: 20px; font-weight: bold; color: #27ae60;">Salary: ${{mpg_salary_usd}} per year</p>
            <p style="font-size: 16px; color: #888;">{{mpg_required_experience_years}} years of experience required</p>
          </div>
        </a>
      </div>
      [/mpg]
    </div>
  </div>
</section>

<!-- Freelance or Contract Jobs with 1+ Years of Experience Section -->
<h2 style="font-size: 36px; margin-top: 50px; margin-bottom: 20px;text-align:center;">Freelance Jobs requiring 3 or more Years of Experience</h2>
<div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
  [mpg project-id="2" where="mpg_required_experience_years>3;mpg_job_type=Freelance;" logic="all" limit="9"]
  <div style="background-color: #fff; width: 300px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 20px;">
    <a href="{{mpg_url}}" style="text-decoration: none; color: inherit;">
      <img src="{{mpg_image_url}}" alt="{{mpg_company_name}}" style="width: 100%; height: 150px; object-fit: cover;">
      <div style="padding: 15px;">
        <h3 style="font-size: 24px; font-weight: bold;">{{mpg_job_title}}</h3>
        <p style="font-size: 18px; color: #555;">{{mpg_company_name}} - {{mpg_location}}</p>
        <p style="font-size: 20px; font-weight: bold; color: #27ae60;">Salary: ${{mpg_salary_usd}} per year</p>
        <p style="font-size: 16px; color: #888;">{{mpg_required_experience_years}} years of experience required</p>
      </div>
    </a>
  </div>
  [/mpg]
</div><br>

MPG Shortcodes Explained for Homepage

Below are the shortcodes used in the homepage template and how they work:

[mpg project-id="2" where="mpg_salary_usd>90000" order-by="mpg_salary_usd" direction="desc" limit="9"]
This shortcode generates a list of up to 9 jobs where the salary is greater than $90,000. The results are ordered by salary in descending order, meaning that the highest paying jobs will be displayed first. This is used to showcase high-paying jobs on the homepage.
[mpg project-id="2" order-by="mpg_posted_date" direction="desc" limit="9"]
This shortcode generates a list of up to 9 recently posted jobs. The jobs are ordered by their posted date in descending order, meaning the most recent jobs will be displayed first. This is ideal for displaying fresh job listings on the homepage.
[mpg project-id="2" where="mpg_required_experience_years>=5" limit="9"]
This shortcode generates a list of up to 9 jobs that require at least 5 years of experience. It filters the jobs based on the “required experience years” field, showing only jobs for experienced professionals. This is used to target experienced job seekers on the homepage.
[mpg project-id="2" where="mpg_required_experience_years>3;mpg_job_type=Freelance;" logic="all" limit="9"]
This shortcode generates a list of up to 9 freelance jobs that require more than 3 years of experience. The `logic="all"` parameter ensures that both conditions must be true (i.e., the job must be freelance and require more than 3 years of experience). This is used to display freelance or contract jobs for experienced professionals.

Dynamic Page Template Setup

Below is the main template used for each dynamically generated job details page: 

 <section style="padding: 40px 20px; background-color: #f4f4f4;">
  <div style="max-width: 1200px; margin: 0 auto; background-color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden;">


    <!-- Job Image -->
    <div style="width: 100%; height: 300px; background-color: #eaeaea; position: relative;">
      <img src="{{mpg_image_url}}" alt="{{mpg_job_title}}" style="width: 100%; height: 100%; object-fit: cover;">
    </div>


    <!-- Job Header -->
    <div style="padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; background-color: #f9f9f9; border-bottom: 1px solid #ddd;">
      <div>
        <h1 style="font-size: 28px; font-weight: bold; color: #2c3e50;">{{mpg_job_title}}</h1>
        <p style="font-size: 18px; color: #555;">{{mpg_company_name}} - {{mpg_location}}</p>
      </div>
      <div>
        <p style="font-size: 16px; color: #888;">Posted on: {{mpg_posted_date}}</p>
      </div>
    </div>


    <!-- Job Details -->
    <div style="padding: 20px 30px;">
      <div style="display: flex; justify-content: space-between; gap: 20px;">
        <div style="flex: 1;">
          <p style="font-size: 16px; color: #555;">Location: <strong>{{mpg_location}}</strong></p>
          <p style="font-size: 16px; color: #555;">Salary: <strong>{{mpg_salary_usd}} USD</strong></p>
        </div>
        <div style="flex: 1;">
          <p style="font-size: 16px; color: #555;">Experience Required: <strong>{{mpg_required_experience_years}} years</strong></p>
          <p style="font-size: 16px; color: #555;">Job Type: <strong>{{mpg_job_type}}</strong></p>
        </div>
      </div>
    </div>


    <!-- Job Description -->
    <div style="padding: 20px 30px;">
      <h2 style="font-size: 22px; color: #0073b1;">Job Description</h2>
      <p style="font-size: 16px; color: #333; line-height: 1.6;">{{mpg_job_description}}</p>
    </div>


    <!-- Company Details -->
    <div style="padding: 20px 30px; background-color: #f0f4f7;">
      <h3 style="font-size: 20px; color: #0073b1;">About {{mpg_company_name}}</h3>
      <p style="font-size: 16px; color: #555;">{{mpg_company_description}}</p>
    </div>


    <!-- Apply Button -->
    <div style="text-align: center; padding: 30px;">
      <a href="" style="text-decoration: none; background-color: #0073b1; color: white; padding: 15px 30px; font-size: 18px; border-radius: 5px; font-weight: bold;">Apply Now</a>
    </div>


  </div>
</section>


<section style="padding: 40px 20px; background-color: #f9f9f9;">
  <div style="max-width: 1200px; margin: 0 auto;">
    <h2 style="font-size: 32px; font-weight: bold; color: #333; text-align: center; margin-bottom: 30px;">Other offers for {{mpg_job_title}} position</h2>


    <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
      [mpg project-id="2" limit="3" where="mpg_job_title={{mpg_job_title}};"]
        <div style="background-color: white; width: 100%; max-width: 300px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease;">
          
          <!-- Job Image -->
          <div style="width: 100%; height: 150px; background-color: #eaeaea; position: relative;">
            <img src="{{mpg_image_url}}" alt="{{mpg_job_title}}" style="width: 100%; height: 100%; object-fit: cover;">
          </div>


          <!-- Job Details -->
          <div style="padding: 20px;">
            <h3 style="font-size: 20px; font-weight: bold; color: #2c3e50; margin-bottom: 10px;">{{mpg_job_title}}</h3>
            <p style="font-size: 16px; color: #555; margin-bottom: 5px;">{{mpg_company_name}}</p>
            <p style="font-size: 14px; color: #999; margin-bottom: 15px;">Location: {{mpg_location}}</p>
            <p style="font-size: 14px; color: #555; margin-bottom: 10px;">Experience: {{mpg_required_experience_years}} years</p>
            <p style="font-size: 14px; color: #555;">Posted on: {{mpg_posted_date}}</p>
          </div>


          <!-- Apply Button -->
          <div style="text-align: center; padding: 10px;margin-bottom: 20px;">
            <a href="{{mpg_url}}" style="background-color: #0073b1; color: white; padding: 10px 20px; font-size: 14px; border-radius: 5px; text-decoration: none;">Check Now</a>
          </div>
        </div>
      [/mpg]
    </div>
  </div>
</section>


<section style="padding: 40px 20px; background-color: #f9f9f9;">
  <div style="max-width: 1200px; margin: 0 auto;">
    <h2 style="font-size: 32px; font-weight: bold; color: #333; text-align: center; margin-bottom: 30px;">Other offers in {{mpg_location}}</h2>


    <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
      [mpg project-id="2" limit="3" where="mpg_location={{mpg_location}};"]
        <div style="background-color: white; width: 100%; max-width: 300px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease;">
          
          <!-- Job Image -->
          <div style="width: 100%; height: 150px; background-color: #eaeaea; position: relative;">
            <img src="{{mpg_image_url}}" alt="{{mpg_job_title}}" style="width: 100%; height: 100%; object-fit: cover;">
          </div>


          <!-- Job Details -->
          <div style="padding: 20px;">
            <h3 style="font-size: 20px; font-weight: bold; color: #2c3e50; margin-bottom: 10px;">{{mpg_job_title}}</h3>
            <p style="font-size: 16px; color: #555; margin-bottom: 5px;">{{mpg_company_name}}</p>
            <p style="font-size: 14px; color: #999; margin-bottom: 15px;">Location: {{mpg_location}}</p>
            <p style="font-size: 14px; color: #555; margin-bottom: 10px;">Experience: {{mpg_required_experience_years}} years</p>
            <p style="font-size: 14px; color: #555;">Posted on: {{mpg_posted_date}}</p>
          </div>


          <!-- Apply Button -->
          <div style="text-align: center; padding: 10px;margin-bottom: 20px;">
            <a href="{{mpg_url}}" style="background-color: #0073b1; color: white; padding: 10px 20px; font-size: 14px; border-radius: 5px; text-decoration: none;">Check Now</a>
          </div>
        </div>
      [/mpg]
    </div>
  </div>
</section>


<div style="border: 2px solid #f1c40f; padding: 20px; background-color: #fef5e7; border-radius: 10px; margin: 20px 0;">
  <p style="font-size: 16px; color: #333;">
[mpg_spintax  project_id="2" block_id="517"]<p>{The listings on this page|The job listings displayed here|What you see above} are <b>automatically generated</b> {using MPG shortcodes|through the power of MPG shortcodes}. Shortcodes {allow|enable} you to {pull data from|connect to} <b>a source file, like a spreadsheet</b>, and {render it into your website effortlessly|publish it dynamically on your site}. <br><br>{Here’s an example of a shortcode that can be used to generate listings:|For instance, take a look at this shortcode generating the job entries by salary:} <br><code>[mpg project-id="1" where="mpg_salary_usd>50000" limit="9"]</code>.<br><br><b>This method</b> {saves you hours of manual work|automates what would normally take hours} by <b>instantly creating dynamic content</b>, {allowing you to focus on other things|so you can focus on higher priorities}. {By changing the filters within the shortcode|Simply by tweaking the shortcode}, {you can adjust|you control} <b>what content appears on your site</b>. <br><br>{MPG shortcodes are even more powerful|What’s more, MPG shortcodes are} {thanks to|enhanced by} <b>Spintax support</b>. {This allows you to create different versions of the same content|With Spintax, you can generate variations of the same page content}, {making it more engaging|keeping your audience interested}. <br><br>{For example, the text you are reading right now uses Spintax|In fact, this very text is powered by Spintax!}. <b>You can refresh this page to see how it changes</b>, {yet caching ensures load speed and performance|with optional caching to boost performance}.<br><br><b>But MPG isn’t just for job listings</b>. {Beyond job listings, MPG can handle other content too}. {You can use it for|It's perfect for} <b>real estate listings, hotel directories</b>, or even <b>multi-location landing pages</b>. {This makes MPG a perfect tool|The versatility of MPG is what makes it truly powerful}, {whether you’re managing thousands of pages|whether you're an agency managing thousands of listings} or {just a few key pages for local SEO|a business owner expanding your reach online}.</p>[/mpg_spintax]
</p>
</div>

MPG Shortcodes Explained for Dynamic Page Template

Here are the key shortcodes used within the dynamic page template:

  • {{mpg_job_title}} Displays the job title for the current listing.
  • {{mpg_company_name}} Shows the company name for the job listing.
  • {{mpg_location}} Displays the job location, such as a city or region.
  • {{mpg_salary_usd}} Shows the salary for the job in USD.
  • {{mpg_required_experience_years}} Displays the number of years of experience required for the job.
  • {{mpg_job_type}} Shows the job type, such as full-time, part-time, or freelance.
  • {{mpg_posted_date}} Displays the date when the job was posted.
  • {{mpg_image_url}} Shows the image associated with the job, such as a company logo or job-related visual.
  • {{mpg_job_description}} Provides the detailed job description for the listing.
  • {{mpg_company_description}} Shows the description of the company, providing more context about the employer.
  • {{mpg_url}} Generates the link for the job application page or company career site.
  • [mpg project-id="2" limit="3" where="mpg_job_title={{mpg_job_title}};] Generates a list of three additional job listings that match the current job title. For example, if the page is showing a "Software Engineer" job, this shortcode will display three other "Software Engineer" jobs in the same project dataset
  • [mpg project-id="2" limit="3" where="mpg_location={{mpg_location}};]Generates a list of three job listings located in the same city or region as the current job. For instance, if the job is based in "New York," this shortcode will display three other jobs located in New York

MPG Spintax Explained

Spintax shortcodes are used to generate varied content dynamically, improving SEO. Here’s an example and explanation: 

[mpg_spintax  project_id="2" block_id="517"]<p>{The listings on this page|The job listings displayed here|What you see above} are <b>automatically generated</b> {using MPG shortcodes|through the power of MPG shortcodes}. Shortcodes {allow|enable} you to {pull data from|connect to} <b>a source file, like a spreadsheet</b>, and {render it into your website effortlessly|publish it dynamically on your site}. <br><br>{Here’s an example of a shortcode that can be used to generate listings:|For instance, take a look at this shortcode generating the job entries by salary:} <br><code>[mpg project-id="1" where="mpg_salary_usd>50000" limit="9"]</code>.<br><br><b>This method</b> {saves you hours of manual work|automates what would normally take hours} by <b>instantly creating dynamic content</b>, {allowing you to focus on other things|so you can focus on higher priorities}. {By changing the filters within the shortcode|Simply by tweaking the shortcode}, {you can adjust|you control} <b>what content appears on your site</b>. <br><br>{MPG shortcodes are even more powerful|What’s more, MPG shortcodes are} {thanks to|enhanced by} <b>Spintax support</b>. {This allows you to create different versions of the same content|With Spintax, you can generate variations of the same page content}, {making it more engaging|keeping your audience interested}. <br><br>{For example, the text you are reading right now uses Spintax|In fact, this very text is powered by Spintax!}. <b>You can refresh this page to see how it changes</b>, {yet caching ensures load speed and performance|with optional caching to boost performance}.<br><br><b>But MPG isn’t just for job listings</b>. {Beyond job listings, MPG can handle other content too}. {You can use it for|It's perfect for} <b>real estate listings, hotel directories</b>, or even <b>multi-location landing pages</b>. {This makes MPG a perfect tool|The versatility of MPG is what makes it truly powerful}, {whether you’re managing thousands of pages|whether you're an agency managing thousands of listings} or {just a few key pages for local SEO|a business owner expanding your reach online}.</p>[/mpg_spintax]<br>

Explanation

This Spintax code dynamically rotates phrases and words to create variety in the generated content. Here's how it works (a few examples of the Spintax to better understand the flow):

  • {The listings on this page|The job listings displayed here|What you see above}
    Rotates between phrases to introduce the listings on the page.
  • {using MPG shortcodes|through the power of MPG shortcodes}
    Rotates between different ways to explain how the listings are generated using MPG.
  • {saves you hours of manual work|automates what would normally take hours}
    Rotates between phrases explaining the time-saving benefits of using MPG shortcodes.
  • {just a few key pages for local SEO|a business owner expanding your reach online}
    Rotates between phrases highlighting MPG’s usefulness for smaller projects or local SEO.

The Spintax structure helps generate unique content for each page, improving SEO and providing a more engaging user experience.

đź“ť Note: Make sure to check your project's project-id and replace it in the shortcodes accordingly.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us