Unioncorp documentation

If you read one section, read this one. Each step links to the full explanation further down.

1. Install and activate Unioncorp. It builds your pages and your menu on its own. Install Unioncorp
2. Put in your firm’s details: the phone number and hours in the header, the address and email in the footer and on the Contact page. Contact details and map
3. Rewrite the words and figures, and replace the photographs. Change words, figures and photos
4. Point every button somewhere. They all start out going nowhere. Buttons and links
5. Add your logo. Logo, header, footer and navigation
6. Send yourself a test enquiry and make sure the email arrives. The enquiry form
7. Pick a palette and fonts if the blue is not yours. Colours and fonts

None of it needs code, a page builder or a plugin.

Download the zip with the button at the top of this page. Do not unzip it — WordPress installs the zip file itself.

1. In your dashboard, go to Appearance → Themes and click Add New Theme.
2. Click Upload Theme at the top of the screen.
3. Click Choose File, pick unioncorp.zip, then click Install Now.
4. When WordPress reports the theme is installed, click Activate.

Unioncorp needs WordPress 6.6 or newer and PHP 7.4 or newer, and is tested up to WordPress 7.1. Tools → Site Health → Info shows both versions.

What happens when you activate it

On a site that has not been built yet, Unioncorp creates seven pages — Home, About, Services, Case studies, Pricing, Contact and Blog — and fills six of them with real content. It makes Home the front page and Blog the posts page, and builds a navigation menu that links them all.

Privacy Policy and Sample Page come with WordPress, not with Unioncorp. Delete Sample Page whenever you like.

Where Unioncorp lives in the dashboard

Unioncorp is a block theme, so there is no Customizer and no theme options screen. Your words and photographs are on Pages. Everything shared by every page — the header, the footer, the menu, colours, fonts and templates — is in Appearance → Editor.

Every page Unioncorp builds is a stack of sections — a hero, the services, the statistics, the team — and every section is made of ordinary blocks. The sections were copied into your pages when the theme was activated, so they are yours to rewrite, reorder or delete.

Above and below the sections sit the header and footer. They are template parts: shared by every page, and edited once in Appearance → Editor.

Every page except Home opens with a photograph banner carrying the page’s title. Home has its own hero instead — see Page templates.

Open the page: from the front of your site click Edit Page in the black bar at the top, or go to Pages and click its title.

1. Click the words you want to change. A small toolbar appears above them.
2. Select the old text — double-click it, or press ⌘ A (Ctrl A on Windows), which selects only that block — and type the new text.
3. Click Save in the top-right corner, or press ⌘ S / Ctrl S.

List View: the outline of the page

Click Document Overview (the three stacked lines near the top left) or press ⌃ ⌥ O (Shift Alt O). Every block on the page is listed on the left: open a section with its arrow, and click a row to select that block — the easy way to reach text on top of a photograph.

Drag a section up or down in List View to move it, and use its ⋮ menu to duplicate or delete it. Some sections carry a small label — services, work, team, pricing, contact. That is the section’s anchor, set under Advanced → HTML anchor: a link to #services scrolls straight to it.

Change a photograph

Click the photograph and choose Replace on the toolbar, then Open Media Library or Upload. On a banner with text over it (a Cover block), the Focal point picker in the sidebar decides which part stays in view on a phone. The case studies gallery opens each photograph larger when it is clicked; a replacement keeps that. Fill in Alternative text for every photograph: a short description for people who cannot see it, and for search engines.

Buttons and links

Every button Unioncorp builds — Get started, Our services, Learn more, Read our case studies — starts out linked to #, which goes nowhere. Point each one before you launch:

1. Click the button, then the Link icon on its toolbar.
2. Search for a page — Contact for “Get started”, say — or paste an address. A section anchor such as #services scrolls the same page.
3. Save. The Get started button in the header is in the Header template part: change it there once, as described under Logo, header, footer and navigation.

Every section of the demo is also a pattern you can insert on any page, and every page layout is one too.

