Site Build Notes — How the v4 Site is Built

Last updated: July 7, 2026

This page is internal documentation for whoever maintains this website next — a future hire, a VA, or future-you who has forgotten how it all works. The site was built in a fairly unusual way: instead of using standard WordPress/Elementor features for everything, a lot of the styling, scripts, and even navigation are hand-coded and injected through a plugin called WPCode. This page explains that setup so nobody has to reverse-engineer it from scratch.

Site basics

Site URL: https://renegaderoofingco.com
WordPress login: https://renegaderoofingco.com/wp-admin/
WordPress version: 6.6.5 (version 7.0 is available but not yet installed)
Active theme: Hello Elementor — this is a deliberately bare-bones theme meant to be a blank canvas for Elementor. Almost all visual design comes from Elementor and from custom code, not from the theme itself.

Plugins in use

There are 23 installed plugins. 20 are active, 3 are inactive (kept installed but turned off).

Active plugins and what they do:

• Elementor — the core drag-and-drop page builder used to design every page. Other active plugins depend on it, so it cannot be deactivated without deactivating those first.
• Elementor Pro — adds the Theme Builder (used for the site header/footer templates), popups, and premium widgets.
• ElementsKit Lite — adds extra Elementor widgets and header/footer building tools.
• Jeg Elementor Kit — another add-on pack of extra widgets for Elementor.
• MetForm — a form builder plugin for Elementor, used to build some of the site’s forms.
• WPForms Lite — a simpler, separate contact form plugin; the main Contact page form runs on this.
• WPCode Lite — this is the most important plugin on this site architecturally. It lets us inject custom HTML, CSS, JavaScript, and PHP into specific parts of the site (header, footer, or “run everywhere”) without editing theme files. Nearly all of the custom behavior on this site — navigation, styling fixes, tracking codes, schema markup, the estimator tool, and more — lives inside WPCode “snippets.” See the section below for the full list.
• Rank Math SEO — the site’s SEO plugin. Handles the sitemap, meta titles/descriptions, canonical URLs, and the homepage’s full schema markup (Organization/WebSite/Place/etc.). This is the SEO plugin we kept after resolving a conflict in July 2026 (see Known Quirks).
• GetAutoSEO AI Tool — an AI content-generation tool for SEO articles; not core to how the site runs.
• Imagify — compresses and converts images (e.g., to WebP) to keep page load times down.
• PixelYourSite — manages Meta (Facebook) Pixel and Google tracking/conversion pixels.
• Header Footer Code Manager and WP Headers And Footers — two separate utilities that can also insert code into the header/footer. In practice, WPCode is what’s actually used for this on this site; these two are mostly redundant with it and should be checked before adding new code so we don’t end up with the same script injected twice.
• WP Mail SMTP — makes sure WordPress emails (like form notifications) actually get delivered, by sending them through a proper email service instead of the server’s default mailer.
• All-in-One WP Migration and Backup, UpdraftPlus, Migrate Guru — three different backup/migration tools, kept for redundancy and for moving the site if needed.
• Better Search Replace — a utility for bulk find-and-replace across the database (handy after a domain change or migration).
• Hostinger Easy Onboarding — a helper plugin from the Hostinger hosting company, related to initial setup.
• Template Kit Import — an Envato tool used to import design template kits into Elementor.

Inactive plugins (installed but turned off):

• SEOPress and SEOPress PRO — deactivated in July 2026 after we found the site was running two SEO plugins at once (SEOPress alongside Rank Math), which was causing duplicate/broken meta tags. Rank Math was kept because it has the Local SEO module our schema setup depends on. Do not reactivate these unless Rank Math is being removed first.
• Site Kit by Google — Google Analytics/Search Console integration; installed but not currently turned on.

The WPCode snippet architecture

WPCode snippets are small pieces of custom code, each with an ID number, a location (where it runs), and an on/off switch. As of this writing there are 22 snippets total: 18 active, 4 inactive.

Active snippets:

• 21198 — Header Logo Light/Dark Swap CSS. Swaps the header logo between a light and dark version depending on the page background.
• 21137 — RR4 Homepage CSS Fix (Repair Corrupted Style Blocks). This is the current sitewide CSS override. It exists to patch/reinforce styling that a corrupted embedded style block on the homepage (see CSS layer section below) would otherwise break. This is the successor to snippet 20553.
• 20989 — Trustpilot File Verification. A verification file/snippet for Trustpilot.
• 20981 — Trustpilot Domain Verification. Domain-level verification for Trustpilot.
• 20979 — FAQ Schema for the Roofing FAQ page. Adds FAQ-specific schema markup to /roofing-faq/.
• 20973 — License Numbers Footer Bar. Displays the contractor license numbers in the site footer.
• 20971 — Bing Webmaster Tools Verification.
• 20970 — Google Analytics 4 (property G-X6LMX9VR0Y). Site analytics tracking code.
• 20969 — Adds the “Refer a Friend” link to the navigation menu.
• 20958 — RRC Referral Handler. Backend logic for the referral program.
• 20957 — RRC Referral Form. The referral form markup.
• 20586 — Chat Widget Label. Customizes the label on the site’s chat widget.
• 20375 — About Us Page Rebuilder. Custom logic tied to the About page content.
• 20365 — About Page Image Sideloader. Pulls/sideloads images used on the About page.
• 20356 — Roofing Image Sideloader. General-purpose image sideloading logic used elsewhere on the site.
• 20355 — Financing Inquiry Form Handler. Backend handler for the financing inquiry form.
• 20021 — Reni Chatbot Backend. Backend logic for the site’s “Reni” chatbot.
• 20019 — Renegade Estimate Mailer. The backend (PHP) half of the Instant Estimator tool — see Estimator section below.

