ACF Property Theme Setup
August 7, 2025 · AI Conversations
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)
—
### ✅ 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.