1. Click where the new section should go, then the blue + in the top-left corner.
2. Open the Patterns tab and choose Unioncorp: sections or Unioncorp: pages.
3. Click a preview to insert it, or drag it into place, then edit it like anything else.

An inserted pattern is a copy: it keeps working however much you change it, and later theme updates do not rewrite it.

Each service, about and testimonial card has an icon in a tile, and each contact line has one beside it. The icon comes from a class name on the block, so changing it takes a few seconds:

1. Click the icon tile (or the contact line) to select it.
2. In the sidebar, open the Block tab, then Advanced.
3. In Additional CSS class(es), replace the name after unioncorp-icon-- with another from the list below — for example unioncorp-icon--calculator becomes unioncorp-icon--briefcase. Leave the other class, such as unioncorp-card__icon, as it is.
4. Save.

Icons take the palette’s colours, turn over with their tile when a card is hovered, and follow dark mode. They come from Tabler Icons and ship with the theme.

As a visitor scrolls, sections fade in and the statistics count up from zero. It is all automatic.

Statistics that count up

Any heading with the class unioncorp-count counts up the first time it scrolls into view — the four figures in the Statistics section have it already. Change the number and the animation follows. Write it the way it should end up — 9,200, 98% or $2.4m: one number, with any symbols before or after it. A heading with two numbers in it, such as 24/7, simply does not animate. A figure already on screen when the page opens does not count, and screen readers are given the final figure straight away.

The video button

Watch the video in the Why us section opens a YouTube video over the page instead of leaving the site.

1. Click the button, then the Link icon, and paste your video’s YouTube address — a normal link, a youtu.be link or a Shorts link.
2. Save.

Any button can do this: give the Button block the class unioncorp-video under Advanced → Additional CSS class(es) and link it to YouTube. The video plays from youtube-nocookie.com, YouTube’s privacy-enhanced mode. A link that is not YouTube behaves like an ordinary link.

Turning the animations off

Visitors who have asked their phone or computer to reduce motion never see the animations. To switch them off for everyone, add this to a child theme or a small plugin — the video button keeps working:

add_filter( 'unioncorp_enable_scroll_animations', '__return_false' );

The enquiry form is built into Unioncorp — no plugin — and is already on the Contact page.

It asks for a name, an email address, a phone number, a company and a message; the name, email and message are required. It is checked on your server, protected from spam bots by a hidden trap field and a security token, and works with JavaScript turned off. The button reads Request a consultation.

Where enquiries go

Each enquiry is emailed to the Administration Email Address in Settings → General, with the subject [Your site name] Website enquiry. Its reply-to is the visitor, so pressing Reply answers them.

Test it before you launch

1. Open your Contact page in a private browser window, so you see it as a visitor does.
2. Fill in the form with your own email address and click Request a consultation.
3. Check the page thanks you, then check the email arrives — look in the spam folder too.

Put the form on another page

Add a Shortcode block and type [unioncorp_enquiry_form]. To change the button’s words, give it a button: [unioncorp_enquiry_form button="Book a call"]. The form is a shortcode on purpose: it is built fresh each time the page is shown, so it keeps working however the page around it is edited.

For developers: send enquiries somewhere else

Enquiries can go to a CRM, a helpdesk or a webhook instead of email. Add this to a child theme’s functions.php or a small plugin:

add_filter( 'unioncorp_enquiry_handlers', function ( $handled, $enquiry ) {
	// $enquiry has: name, email, phone, company, message
	my_crm_create_lead( $enquiry );
	return true; // handled, so Unioncorp sends no email of its own
}, 10, 2 );

Your phone number, address and email appear in three places. Update all three:

• The top bar of the header — phone number and opening hours — on every page. Edit the Header template part (see below) and type over them.
• The footer’s “Have a question?” column — address, phone and email — on every page. Edit the Footer template part the same way.
• The contact section on the Contact page — address, email and phone beside the form. Edit the page.

Social links

