WPR Multi-Purpose Theme

Pages built from blocks, not a page builder.

A design system with 43 section blocks, nine colour schemes and any Google font you like. Everything renders through native WordPress blocks, so pages stay fast, portable, and readable long after whoever built them has moved on.

43 section blocks9 colour schemesWooCommerce readyNo builder lock-in
BLOCK 01wpr/heroPage hero. The only block that emits an h1, so use it once, at the top.
Block library

Every block in the theme,
on one page.

This page exists so you can see what each block looks like with real spacing around it. The copy is filler. The layout is not.

42 blocksAll attributes setDummy content
Noindexed. Not linked from the menu.
BLOCK 02wpr/hero-splitwpr/chat-threadSplit hero: copy left, card column right. Its allowedBlocks is wpr/chat-thread only, so one rides along.
NewSplit hero with a card column

A heading that sits
beside a card.

The right column takes any child block. Here it holds a chat thread.

Cart totals off by a centTask #1029 · demo-store.test
Done
DR
Totals are showing $49.99 in the cart and $50.00 at checkout. A customer noticed before we did.
9:04am
SW
Got it. Looks like tax rounds per line item in one place and per order in the other. Checking the plugin settings now.
9:12am
SW
Fixed. Both now round per order. I ran three test orders to be sure.
9:45am
Task received
9:04am
Cause found
9:19am
Fix deployed
9:38am
Verified live
9:45am
Rounding rule corrected and pushed live in 41 minutes.
BLOCK 03wpr/chat-threadThe ticket card on its own. A leaf block that ships default messages, so an untouched one is not blank.
Standalone

Chat thread

Used inside hero-split on the front page and inside a wpr/heading on /task-examples/, which is why it is not restricted to a parent.

Contact form stopped sendingTask #1044 · demo-clinic.test
Closed
PD
Nobody has had a form enquiry in four days and we normally get two or three.
2:31pm
SW
The host changed their mail settings last week, so the form is sending but nothing is being accepted. Moving it onto proper SMTP now.
2:48pm
SW
Done. I sent three tests and all three landed in your inbox.
3:43pm
Task received
2:31pm
Cause found
2:48pm
SMTP configured
3:29pm
Verified live
3:43pm
Sending restored and confirmed by a test submission in 1 hour 12 minutes.
BLOCK 04wpr/trustPlatform strip. Deliberately not a .wpr-section, it carries its own rhythm.
Filler platforms for the strip
WordPressShopifyWooCommerceSquarespaceWebflowWixGhostCustom-built
BLOCK 05wpr/headingThe generic section container. On its own it draws a heading band; with bare + grid it wraps children.
Heading band

A section that is only a heading

Use this when a section carries copy but no grid, or as the wrapper for blocks that ship without a section of their own.

This paragraph is a child block sitting inside the heading section.

BLOCK 06wpr/paragraphBody copy. Renders no section of its own, so the row is a wpr/heading container.
Prose

Paragraph

Two class options: wpr-p for body copy, wpr-lead for the larger intro size.

A standard body paragraph using the wpr-p class. It takes limited HTML, so bold and links both work inside it.

The same block with the wpr-lead class instead. Larger type, same markup.

BLOCK 07wpr/punchThe emphatic one-liner. Also section-less, so it sits in a wpr/heading container.
Emphasis

Punch

Grid-backed sections can emit a punch above and below their grid without this block. Use the block directly anywhere else.

A punch line is the emphatic one-liner. It sets its own weight and size.
BLOCK 08wpr/badgeThe reassurance pill. Takes a leading icon or a tag chip; the tag wins when both are set.
Fragments

Badge

Shown twice below: once with an icon, once with a tag chip.

Badge with an icon
NewBadge with a tag chip
BLOCK 09wpr/actionsThe button pair on its own. Hero and CTA draw their own; this is for everywhere else.
Fragments

Actions

Primary button plus an optional ghost button. Clear either label to hide that button.

BLOCK 10wpr/card-gridwpr/cardIcon cards in a grid. The cards below show every card variation: paras, ribbon, badge, features, warn.
Card grid

Cards, with everything switched on

Three columns here. The block takes 2, 3 or 4.

Every card below uses a different combination of the card block fields.

Cards accept a single text field or an array of paragraphs.

A plain card

Icon, heading, one paragraph. This is the shape most cards use.

BEST FOR MOST PEOPLE

Card with a ribbon and a badge

$78k–$104k a yearthe filler cost

The ribbon sits above the heading. The badge sits below it.

This card uses the paras array, so it can run to more than one paragraph with its own spacing on each.

Card with a checklist

The features array renders through the shared checklist partial.

One line per checklist row
Ticks come from the icon registry
Shared with the plan block
No limit on the number of rows

The warn variant

Set variant to warn and the card picks up the .wpr-card–warn treatment used by the “what goes wrong” grids.

No icon at all

Pass an empty icon and the card drops the icon well entirely. Leaving the key out gives you the default wallet instead.

