How to Create a Car Listing Website Using Elementor & Custom Fields

Creating a car listing website can be a powerful way to showcase different vehicles and their specifications. In this tutorial, I’ll guide you through the steps to create a dynamic car listing website using WordPress, Elementor Pro, and Advanced Custom Fields (ACF).

Step 1: Setting Up WordPress and Plugins

First, ensure you have WordPress installed with the Elementor Pro and ACF plugin activated. Elementor Pro offers advanced features like loop items and custom queries, which are essential for a dynamic listing site.

• Install Elementor Pro: You’ll need the pro version for its advanced features.
• Install ACF Plugin: This plugin allows you to add custom fields to your WordPress content.

Step 2: Creating Custom Post Types

Navigate to your WordPress dashboard and create a custom post type for your listings:

• Go to “Post Types” and click “Add Post Type.”
• Label it appropriately (e.g., Cars) and adjust settings to omit unnecessary features like editor support and featured images, as these are not needed for this setup.

Step 3: Adding Custom Fields

With your post type ready, add custom fields that will hold the car’s details:

• Navigate to “Field Groups” in the ACF settings and create a new group named “Car Specs.”
• Add fields such as Brand, Model, Price, Engine Type, Transmission (manual or automatic), and Fuel Type (petrol, diesel, hybrid).

Step 4: Building the Website Structure

Now, use Elementor to build your website’s structure including headers, footers, and templates for the car listings:

• Create the Header and Footer: Use Elementor’s Theme Builder to craft these elements. Keep the design clean and responsive for mobile devices.
• Design a Single Post Template: This template will display individual car details. Use Elementor to add dynamic tags that pull data from your ACF fields, ensuring that each car’s data is displayed properly.

Step 5: Displaying Cars Dynamically

To make your listings dynamic, such that similar cars are shown on each page:

• Use Elementor’s Loop Item feature to create templates for displaying car variants or similar models.
• Set up custom queries using Elementor’s Query ID system to fetch cars based on specific criteria like brand or fuel type.

Step 6: Finalizing and Testing

Before going live, make sure to test all elements of your site:

• Add several car entries to test the dynamic features and ensure that all data displays correctly.
• Test responsiveness on different devices to ensure the site is user-friendly on mobiles, tablets, and desktops.
• Adjust fonts, colors, and layout elements using Elementor’s responsive mode settings.

Here is the complete tutorial –

Here are all the custom queries that I used in the tutorial.

Query to display variants

add_action( 'elementor/query/posts_same_model', function( $query ) {
    // Get the global post object
    global $post;
    
    // Retrieve the current post's brand custom field value
    $current_brand = get_post_meta($post->ID, 'model', true);

    // Check if the current post has a brand value set
    if (!empty($current_brand)) {
        // Define the meta query for the custom field
        $meta_query = array(
            array(
                'key'     => 'model',       // The name of the custom field
                'value'   => $current_brand, // The brand of the current post
                'compare' => '=',           // Comparison operator
            )
        );

        // Set the meta query to the current query
        $query->set( 'meta_query', $meta_query );
		$query->set( 'post__not_in', array( $post->ID ) );
    }
});

Query to display cars of same brand

add_action( 'elementor/query/same_brand', function( $query ) {
    global $post;

    // Get current post's custom field values
    $current_brand = get_post_meta($post->ID, 'brand', true);
    $current_model = get_post_meta($post->ID, 'model', true);

    // Meta query to match the brand and exclude the current model
    $meta_query = array(
        'relation' => 'AND',
        array(
            'key'     => 'brand',
            'value'   => $current_brand,
            'compare' => '='
        ),
        array(
            'key'     => 'model',
            'value'   => $current_model,
            'compare' => '!=',
        )
    );

    $query->set( 'meta_query', $meta_query );
});

Query to display cars of same fuel type

add_action( 'elementor/query/same_fuel', function( $query ) {
    global $post;

    // Get current post's custom field values
    $current_fuel = get_post_meta($post->ID, 'fuel_type', true);
    $current_model = get_post_meta($post->ID, 'model', true);

    // Meta query to match the fuel type and exclude the current model
    $meta_query = array(
        'relation' => 'AND',
        array(
            'key'     => 'fuel_type',
            'value'   => $current_fuel,
            'compare' => '='
        ),
        array(
            'key'     => 'model',
            'value'   => $current_model,
            'compare' => '!=',
        )
    );

    $query->set( 'meta_query', $meta_query );
});

You can replace the “fuel_type” with any custom field name to filter posts.

PHP code to add commas to prices

add_filter('acf/format_value/name=price', 'fix_number', 20, 3);
function fix_number($value, $post_id, $field) {
  $value = number_format($value);
  return $value;
}

Query to display cars of Maruti brand

add_action('elementor/query/maruti', function ($query) {
    // Meta query to filter posts where 'brand' is 'Maruti'
    $meta_query = array(
        array(
            'key'     => 'brand',
            'value'   => 'Maruti',
            'compare' => '='
        )
    );

    $query->set('meta_query', $meta_query);
});

You can replace the “key” and “value” with any custom field to filter posts.

Conclusion

By following these steps, you can create a dynamic and visually appealing car listing website using Elementor Pro and Advanced Custom Fields. In the same way, you can now create any type of dynamic websites of your choice.