The icons in the top bar and the footer are a Social Icons block, and they link to # until you set them. Click an icon and paste your profile’s address; to remove a network, select its icon and press ⌃ ⌥ Z (Shift Alt Z); to add one, click the block’s +.

The map

The map under the enquiry form is an OpenStreetMap embed, so it needs no API key and no billing account. It is a Custom HTML block. To show your own address:

1. Find your office on openstreetmap.org, right-click it and choose Show address. The latitude and longitude appear at the top of the panel on the left.
2. Click the map block to see its code. In the src address, replace the two numbers after marker= with your latitude and longitude, keeping the %2C between them.
3. The four numbers after bbox= are the edges of the map: west, south, east, north. About 0.005 either side of your point gives a street-level view.

…embed.html?bbox=-74.0170%2C40.6990%2C-74.0070%2C40.7100&layer=mapnik&marker=40.704644%2C-74.011987

Prefer Google Maps? Delete the block, add a new Custom HTML block, and paste the code from Google Maps’ Share → Embed a map.

The header, the footer and the blog’s sidebar are template parts: edit one once and every page follows.

Add your logo

1. Go to Appearance → Editor → Patterns and choose Header.
2. Click the grey logo placeholder beside the site name, and upload your logo or pick it from the Media Library.
3. Drag the handle on the logo’s corner to resize it, then click Save.

The name beside the logo is your Site Title from Settings → General. If your logo already spells out the name, select the title in the header and delete it. Until you add a logo, the placeholder shows only in the editor, never to visitors.

Change the navigation menu

Go to Appearance → Editor → Navigation and open the Primary menu.

• Reorder links with Move up and Move down in the ⋮ menu beside each link.
• Add a link with the + under the list: search for a page, or paste any web address.
• Remove a link from its ⋮ menu. The page itself is not deleted.

On a phone the menu folds into a single button that opens it full screen. That happens by itself.

The header button and the footer

Get started in the header is an ordinary Button block: click it in the Header template part to change its words, and use the Link icon to point it at your Contact page or a booking service. The footer’s description, services list and contact column are ordinary text in the Footer template part; its Recent posts column lists your newest posts by itself.

Colours and fonts are set once for the whole site in Appearance → Editor → Styles. Click Styles, then Browse styles.

Click a palette and the preview changes immediately. Your live site does not change until you click Save, so try as many as you like.

The eight palettes

Every palette was checked before release: body text, secondary text, links and button labels meet WCAG AA contrast on every background the design uses, in light mode and in dark mode.

Why the brand blue is not the link colour

Unioncorp’s bright blue, #4f86f9, is only 3.4:1 against white — too light for text anyone has to read. It is kept as the Accent for decoration, and a deeper blue, Primary, carries buttons, links and icons. The other palettes follow the same rule.

The five font pairings

Unioncorp uses Poppins and Inter, both served from your own site rather than from Google. The typography variations rearrange them:

• Poppins throughout — the default.
• Poppins headings, Inter text — easier on long pages.
• Inter throughout — plainer and more compact.
• Inter headings, Poppins text.
• System fonts — each device’s own fonts, and no font files to download at all.

Change one colour, or undo

To adjust a single colour, open Styles → Colors → Edit palette and click a swatch. Colours are named by job — Primary for buttons and links, Dark for the dark bands, On primary and On dark for text sitting on those grounds — so one change applies everywhere that colour is used. If you darken or lighten Primary or Dark, check the matching On … colour still reads clearly against it.

To undo, click Revisions at the bottom of the Styles panel and go back to any earlier save, or open the ⋮ menu at the top of Styles and choose Reset styles.

The moon at the right of the top bar lets each visitor choose light or dark. It is separate from your palette: dark mode turns the palette you chose over rather than replacing it, so an Emerald site stays green.

• Until a visitor clicks it, it follows their phone or computer’s own light or dark setting.
• Once they click, it remembers their choice on that device.
• It is applied before the page is drawn, so a phone in dark mode never flashes white.

