Free WordPress Property Listings Theme Built with Claude AI

What Is the QT Property Listings Theme?

QT Property Listings v1.0 is a custom WordPress theme built specifically for real estate agents, property developers, and rental businesses. Unlike off-the-shelf themes from ThemeForest or Envato, this theme was generated entirely through conversations with Claude AI — Anthropic’s large language model — with no third-party page builders, no premium plugins, and no pre-existing theme frameworks.

A Purpose-Built Real Estate Theme

The theme registers a custom post type called “property” with an archive at the URL slug “listing”. It supports four taxonomies that power the filter system: property type (for sale, for rent), property status (featured, new, sold, rented), property location (by city or neighbourhood), and property feature (garage, pool, garden, pet-friendly, etc.). Every listing gets a rich detail page with a photo gallery, a mortgage calculator, an enquiry form, and a sticky agent contact panel.

A One-File Architecture Built for Performance

All theme logic lives in a single functions.php file — a deliberate architectural choice that keeps the codebase simple and avoids the complexity of multiple include files. There are no anonymous closures, no require_once calls at the top level, and no dependencies on jQuery. The entire front-end interactivity runs on vanilla JavaScript with the Fetch API for AJAX calls.

Designed with a Dark Stone and Gold Palette

The visual identity uses a dark stone background (#1c1917) paired with a warm gold accent (#c8953a) — a combination that reads as premium without being overdone. Typography is clean and readable, using system fonts for performance. The layout is fully responsive, with a mobile-first hamburger menu and touch-friendly gallery controls.

Why We Built a WordPress Real Estate Theme with Claude AI

The idea started from a simple question: could Claude AI generate production-quality WordPress PHP code that actually works? Not just a snippet, not a proof of concept, but a full theme with AJAX, custom meta boxes, Customizer settings, and a demo content installer?

The Problem with Existing Free Real Estate Themes

Most free WordPress property themes are either too basic (just a custom post type with no filtering), too bloated (bundled with plugins that slow the site), or outdated (last updated in 2019). Finding a clean, lightweight, modern real estate theme that you could customize without fighting against existing code was harder than expected. Building one from scratch was the obvious solution — and using Claude AI made it feasible within a reasonable timeframe.

What Claude AI Brings to WordPress Development

Claude AI excels at generating structured, syntactically correct PHP and JavaScript when given precise prompts. It understands WordPress hooks, filters, and conventions. It can generate WP_Query tax_query arrays, nonce-protected AJAX handlers, Customizer panels, and block editor markup — all in one conversation. The key insight is that Claude works best when you treat each file as a separate, focused task with clear specifications.

Cost Savings and Speed

Commissioning a custom real estate theme from a development agency typically costs between $3,000 and $10,000 and takes four to twelve weeks. Using Claude AI, the core theme was built in approximately 8 to 12 hours of active work spread across several sessions. The result is a fully functional theme that rivals paid alternatives — at zero cost for the code generation itself.

The Design System: Colors, Typography, and Layout

Before writing a single line of code, we defined the design system in detail. This upfront work is the most important step in using Claude AI for WordPress theme development. A vague brief produces vague code; a precise design system produces consistent, professional output.

Color Palette

The theme uses five core colors defined as CSS custom properties on :root:

• Primary dark: #1c1917 (stone-900) — used for header, hero backgrounds, dark sections
• Gold accent: #c8953a — used for CTAs, badges, active states, hover effects
• Body text: #44403c (stone-700)
• Light background: #f9f6f2 — used for cards and off-white sections
• White: #ffffff — used for text on dark backgrounds and card backgrounds

Typography

All typography uses the system font stack to avoid loading external fonts and maximize performance. Heading sizes follow a clear hierarchy: H1 at 2.5rem, H2 at 2rem, H3 at 1.5rem. Body text is set at 1rem with a line-height of 1.7 for comfortable reading. The gold color is applied sparingly — only to interactive elements and highlight text — to maintain its visual weight.

Layout Grid and Spacing

The main content container is capped at 1200px and centered. Property archive pages use a responsive CSS Grid that switches from three columns on desktop to two on tablet and one on mobile. The single property page uses a two-column layout with the gallery and details in a 1fr main column and a 360px sticky sidebar for agent contact and quick stats. All spacing uses multiples of 8px for consistency.

Step-by-Step: How We Built the Theme Using Claude AI

Here is the exact workflow we followed to generate QT Property Listings v1.0 using Claude AI. This is a repeatable process you can use for any custom WordPress theme project.

Step 1 — Define the Full Specification Before Prompting

We started by writing a complete theme specification document covering: the theme name and slug, the full color palette and typography rules, every template file needed, the custom post type name and archive slug, all four taxonomies with their slugs, all 19 property meta fields, the AJAX actions required, the Customizer settings, and the demo content requirements. This specification became the foundation of every Claude AI prompt.

Tip: The more specific your specification, the less back-and-forth you need with Claude. Vague prompts like “build a real estate theme” produce generic, incomplete code. Specific prompts like “register a CPT called property with archive slug listing, four taxonomies with slugs type, status, location, and feature, and a rewrite flush on activation” produce precise, working code.

Step 2 — Generate functions.php First

The functions.php file is the backbone of any WordPress theme, and it needs to exist before other templates can reference its functions. We asked Claude to generate the entire file in a single prompt, covering: CPT and taxonomy registration, script and style enqueueing, Customizer panel, shortcode definitions, AJAX handler registrations, meta box callbacks, and the demo content installer. The result was approximately 1,400 lines of PHP that we pasted directly into the theme folder.

Step 3 — Build Templates One File at a Time

After functions.php, we tackled each template individually. The order mattered: we built index.php first (the property archive template), then front-page.php, then single-property.php, then supporting templates like taxonomy.php, home.php, single.php, and 404.php. For each file, we gave Claude the design system reference and a description of exactly what that template needed to output.

Step 4 — Generate the JavaScript File

The main.js file handles all client-side interactivity: the hamburger navigation menu, the AJAX property filter with pagination, the grid/list toggle, the property gallery image switcher, the tabbed interface on single property pages, the mortgage calculator, the enquiry form AJAX submission, and the localStorage-based wishlist. We asked Claude to write this in vanilla JavaScript (no jQuery) as a single IIFE (Immediately Invoked Function Expression) in strict mode.

Step 5 — Test, Report Errors, and Iterate

After pasting each generated file into the theme, we tested the feature in the browser. When errors appeared, we copied the exact PHP notice, JavaScript console error, or unexpected behavior description back into Claude and asked for a targeted fix. This iterative loop — generate, test, report, fix — is the core of the AI-assisted development workflow. Claude consistently identified the root cause and provided the correct fix, often explaining why the original code failed.

Key Features of QT Property Listings v1.0

The finished theme packs a comprehensive feature set into a lightweight, single-file architecture. Here is a complete overview of what QT Property Listings v1.0 delivers out of the box.

Custom Property Post Type and Taxonomies

The “property” custom post type supports 19 meta fields across four meta boxes: Property Details (price, bedrooms, bathrooms, area, parking, year built, property type listing, listing type), Property Features (five grouped checkbox sets for interior, exterior, utilities, community, and building features), Property Gallery (up to 10 images with a drag-and-drop uploader in the admin), and Agent Information (name, phone, email, WhatsApp, and photo).

AJAX-Powered Property Filter

The archive page includes a sticky filter sidebar that responds instantly without page reloads. Users can filter properties by type, status, location, price range, bedrooms, and bathrooms. The filter also supports a keyword search. All results include a pagination bar generated dynamically by the JavaScript buildPagination() function. Results can be toggled between a 3-column grid view and a list view.

Interactive Single Property Page

Each property listing page features a full-width hero gallery with a main image and thumbnail strip (clicking a thumb calls switchPropImg() to update the main image without reloading), a property header with key specs (beds, baths, area, price), a five-tab interface (Overview, Features, Details, Map, Calculator), a sticky agent contact box with click-to-call and WhatsApp links, and a nonce-protected enquiry form that submits via AJAX.

Mortgage Calculator

The built-in mortgage calculator uses the standard amortization formula (M = P[r(1+r)^n / ((1+r)^n – 1)]) to calculate monthly payments. Users enter the property price, down payment percentage, annual interest rate, and loan term in years. The calculator instantly displays the estimated monthly payment, total loan amount, total interest paid, and total cost. It pre-fills the price field from the property’s listed price.

Blog Section and Single Post Layout

The theme includes a full blog module with a two-column layout (main content plus sidebar), category badges, estimated reading time, author avatar initials, and a “Read More” link. The sidebar includes a search widget, recent posts with thumbnails, a category list with counts, and a CTA card. Single blog posts feature a full-width hero image, post meta bar, and previous/next navigation.

WordPress Customizer Integration

All key design settings are exposed in the WordPress Customizer under a “QT Property Listings” panel. Users can set the primary color, accent color, footer text, homepage hero title and subtitle, and social media links without touching any code. Changes preview live in the Customizer’s preview pane.

The AJAX Property Filter: How It Works

The AJAX filter is the most technically complex feature in the theme, and it is worth explaining in detail because it is the pattern you will use in any data-driven WordPress theme.

The JavaScript Side

When a user changes any filter control (a select dropdown, a range slider, or a text field), the JavaScript collects all current filter values into a FormData object and sends a POST request to WordPress’s admin-ajax.php URL (passed from PHP via wp_localize_script as qtpl.ajaxurl). The request includes the action “qtpl_filter” and a nonce value for security verification.

The PHP Side

The PHP handler registered with add_action(“wp_ajax_nopriv_qtpl_filter”, “qtpl_ajax_filter”) first verifies the nonce with wp_verify_nonce(). It then builds a WP_Query with a tax_query array (for type, status, location, feature filters) and a meta_query array (for price range and bedroom/bathroom count). The query results are looped through the qtpl_prop_card() template function to generate HTML, which is returned via wp_send_json_success([“html” => $html, “found” => $found_posts]).

Why Nonces Matter

Every AJAX action in the theme is protected by a WordPress nonce — a one-time-use security token. This prevents unauthorized requests from outside your site from triggering your AJAX handlers. The nonce is generated in PHP with wp_create_nonce(“qtpl_nonce”) and verified in the handler with wp_verify_nonce($_POST[“nonce”], “qtpl_nonce”). Skipping this step is a common security mistake in WordPress AJAX implementations.

The Mortgage Calculator: Built with Claude AI

Adding a mortgage calculator to a WordPress property theme is a common feature request, and it is a perfect example of the kind of self-contained JavaScript feature that Claude AI generates reliably.

The Formula

The calculator implements the standard mortgage amortization formula: monthly payment M = P × [r(1+r)^n] / [(1+r)^n − 1], where P is the principal (loan amount after down payment), r is the monthly interest rate (annual rate divided by 1200), and n is the total number of payments (years multiplied by 12). When the interest rate is zero, the formula simplifies to M = P / n to avoid a division-by-zero error.

The User Interface

The calculator panel lives inside the tabbed interface on the single property page. It contains four inputs — property price (pre-filled from the listing), down payment percentage, annual interest rate, and loan term — and four output fields: estimated monthly payment, total loan amount, total interest, and total cost. All calculations happen client-side with no server requests, so the results update instantly as the user types.

How Claude Generated It

We asked Claude to generate a self-contained JavaScript function that calculates mortgage repayments. We specified the exact input and output element IDs, the formula to use, and the edge case for a zero interest rate. Claude produced clean, well-commented code in a single response. The only refinement needed was asking it to format the output as currency with the Intl.NumberFormat API.

Demo Content Installer: 12 Properties in One Click

One of the most valuable features for theme developers and clients alike is a demo content installer that populates the site with realistic sample data immediately after theme activation. QT Property Listings v1.0 includes a one-click installer that creates 12 sample property listings, 3 blog posts, and 5 key pages (Home, About, Contact, Sell Your Property, FAQ).

How the Installer Works

The installer is triggered from a button in the WordPress admin (under Appearance → Demo Content). The button submits a form to admin-ajax.php with the action “qtpl_install_demo” and a nonce. The PHP handler uses wp_insert_post() to create each property, then calls update_post_meta() to save all 19 property meta fields. Images are sideloaded from Unsplash using media_sideload_image() and set as the featured image with set_post_thumbnail().

The Image Sideload Pattern

A critical detail in the image sideloading process: the external image URL must be saved to the property’s meta field (prop_ext_image_url) BEFORE calling media_sideload_image(). This is because media_sideload_image() may time out or fail on some server configurations, and the theme falls back to the external URL for display when the local copy is unavailable. Getting this order wrong was one of the bugs we caught during testing.

Gutenberg Block Markup for Pages

The five demo pages are created with full Gutenberg block markup — not raw HTML. The Home page, for example, uses wp:html blocks for the hero and filter sections, wp:columns blocks for the stats bar, testimonials section, and “Why Choose Us” grid, and a wp:shortcode block for the featured properties list. This means all demo pages are fully editable in the block editor without any raw HTML visible to the site owner.

Critical Bugs We Fixed Along the Way

No AI-generated codebase is perfect out of the box. Here are the most significant bugs we encountered and the fixes Claude AI helped us implement. These are the issues most likely to affect anyone replicating this project.

Bug 1 — Property Images Not Showing After Demo Install

Symptom: Demo properties were created successfully, but all listing cards showed a placeholder image instead of the Unsplash photo. Root cause: media_sideload_image() was called before the external URL was saved to meta, so the fallback had nothing to fall back to. Fix: move the update_post_meta($id, “prop_ext_image_url”, $url) call to before the media_sideload_image() call in the demo installer function.

Bug 2 — Homepage Showing Raw Gutenberg Block Markup

Symptom: The front page displayed raw HTML including block comment syntax (<!– wp:html –>) as visible text instead of rendered content. Root cause: WordPress was routing front-page requests to index.php, which contained the property archive loop rather than the Gutenberg content renderer. Fix: create a front-page.php file that calls get_template_part(“index”) — a two-line file that tells WordPress to use the correct template for static front pages.

Bug 3 — Full-Width Blocks Not Spanning the Page

Symptom: Sections marked as “Full Width” in the block editor were still constrained to the container width on the front end. Root cause: the theme’s CSS did not override the container constraint for alignfull blocks. Fix: add the rule .page-gutenberg-content .alignfull { width: 100vw; margin-left: calc(50% – 50vw); } to the theme stylesheet.

Bug 4 — Invalid CSS Color Value

Symptom: The hover state on property cards used a gold color with opacity, but the CSS value was invalid (#c8953a1a — hex color with hex opacity appended). Root cause: Claude initially generated the opacity as a hex suffix, which is only valid in some browsers and breaks in others. Fix: use PHP’s hexdec() function to extract the R, G, and B channels from the hex color and construct a proper rgba(200, 149, 58, 0.1) value.

Bug 5 — wp_count_terms() Fatal Error

Symptom: The admin dashboard threw a fatal PHP error on the stats widget. Root cause: wp_count_terms(array()) was called with an array argument, which is deprecated in WordPress 6.x. Fix: replace with count(get_terms([“taxonomy” => “property_type”, “hide_empty” => false, “fields” => “ids”])) to get an accurate count without triggering the deprecation error.

How to Recreate This Theme Yourself

You do not need to start from scratch. We have prepared a complete build prompt document — a Word file containing every specification, code architecture decision, design system detail, and exact data (including the 12 demo property records with Unsplash image URLs) needed to recreate QT Property Listings v1.0 using Claude AI.

What You Will Need

• A Claude AI account (free tier is sufficient for most files)
• A local WordPress development environment (LocalWP is the easiest option)
• A code editor such as VS Code
• Basic familiarity with WordPress theme activation and the admin dashboard
• The QT Property Listings v1.0 build prompt document (link in the video description)

The Prompting Strategy

When working with Claude AI to generate WordPress theme code, follow these guidelines for the best results:

1. Always provide the full design system at the start of each Claude session — colors, typography, layout grid, and naming conventions.
2. Request one file at a time. Asking for “the entire theme” in one prompt produces incomplete, generic output.
3. After each file is generated, test it in WordPress before moving on. Catching bugs early prevents cascading issues.
4. When you encounter an error, paste the full error message (not a paraphrase) into Claude for the most accurate fix.
5. Use the build prompt document as a reference to maintain consistency across multiple Claude sessions.

Internal and External Resources

For further reading and related resources:

• [Internal] How to Register a Custom Post Type in WordPress — our complete beginner’s guide
• [Internal] WordPress AJAX Tutorial: The Complete Guide to admin-ajax.php
• [Internal] WordPress Customizer API: Adding Settings, Sections, and Controls
• [Internal] How to Create a WordPress Demo Content Installer
• [Internal] Top Free WordPress Real Estate Themes Compared
• [Internal] Best Practices for Writing WordPress functions.php
• [External] WordPress Developer Handbook — Custom Post Types (developer.wordpress.org)
• [External] Claude AI (claude.ai) — the AI tool used to generate all code

Frequently Asked Questions

Can I build a WordPress theme with Claude AI for free?

Yes. Claude AI’s free tier provides enough capability to generate all the PHP, JavaScript, and CSS files needed for a functional WordPress theme. QT Property Listings v1.0 was built entirely using Claude AI conversations with no paid development tools required.

What features does the QT Property Listings theme include?

The theme includes a custom property post type with four taxonomies, AJAX-powered filtering, a mortgage calculator, property gallery with thumbnail switcher, an agent contact box, an enquiry form, a blog section, a wishlist using localStorage, a demo content installer with 12 sample properties, and full WordPress Customizer support.

Do I need coding experience to build a WordPress theme with Claude AI?

Basic familiarity with WordPress is helpful, but you do not need to be a PHP or JavaScript developer. Claude AI generates all the code. Your role is to write clear prompts, test the output, and report errors back to Claude for fixes.

How long does it take to build a WordPress property listings theme with Claude AI?

Building QT Property Listings v1.0 took approximately 8 to 12 hours of active prompting, testing, and refinement across multiple Claude AI sessions. A developer with WordPress experience can move faster; a beginner may take a little longer during the debugging phase.

What is the best way to prompt Claude AI for WordPress theme code?

Be as specific as possible. Name the exact file, specify the design system, describe every feature with its technical details, and always request one file at a time. Paste previous files as context when they need to reference each other.

Is the QT Property Listings theme compatible with the WordPress block editor?

Yes. The theme uses native Gutenberg blocks for all demo page content, including wp:cover, wp:columns, wp:html, and wp:group blocks, so all pages are fully editable in the block editor.

How does the AJAX property filter work?

The filter sends a POST request via the Fetch API to admin-ajax.php with nonce verification. The PHP handler builds a WP_Query with tax_query and meta_query arrays and returns rendered HTML cards via wp_send_json_success().

Can I use this method for other types of WordPress themes?

Absolutely. The same prompt-and-iterate workflow applies to job boards, restaurant directories, event listings, portfolio themes, and more. Define your design system and architecture upfront, then generate one file at a time while maintaining context across sessions.

Conclusion

Building a free WordPress property listings theme with Claude AI is not just possible — it is a genuinely effective development workflow. QT Property Listings v1.0 proves that a complete, production-ready real estate theme with AJAX filtering, a mortgage calculator, a demo installer, and full block editor compatibility can be generated through structured AI conversations in a fraction of the time and cost of traditional development.

The key to success is preparation: define your design system before you prompt, request one file at a time, test obsessively, and use Claude’s iterative fix cycle to resolve bugs quickly. The bugs we encountered — and documented above — are predictable, and knowing about them in advance means you can avoid or fix them in minutes rather than hours.

If you want to build this theme yourself, watch the full video tutorial linked above and download the QT Property Listings v1.0 build prompt document from the link in the video description. The document contains every specification, data record, and architectural decision you need to reproduce the exact same theme using Claude AI. Start your first session today and see just how far AI-assisted WordPress development has come.

Have questions about the build process or ran into a bug not covered here? Drop a comment below — we read every one.