ONE-OFF

Custom inline style

The style field lands on the card element, so a single card can break the grid rhythm.

The fourth card uses the warn variant.

Card grids also render without a heading when bare is true.

BLOCK 11wpr/stepswpr/stepNumbered steps. Each step takes a meta line with its own icon, and icon_size accepts null for CSS sizing.
How it works

Numbered steps in a grid

Same grid engine as the card grid, with a numbered item partial.

Steps carry a meta line under the copy. Cards do not.

Three columns here, but the block takes 2 to 4.

1

Send the task

Write it in plain words. Screenshots help but are not required.

Takes about 2 minutes
2

We pick it up

Someone reads it, asks anything that is unclear, and starts.

Usually within the hour
3

You get it back

Fixed, checked on a real device, and left the way you asked for it.

Tested before it ships

The last step below sets icon_size to null so CSS controls it.

Step numbers are strings, so “01” and “1” both work.

BLOCK 12wpr/statswpr/statBig-number columns. Two columns here because .wpr-stat__n overflows a 4-column cell past ~5 characters.
By the numbers

Stats in a two-column grid

Numbers longer than about five characters need cols 2 or they overflow.

Every figure below is invented.

The label sits above the number, the term below it.

Filler figure
$78,000
a year
What the plain stat looks like with a label, a number, a term and a sentence.
Highlighted
1,240
tasks
The same block with feature set to true, which highlights the column.

The second column is set as the feature.

Stat blocks are also the child of the comparison block.

BLOCK 13wpr/comparisonwpr/statThe this-versus-that band, in the split head layout: heading left, note right, no lead.
Side by side

Comparison band, split layout

This paragraph is the note. It only shows because layout is set to split, which moves the heading left and the note into this right-hand column.

Doing it yourself
$4,800
a year
Struck through, so it reads as the option you are moving away from.
The filler plan
$67
a month
Featured, so it reads as the recommendation.
BLOCK 14wpr/comparison-tableA real table: column headers, one highlighted column with a caption, and labelled rows.
Feature table

Comparison table with a highlighted column

Columns and rows are arrays. Each row supplies as many cells as there are columns.

On your ownA freelancerRECOMMENDEDThe filler plan
Response timeWhenever you get to it1 to 3 daysSame day
Monthly cost$0 plus your time$85 an hour$67 flat
Backups checkedOn request
Someone on call
Cancel any timen/aContract
BLOCK 15wpr/serviceswpr/serviceFour-column service tiles. Same grid engine, lighter item partial than the card.
What we cover

Service tiles, four across

The service item is a slimmer card: icon, heading, one line of copy.

Four columns is the default for this one.

Services take an inline style like cards do.

Fixes

Something broke and you want it working again.

Design tweaks

Spacing, colours, a section that never looked right.

Speed

Pages that take too long to load on a phone.

Security

Updates, backups, and the boring parts nobody enjoys.

Drop cols to 2 if the copy runs long.

Set bare to true to render the grid with no heading band.

BLOCK 16wpr/feature-listwpr/featureIcon-well rows. Neither block declares any attribute of its own, and neither emits a section.
Feature rows

Feature list inside a heading section

The feature list is a hard three-column grid, so a fourth item orphans. Keep it to multiples of three.

Thin strokeThis row uses the default 1.6 stroke weight.
Heavier strokeSame icon well, stroke pushed up to 2.2.
Lighter strokeAnd the same again at 1.2, which reads softer.
BLOCK 17wpr/flowwpr/flow-stepA four-across numbered strip. Close to steps but a separate element: 46px circles, accent first number.
Flow strip

Flow inside a heading section

Fixed four columns. No meta line, unlike the steps block.

1

Ask

Send the task in whatever words come out first.

2

Scope

We come back with what it takes and how long.

3

Build

The work happens on a copy, not on your live site.

4

Ship

It goes live once you have looked at it.

BLOCK 18wpr/testimonialswpr/testimonialReview cards. Star count, initials and avatar colour are all per-testimonial.
Reviews

Testimonials with every field set

Leave the children out and the partial falls back to the six shared testimonials.

The names below are made up.

Avatar takes accent, accent2, or any raw CSS colour.

★★★★★

“Filler review copy at five stars. Long enough to show how the card handles two lines of text.”

AR
Alex Rivera
Placeholder Co.
★★★★

“The same card at four stars, with the second avatar colour instead of the first.”

MK
Morgan Keen
Sample Studio
★★★

“Three stars, and a raw CSS colour on the avatar rather than one of the two named options.”

JT
Jordan Tate
Demo Bakery

Star count runs 0 to 5.

Quotes are passed without their surrounding quote marks.

BLOCK 19wpr/pricing-planswpr/planPlan cards with a notice row. The middle plan is the feature; the third uses the block treatment.
Pricing

Plans, with the notice row switched on

Prices split into a whole part and a cents part so the cents render small and inside the bold.

