You land on a WordPress site with gorgeous type, perfectly judged spacing, and a hero section that makes you a little jealous. The question every designer asks next is the same: how did they build that? You do not need to email the studio or guess. The browser already told you — you just have to know where it writes the answer down. This is the view-source trick, and once it becomes muscle memory you will reverse-engineer a site's theme, fonts, colors, and page builder in under two minutes.

Why view source still beats asking

Every WordPress page ships its construction notes in plain text. Themes live at a predictable path, assets carry version strings, and the markup is littered with class names that name their own tools. Browsers expose all of it through two free, built-in features: View Source (the raw HTML the server sent) and DevTools (the live, rendered, inspectable version). View Source is your fast first pass; DevTools is where you extract exact values. Learn both and you stop relying on tools that lie to you.

Open the two windows that matter

View Source: Ctrl+U (Windows/Linux) or Cmd+Option+U (Mac), or type view-source: before any URL.
DevTools: F12, or right-click any element and choose Inspect. This drops you straight onto that element in the Elements panel.

Step one: name the theme

WordPress stores every theme under /wp-content/themes/{slug}/, and the browser cannot hide that path because it has to fetch the stylesheet from it. In View Source, use Ctrl+F and search for wp-content/themes. You will find something like:

/wp-content/themes/astra/assets/css/... — the site runs Astra.
/wp-content/themes/blocksy/static/... — that is Blocksy.
/wp-content/themes/kadence/assets/... — Kadence, and so on.

The slug is the theme. To confirm the exact version and author, open the theme's style.css directly — paste https://thesite.com/wp-content/themes/{slug}/style.css into the address bar. WordPress requires a header comment at the top of that file declaring Theme Name, Author, Version, and a link. That comment block is the closest thing to a signed confession you will get.

Two more tells worth a glance: the <meta name="generator"> tag (often left in, sometimes naming the WordPress version or the builder), and the classes on the <body> element, which frequently include the theme slug and template name.

Step two: steal the type and color (the honest way)

This is the part designers actually care about, and View Source alone will not give it to you cleanly. Switch to DevTools.

Exact fonts

Right-click the headline and Inspect. In the Computed tab, find font-family — it shows the resolved stack, so you see which font actually rendered, not just the wish-list. Better still, open the Network tab, reload the page, and click the Font filter. Every typeface the page downloaded appears by filename: inter-var.woff2, sourceserifpro.woff2, or a Google Fonts request to fonts.gstatic.com. That tells you the real family, the weights loaded, and whether they self-hosted or pulled from a CDN.

Exact colors and spacing

Select any element and read the Styles pane. Hex and HSL values are right there, and clicking the color swatch lets you copy it. For spacing, the box-model diagram at the bottom of the Computed tab shows precise padding, margin, and border values in pixels. No more eyedropping a screenshot and guessing — you get the source numbers.

Step three: identify the page builder

Most striking WordPress designs are built with a page builder or block system, and each one leaves a distinct fingerprint in the class names and asset paths. Search the source for these:

Elementor — elementor- prefixed classes everywhere and /wp-content/plugins/elementor/ assets.
Bricks — brxe- class prefixes and a bricks theme folder.
Divi — et_pb_ classes (the ET Builder module prefix).
Beaver Builder — fl- prefixed classes.
GenerateBlocks / GeneratePress — gb- classes and tidy, minimal markup.
Kadence Blocks — kb- or wp-block-kadence- classes.
Native Gutenberg — wp-block- classes with no third-party builder prefix, often a sign of a modern block (FSE) theme.

Knowing the builder changes how you'd recreate the layout. A Bricks site and an Elementor site can look identical and yet demand completely different rebuild strategies, so this thirty-second check saves real time.

The shortcut tools — and why view source still wins

Browser extensions and detector sites automate the first pass. The ones worth installing: Wappalyzer (one-click stack readout — theme, plugins, CDN, analytics), BuiltWith, and the WordPress-specific WPThemeDetector and ScanWP. They are great for speed and for catching plugins you would not spot by eye.

But treat them as hints, not gospel. Detectors routinely misreport on optimized sites, and they cannot see anything the markup obscures. When a tool shrugs, view source is your ground truth — you read the actual paths the browser was forced to request.

When the trick fails (and what to do)

An expert knows the limits of the technique. Here is where the theme name hides:

Minified, concatenated CSS. Optimizers like WP Rocket, Autoptimize, and Perfmatters merge stylesheets into one file with a hashed name, erasing the tidy /themes/{slug}/ path. Look instead at the body classes and any remaining inline styles.
Block themes and Full Site Editing. FSE themes drive most of their styling from a theme.json file and global-styles output, so you will see fewer enqueued stylesheets and more wp-block- markup. Fetch /wp-content/themes/{slug}/theme.json to read their color palette and type scale straight from the source of truth.
Renamed theme folders. Some agencies rename the slug on a child theme to obscure the parent. The style.css header often still names the real author.
Headless WordPress. If the front end is Next.js or Astro pulling WP through an API, there is no wp-content path at all — the trick simply does not apply.
Security plugins that strip version strings and the generator tag, removing some of your easier tells.

Use this knowledge responsibly

Reverse-engineering for learning is a legitimate, time-honored part of design — you are reading published HTML the site chose to serve you. Identifying a theme so you can buy the same one, studying a font pairing, or understanding a spacing system to inform your own work is all fair game. Wholesale ripping is not. Do not copy a custom design pixel-for-pixel, lift premium assets you have not licensed, or pass another studio's work off as yours. The view-source trick is a microscope for understanding craft, not a shortcut around paying for it. Used well, it is the fastest way to turn "I wish I could build that" into "I know exactly how they did it."

The View Source Trick Every Designer Should Know