DEV3Technologies
All case studies

DEV3 Technologies · own product

DEV3 Mendworks: a home-maintenance WordPress theme with an exploding 3D house and built-in lead tools

Our WordPress theme for plumbing, electrical, HVAC, roofing and handyman companies: a live three.js cutaway house that explodes trade by trade, plus the lead tools a trades business needs, including a sticky call bar, a postcode checker and quote forms.

WordPressPHPtheme.jsonElementorWooCommercethree.jspostprocessingLenisContact Form 7JSON-LD
Industry
Home Services (WordPress theme)
Services
Web DevelopmentUI/UX DesignDigital Marketing

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Cutaway 3D hero — an exploded isometric house with roof, rooms and tools floating beside the Home repairs, done properly headline and quote buttons.

Cutaway 3D hero — an exploded isometric house with roof, rooms and tools floating beside the Home repairs, done properly headline and quote buttons.

The challenge

A trades website has one job: get the phone to ring or a quote request in. Most handyman and plumbing themes look interchangeable, with a stock photo of a van, a list of services and a contact form at the bottom. They also leave the hard parts to plugins: an emergency number that is always in reach on a phone, a quick answer to "do you cover my area?", and quote forms that already know the service and postcode. We wanted a theme that explains what a company does behind the walls in a way photos cannot, and that is a lead machine first. Every lead setting had to live in one place, so changing the phone number never means hunting through pages.

Our solution

Mendworks is a classic PHP theme with theme.json on DEV3's shared theme core. The DEV3 Theme Toolkit plugin provides the Service, Project, Team (Engineers) and Testimonial post types, the Elementor widgets and their block twins, WooCommerce extras and the demo importer. The theme owns presentation, the 3D presets and the lead tools.

Key design decisions

  • One model, six trades. The cutaway house exposes its systems as scene state: explode, plumb, elec, hvac, roof, tools, night and fixed, each 0–1. Each Elementor chapter sets a combination, and the engine blends between them. Pipes draw on, wiring sparks, ducts fill with airflow and tiles drop in, and the story ends with the house reassembled, fixed.
  • The same house on service pages. The exploded-house preset can run inline with one system highlighted, so the Plumbing service page shows only the pipes. A before/after room preset with a wear slider illustrates project pages.
  • Leads from a single source. The phone number and label, the 24/7 badge, the top bar, the mobile call bar and the quote link all read from one Customizer section. A number changed there updates the header, top bar, call bar, 404 page and patterns.
  • A call bar that respects forms. The sticky mobile bar hides while a form field has focus, so it never covers the keyboard. It appears only below 768 px.
  • Postcode checking by outward code. Areas are typed one per line, such as Kestrel Bay: KB1, KB2. Matching uses the outward code, so KB1 never matches KB12. A match links to the quote form with ?postcode= pre-filled, and results are announced through an ARIA-live region.
  • Honest reviews by default. Demo testimonials carry a "Sample review" badge that stays on until the business replaces them.

Results

Mendworks ships with a one-click demo: 14 Elementor pages, 6 service pages, 6 project pages, 6 engineers, 6 sample-badged reviews, 6 advice posts, 19 products and 3 Contact Form 7 forms. The theme adds 28 block patterns.

  • Quality gates passed: php -l on every file, phpcs with WPCS 3 and PHPCompatibilityWP 7.4+ at 0 errors, and the WordPress Theme Check plugin with no required-level failures.
  • Frame rate measured: 61 fps on all 18 pages checked at 1440 px in headed Chrome, from the home story through services, pricing, projects, areas, quote, the 3D product page, cart, checkout and the 404 page. The home and product pages also held 61 fps at 390 px. The QA run logged 0 console errors.
  • Flows tested: the WooCommerce add-to-cart → mini-cart → cart → checkout → order-received flow, and an Elementor editor smoke test where the house updates live as its controls change.
  • Weight: the engine is about 207 KB gzip including three.js, inside the 220 KB budget, and all three Mendworks presets ship in one lazy chunk.

Mendworks is on the DEV3 marketplace. Watch its video tour there.

Setup guide

Requirements

  • WordPress 6.0 or newer and PHP 7.4 or newer
  • The DEV3 Theme Toolkit plugin (included and required)
  • Recommended: Elementor (free), WooCommerce and Contact Form 7. WordPress offers to install them after you activate the theme. Elementor Pro is supported but not required.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to WordPress.

  • dev3-mendworks.zip: the theme. Install this one.
  • dev3-mendworks-child.zip: an optional child theme for your own CSS and PHP.
  • dev3-theme-toolkit.zip: the companion plugin. It is also bundled inside the theme and installed through the prompt.
  • dev3-mendworks-demo-content.zip: the demo package for reference. The importer already has a copy inside the theme.
  • Documentation/index.html: the full guide. Open it in a browser.