Starter
One task at a time
$29.00/task
Choose Starter
One task per request
Two-day turnaround
Email only
Most popular
Standard
The one most people pick
$67.00/month
No setup fee
Choose Standard
Unlimited task queue
Same-day pickup
Chat and email
Backups checked weekly
Cancel any time
Studio
For agencies passing work through
$299.99/month
$150 one-time setup
Talk to us
Everything in Standard
White-label replies
Named contact
Priority queue
BLOCK 20wpr/includedA single plan beside a checklist box. The plan is an object attribute, not a child block.
What you get

Included: one plan plus a checklist box

Two columns that collapse on narrow screens. The left is a full plan card.

Fixed price
Build
A site from scratch
$1,900.00 one-time
Half up front, half on launch
Start a build
Up to eight pages
Written for phones first
Two rounds of changes
30 days of fixes after launch

In every filler build

Hosting set up for you
A working contact form
Basic search settings
Analytics connected
Backups switched on
A short handover call
BLOCK 21wpr/task-listA ticked or crossed list card. Section-less, so it sits in a wpr/heading grid container.
Small cards

Task list

Set cross to true and every tick becomes a cross, which is how the “not covered” lists read.

Things this covers

  • A page that will not save
  • A form going to the wrong inbox
  • A theme update that broke the layout
  • Images that load at full size

Things it does not

  • Writing your copy for you
  • Running your ad account
  • Anything on a platform we cannot log into
BLOCK 22wpr/choiceThe this-or-that card. Four fields, a bad or good variant, and no section of its own.
Small cards

Choice

Usually shown in pairs so the two variants sit side by side.

OPTION A

The bad variant

Rendered with variant set to bad, which is the muted treatment.

OPTION B

The good variant

Rendered with variant set to good, which is the highlighted one.

BLOCK 23wpr/taskswpr/taskThe example task grid. Each task takes a meta array rendered with · separators.
Real examples

Task rows with meta cells

A two-column grid of task rows. This block has no punch or footnote fields.

Checkout was rounding tax twice
WooCommerce·41 minutes·Fixed
Contact form stopped sending
Contact Form 7·1 hour·Fixed
Homepage hero cropped on iPhone
CSS·25 minutes·Fixed
Plugin update took the site down
Rollback·18 minutes·Fixed
BLOCK 24wpr/faqwpr/faq-itemAccordion. The first item is set open so you can see both states at once.
Questions

FAQ with one item open

This is the note, and it is the paragraph the FAQ shows under the heading. Answers take limited HTML, so a link inside one needs its own inline colour.

No. Every price, name and figure here is filler so the blocks have something to render.
It exists to preview the theme, not to be found in search.
Yes, though links inherit their colour site-wide, so they need an inline style like this one to be visible.
The block renders the five shared questions the partial ships with.
BLOCK 25wpr/contactwpr/contact-pointTwo-column contact split. The form is a shortcode string, run through do_shortcode by the partial.
Get in touch

Contact split with a live form

The left column takes contact-point children. The right column takes a form shortcode.

Chat is the fastest way to reach anyone.
Replies land within a few hours on weekdays.
Nothing you send here is shared anywhere.
A person reads it, not an autoresponder.

    BLOCK 26wpr/logo-wallClient or platform logos as images. Grey until hover so mismatched brand colours do not fight the page.
    Social proof

    A wall of logos.

    The trust strip is text only; this one takes real marks.

    Filler client oneFiller client twoFiller client threeFiller client fourFiller client five

    Set mono to false to show them at full colour.

    BLOCK 27wpr/media-textAn image or video beside a column of copy. The mid-page counterpart to the split hero, and it flips either way.
    How it works

    Media on one side, copy on the other.

    Set side to left or right. The copy stays first in the source order, so reading and tab order never flip with the visual columns.

    Takes an image or a video
    Optional ticked points
    Optional buttons
    Filler screenshot
    BLOCK 28wpr/before-afterTwo images with a draggable divider. Works without JavaScript: the control is a real range input, so it is keyboard operable.
    Redesign

    Drag to compare before and after.

    Filler after image
    Filler before image
    Before After

    Both images should share the same aspect ratio.

    BLOCK 29wpr/post-gridRecent posts as cards. Reuses the card styles rather than a post-specific tile, so posts and features sit in one system.
    Writing

    Latest from the blog.

    Queried when the page renders, so it never goes stale.

    BLOCK 30wpr/formA lead form that emails the submission. Fields are authored as `Label :: type :: required`; honeypot, timing and rate limits guard the endpoint.
    Get in touch

    A form you can put anywhere.

    The field styles already existed; only the Get Started wizard could reach them.

    This demo form really does send, so please do not submit it.

    BLOCK 31wpr/ctaThe closing band. Badge, heading, two buttons, a facts row, a notice and a footnote.
    Filler7-day money-back guarantee

    The last block on
    the page.

    A closing band with everything switched on at once.

    No contract Cancel any time Filler guarantee
    This is the notice line, which sits apart from the footnote.
    And this is the footnote, in smaller type below everything else.