Inactive/archived snippets (do not re-enable):

• 20553 — Archived. Titled “[ARCHIVED — DO NOT ENABLE — superseded by snippet 21137 on Jun 2026]”. This used to be the sitewide CSS fix; all of its logic was moved to snippet 21137. Re-enabling it alongside 21137 would cause conflicting CSS.
• 20557 — Update WPForms Contact Form. Currently inactive; was used to make a one-time update to the contact form and left switched off afterward.
• 20012 and 20011 — “Completely Disable Comments” and “Display a message after the 1st paragraph of posts.” These are WPCode’s own default sample snippets, included automatically when the plugin was installed. They were never turned on and are not part of this site’s real functionality — safe to ignore or delete.

Dependency chain: Snippet 21137 is the one that matters most day-to-day. It was written specifically to counteract problems caused by a corrupted embedded style block in the homepage content (see below), so it should be treated as load-bearing. Do not delete or heavily edit 21137 without checking whether the homepage’s embedded CSS block has also been cleaned up — removing one without the other will break the homepage layout.

The header/navigation architecture

This is one of the more confusing parts of the site, so read carefully. There are two completely different navigation systems in use:

• An Elementor Theme Builder header template (internally called Header #79) — this is a normal, reusable Elementor header template. It is only used on two pages: /roofing-faq/ and /refer-a-friend/.
• Raw HTML navigation baked directly into the page content — used on the homepage, all 6 service pages (tile, shingle, metal, flat, roof repair, roof replacement), /about/, and /contact/. On these pages, the navigation is not a reusable template at all — it’s hard-coded HTML with the CSS class .rr4-nav-logo, repeated inside each page’s own content. This means an update to the nav (like a new link or a logo change) has to be manually applied to each of these pages individually, not just once in a template.

The newer /services/ hub page (created July 2026) uses the Default page template, which pulls in Header #79 like the FAQ and Refer-a-Friend pages do — so it’s actually on the “normal” template system, not the raw HTML system.

The custom CSS layer

The homepage’s content contains a large embedded block of CSS that got corrupted at some point (broken formatting mixed with stray HTML tags). Despite looking broken, part of this block is still functionally active and affects real layout — it is not simply dead code that can be deleted. Snippet 21137 exists specifically to repair/reinforce the styling that this corrupted block would otherwise break. Because of this, the two are linked: if the embedded block is ever cleaned up or removed, snippet 21137 needs to be reviewed at the same time, or the homepage layout can break.

The schema (structured data) architecture

Schema markup helps search engines understand the business. There are two separate sources of schema on this site, and they are intentionally split by page:

• Rank Math generates a full schema graph (Organization, WebSite, Place, ImageObject, WebPage) automatically, but only on the homepage. This is standard Rank Math behavior, not a bug.
• A hand-written LocalBusiness schema block, delivered through a WPCode snippet, is the canonical LocalBusiness declaration and appears on every other page of the site.

Do not add a second LocalBusiness block anywhere — that would create duplicate schema, which can confuse search engines rather than help them.

The Instant Estimator architecture

The Instant Estimator (the tool that gives visitors a quick roofing estimate) is built from three pieces:

• A roughly 63KB custom JavaScript file, injected sitewide through WPCode’s Global Header and Footer feature (specifically the Footer / “ihaf_insert_footer” hook). This is what powers the estimator’s front-end behavior.
• A backend API endpoint at /wp-json/rrc/v1/estimate, handled by WPCode PHP snippet 20019 (“Renegade Estimate Mailer”), which is what the form actually submits to.
• The estimator’s on-page card is scoped to the CSS selector #rrc-card. Any styling fixes for the estimator card live inside snippet 21137, not in a separate stylesheet.

The image architecture

Images on this site come from two different places, which matters if you’re ever trying to update one:

• The hero images on the homepage and the 6 service pages, plus /commercial-roofing/, are not uploaded to the WordPress Media Library at all. They’re CSS background-image divs pointing to an external Supabase storage bucket. To swap one of these images, you need access to that external storage, not just the WordPress Media Library.
• Every other image on the site (gallery photos, testimonial headshots, award badges, etc.) is a normal WordPress Media Library upload and can be managed the usual way (Media Library, alt text, etc.).

Known quirks and recent history

• Dual SEO plugin conflict resolved July 2026: the site was running both SEOPress/SEOPress PRO and Rank Math SEO at the same time, which caused duplicate and broken meta description tags on the homepage. SEOPress and SEOPress PRO were deactivated; Rank Math was kept.
• WPCode snippet 20553 is archived (inactive) and titled to make that obvious. Its replacement is snippet 21137. Do not re-enable 20553.
• The old page at /metal-roofing-old/ is a leftover from a previous slug change and has been moved to Trash. The real, canonical metal roofing page is /metal-roofing/.
• /services/ is a new hub page created in July 2026 to fix a 404 — it links out to all 7 real service pages plus the contact page.
• The site was originally built with WordPress installed in a /wp/ subfolder, then later moved so the site loads from the root domain instead. If you ever see old links or notes referencing /wp/, that’s why.