To remove the switch, add add_filter( 'unioncorp_enable_dark_mode', '__return_false' ); to a child theme or a small plugin. To move it, edit the Header template part and drag the button: any Button block with the class unioncorp-scheme-toggle becomes the switch. Put the class on the button itself, not on the Buttons group around it.

A template decides what surrounds a page’s content: the header, a banner, a sidebar, the footer. For a page you choose between three:

• Pages (the default) — a photograph banner carrying the page’s title, above the content.
• Page without title — no banner and no title. Home uses it, because it opens with its own hero.
• Page with sidebar — the content, with the sidebar beside it.

To switch, open the page, click the Page tab in the sidebar, click the template’s name next to Template, and choose Change template.

Posts can use Post with sidebar the same way. The blog, archives, categories, tags, author pages, search results and the 404 page each have their own template — fourteen in all — which you can change in Appearance → Editor → Templates.

Some core blocks gain extra looks. Select the block, open the Styles panel in its settings, and click one.

WooCommerce. Install it and Unioncorp styles it — shop, product pages, cart and checkout take the theme’s colours, fonts and buttons, three products to a row, in light and dark mode. The shop styles load only on shop pages, and nothing at all loads without WooCommerce.

Form plugins. Unioncorp’s own enquiry form needs none, but if you use one it is styled to match: Contact Form 7, WPForms, Gravity Forms, Fluent Forms, Forminator or Ninja Forms. Their fields, buttons and messages take the theme’s look, and the styles load only on a site that has one of them.

Unioncorp is not in the WordPress.org theme directory, so it checks updates.colorlib.com for new versions twice a day. A new version then appears in Dashboard → Updates and on Appearance → Themes, like any other theme, and updates with one click.

The check sends the theme’s version, your WordPress and PHP versions, your site’s language, whether it is a multisite, and an identifier made from your site address with your site’s own secret key. It sends no personal data and no site name, and the identifier cannot be turned back into your address. Two filters control it:

// Stop checking altogether (you will not hear about new versions).
add_filter( 'unioncorp_check_for_updates', '__return_false' );

// Or send only the theme name and version.
add_filter( 'unioncorp_update_payload', function ( $payload ) {
	return array( 'theme' => $payload['theme'], 'version' => $payload['version'] );
} );

Updates change the theme, not your pages. The sections in your pages were copied from the theme when it was activated, so an update improves the header, footer, templates and styles straight away, while changes to the section patterns reach only sections inserted after the update.

Activation built no pages. The site already had more than one page of its own, so Unioncorp left it alone. Insert the Unioncorp: pages layouts into pages of your own, then choose your front page in Settings → Reading.

My front page shows the latest blog posts. Go to Settings → Reading, choose A static page, and pick Home as the homepage.

A button does nothing when it is clicked. It still links to #. Point it at a page — see Buttons and links.

An icon tile is empty, or says “Type / to choose a block”, in the editor. The page was built by Unioncorp 1.1.1 or earlier, where the icon sits inside the paragraph. It still shows on the site; to change it, use Edit as HTML as described in Change an icon, or insert the section again from the patterns.

The statistics do not count up. They were already on screen when the page opened, the visitor has reduced motion turned on, or animations are switched off with the unioncorp_enable_scroll_animations filter. Otherwise, check the heading still has the unioncorp-count class and holds a single number.

The video button leaves the site instead of opening a window. The link is not a YouTube address, or the button has lost its unioncorp-video class.

Enquiries are not arriving. Check the address in Settings → General and your spam folder, then test whether WordPress can send mail at all — most hosts need an SMTP plugin. If WordPress cannot send a password reset, it cannot send an enquiry.

I edited a pattern file in the theme and my page did not change. Pages hold copies of the sections, made when they were built. Edit the page, not the pattern.

I saved, but visitors still see the old version. A caching plugin or your host’s cache is serving a stored copy. Clear it from the plugin’s or host’s settings.