August 10, 2023

Advanced Custom Fields & Elementor Job Listings Walkthrough

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

In this Walkthrough we’ll explore the integration of Advanced Custom Fields & Elementor together with WPTuts. These two tools allow you to create dynamic content that can be tailored to your specific needs and create fantastic websites. In this example, we will use them to create a job listings archive and the single page for it. So let’s have a look.

Setting Up Advanced Custom Fields (ACF)

  1. Install ACF Plugin
    Navigate to the WordPress dashboard, go to Plugins > Add New, and search for “Advanced Custom Fields.” Install and activate the plugin.
  2. Create Custom Fields
    Go to Custom Fields > Add New. Here, you can create a field group and add fields like text, dropdown, etc. You can define the field name, type, and other attributes.Example:

    Field Name Type Example
    Salary Text $50,000
    Location Text New York
    Job Type Dropdown Full-Time
  3. Assign Field Group to Post Type
    Choose where the field group will appear, such as posts, pages, or custom post types.

Integrating ACF & Elementor – Archive Page

  1. Create a Loop Grid in Elementor
    Open Elementor and add a new section. Choose the “Posts” widget and set the source to your desired post type.
  2. Build a Template for the Loop
    Customize the loop by adding elements like featured image, post title, and post excerpt. You can adjust the layout, columns, and style.
  3. Insert ACF Fields
    Click on the dynamic tags icon and choose the ACF field you want to insert. You can add custom fields like salary and location.
  4. Style the Loop
    Use Elementor’s styling options to adjust typography, color, spacing, and more.
  5. Set Up Pagination
    Enable pagination in the widget settings and choose the pagination type.
  6. Publish the Archive Template
    Click “Publish” and set the conditions for where this template will be used, such as all posts of a specific type.

Building Single Post Pages with Elementor & ACF

  1. Create a Template for Individual Job Posts
    In Elementor, create a new single post template.
  2. Add Elements
    Use Elementor’s widgets to add featured image, post title, post content, and post info.
  3. Insert ACF Data
    Click on the dynamic tags icon and choose the ACF field to insert custom data like salary and location.
  4. Add a Button for PDF Application Form
    Use the Button widget and set the link to the ACF field containing the PDF URL.
  5. Style and Publish
    Customize the appearance using Elementor’s styling options and publish the template.

Viewing the Final Result

Navigate to the front end of your website to see the newly created content. The archive page displays the posts with ACF data, and individual job posts show the custom layout with ACF fields.

Conclusion of Advanced Custom Fields & Elementor

Integrating Advanced Custom Fields with Elementor provides a powerful way to create personalized and dynamic content. By following the detailed steps above, you can transform your website’s appearance and functionality. The possibilities are endless, so start exploring and see what you can create!

Required Resources

Elementor Logo
Free Options
Credit to WPTuts
WPTuts is a popular YouTube channel dedicated to providing high-quality, easy-to-follow tutorials for WordPress enthusiasts, web designers, and developers. The channel features a wide range of topics, from beginner guides on setting up your first WordPress site to advanced tutorials on customizing themes and plugins, ensuring that there's something for everyone
Advanced Custom Fields & Elementor Job Listings Walkthrough
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.