Install the theme

  1. Go to Appearance → Themes → Add New → Upload Theme.
  2. Choose dev3-mendworks.zip, click Install Now, then Activate.
  3. A notice asks you to install the DEV3 Theme Toolkit (required) and the recommended plugins. Click Begin installing plugins, then install and activate them. You can also upload dev3-theme-toolkit.zip under Plugins → Add New → Upload Plugin.
  4. Optional: if you plan to change code, upload dev3-mendworks-child.zip the same way and activate DEV3 Mendworks Child. The parent theme must stay installed.

Import the demo

  1. Log in as an administrator. Elementor keeps every widget setting only when an administrator runs the import.

  2. Go to Appearance → DEV3 Demo and click Import demo.

  3. The import adds:

    • 14 Elementor pages: Home with the 3D story, Services, Pricing & plans, Projects, Areas we cover, About, FAQ, Get a quote, Contact, Advice and more
    • 6 service pages and 6 project pages, also built in Elementor
    • 6 engineers, 6 sample-badged reviews and 6 advice posts
    • 19 products: maintenance plans, service packages, and parts and tools
    • 3 Contact Form 7 forms (Free quote, Book a visit and Contact)
    • the menus, footer widgets and Customizer settings

    WooCommerce's own Shop, Cart and Checkout pages are reused rather than duplicated.

  4. Open the home page and scroll through the house.

Imported items are tagged, so Reset (remove demo content) on the same screen removes only them. On a server with WP-CLI you can run wp --user=admin dev3tk demo import and wp dev3tk demo reset.

After the import

  1. Open Appearance → Customize → Mendworks: leads & service area. Set your phone number and label, the emergency badge, the top bar text, the call bar and the quote page link.
  2. Replace the demo areas with your own, one per line, such as Kestrel Bay: KB1, KB2, KB3.
  3. Change the email recipients of the three forms in Contact → Contact Forms.
  4. Replace the sample reviews with real ones, then switch off their Sample review badge.

Updates

Download the new version from your DEV3 account and upload dev3-mendworks.zip again. WordPress offers to replace the installed version. Changes you made in the child theme, the Customizer and your pages are kept.

How to use

Set up your leads

All the lead tools read from Appearance → Customize → Mendworks: leads & service area:

  • Phone number and label: used in the header, top bar, mobile call bar, 404 page and patterns. Numbers you typed by hand inside Elementor text still need updating on those pages.
  • Emergency badge: on or off, plus its text. This is the pulsing 24/7 badge.
  • Top bar: on or off, plus its trust line.
  • Call bar: on or off, plus the label of its quote button. The bar shows only below 768 px and hides while a form field has focus.
  • Quote page link: where every "Get a free quote" button points.

Check postcodes

  1. In the same Customizer section, list your areas one per line, for example Hollow Wick: HW1, HW2, HW3. Edit the "covered" and "not covered" messages; %s becomes the area name.
  2. Matching uses the outward code, so KB2 matches "KB2 4HT", but KB1 does not match "KB12".
  3. To place a checker anywhere in Elementor, drop in an HTML widget containing <div class="mw-areacheck" data-mw-areacheck data-title="Do we cover your area?"></div>. In the block editor, insert the Mendworks · Postcode checker band pattern.
  4. A match links to the quote form with the postcode filled in.

Edit the 3D house story

  1. Open the home page with Edit with Elementor. The top 3D Scene widget uses the Mendworks: exploded house preset as a fixed background. Its panel sets:
    • the highlighted system
    • the orbiting tools
    • the room, halo and window-glow colours
  2. The six containers below it (Home, Plumbing, Electrics, Heating & air, Roofing and Fixed) each have Advanced → DEV3 3D chapter → Use as 3D chapter switched on. Reorder, duplicate or delete them to change the story.
  3. Set Copy side to left, right or centre, and the camera frames the house on the other side.
  4. Optional: override a chapter with Scene state JSON, for example {"explode":0.6,"elec":1,"night":0.8}. The keys are explode, plumb, elec, hvac, roof, tools, night and fixed, each from 0 to 1.
  5. On a service page, add a 3D Scene widget inline with the exploded-house preset and one system highlighted.

Services, projects and team

  • Services have a price, duration, booking link and category. The Services page filters by category.
  • Projects have a client, year, location and credits. Show before and after with the Before/After widget, or with the before / after room 3D preset (room plus a wear value, where 0 is after and 1 is before).
  • Team is labelled Engineers. Testimonials have a sample-badge switch.
  • Both services and projects can be designed in Elementor.

Quotes and bookings

  • The Free quote, Book a visit and Contact forms are Contact Form 7 forms. Place them with the DEV3 Form widget or block.
  • The quote form reads ?postcode= and ?service= from the link, so the "Get a quote" button on a service page arrives with the service chosen.
  • WPForms forms work in the same widget.

Sell plans and parts

  • Maintenance plans are virtual products with no shipping.
  • Service packages can use variations, such as a half-day or full-day handyman visit.
  • Parts use colour or finish swatches. On the product's 3D view tab, pick Mendworks: product studio and an object, such as a thermostat, boiler, tap, heat pump, drill or toolbox. Swatches then recolour it live.

Related case studies