ACF Property Theme Setup

User
Practical Details:
Figma URL: https://www.figma.com/design/Hg0LXFtV4kfDLDFQJxIXaO/Practical-5?node-id=0-9&m=dev


• Header/Footer Create Theme Options using ACF
• Create custom post type and taxonomy for Properties.
• Use Ajax load more functionality for load more button under property list. Make sure to load 6 properties on load more on each properties
• Code must be responsive.
• Use the Flexible Fields / AFC Blocks. Make sure any section can be moved up or down from backend.
• Make sure when user click on tab title it will show results from ajax and when clicks on load more button it will show active tab category related items.
• Use starter theme(underscores.me).
• Use SASS or LESS (Not compulsory but it will considered as plus point)

Assistant
User is building a WordPress theme using Underscores with ACF Theme Options, CPT for Properties, AJAX-based Load More and Tabs, and flexible sections with ACF Blocks.
Assistant
Here’s a practical checklist to implement the Figma design using the specified tools and requirements:

### ✅ Setup:
– **Base Theme**: Use [Underscores](https://underscores.me/) starter theme.
– **Tools**:
– Install and configure **ACF Pro** (for theme options and flexible content).
– Install **Custom Post Type UI** (optional) or register CPT manually.
– Use **SASS** for styling (recommended: setup with Gulp or npm/yarn).

### 🧩 Theme Options with ACF
Create an options page:

if (function_exists('acf_add_options_page')) {
    acf_add_options_page([
        'page_title' => 'Theme Settings',
        'menu_title' => 'Theme Settings',
        'menu_slug'  => 'theme-settings',
        'capability' => 'edit_posts',
        'redirect'   => false
    ]);
}

Fields:
– Header: Logo, Navigation
– Footer: Text, Social Links, Menus

### 🏠 Custom Post Type: `Property`

function register_property_cpt() {
    register_post_type('property', [
        'label' => 'Properties',
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
        'rewrite' => ['slug' => 'properties'],
        'show_in_rest' => true,
    ]);
}
add_action('init', 'register_property_cpt');

### 🏷️ Custom Taxonomy: `Property Type`

function register_property_taxonomy() {
    register_taxonomy('property_type', 'property', [
        'label' => 'Property Type',
        'hierarchical' => true,
        'rewrite' => ['slug' => 'property-type'],
        'show_in_rest' => true,
    ]);
}
add_action('init', 'register_property_taxonomy');

### 📦 ACF Flexible Content Blocks
– Use `flexible_content` fields (ACF) to allow admin to reorder sections.
– Example blocks:
– Hero
– Featured Properties
– Testimonials
– Call to Action

Each block should include a `get_template_part('template-parts/flexible/block-name')`.

### 🔄 AJAX Tabs & Load More
1. **Initial Load**: Show 6 posts of the default tab.
2. **Tab Click (AJAX)**: Filter by `property_type`.
3. **Load More (AJAX)**: Fetch 6 more items within the active taxonomy.

Register scripts:

wp_enqueue_script('property-ajax', get_template_directory_uri() . '/assets/js/property-ajax.js', ['jquery'], null, true);
wp_localize_script('property-ajax', 'property_ajax_obj', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce'    => wp_create_nonce('property_ajax_nonce'),
]);

In JS, send tab & page data. In PHP:

add_action('wp_ajax_load_properties', 'load_properties_ajax');
add_action('wp_ajax_nopriv_load_properties', 'load_properties_ajax');

function load_properties_ajax() {
    check_ajax_referer('property_ajax_nonce', 'nonce');

    $paged = $_POST['page'] ?? 1;
    $tax_query = [];

    if (!empty($_POST['property_type'])) {
        $tax_query[] = [
            'taxonomy' => 'property_type',
            'field' => 'slug',
            'terms' => sanitize_text_field($_POST['property_type']),
        ];
    }

    $query = new WP_Query([
        'post_type' => 'property',
        'posts_per_page' => 6,
        'paged' => $paged,
        'tax_query' => $tax_query,
    ]);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            get_template_part('template-parts/property-card');
        }
    }

    wp_die();
}

### ✅ Responsive Design
– Mobile-first via SASS: setup breakpoints and use variables/mixins.
– Ensure all layouts adapt well using CSS grid/flex.

Would you like me to generate:
1. A basic `SASS` setup structure?
2. Sample `property-ajax.js` logic?
3. Flexible content structure sample in ACF export JSON?

Let me know and I’ll include them.

Leave a Comment

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