First configuration

A new Reign site needs about ten decisions. This is them, in the order that makes each one easier than the last. Everything here is in Appearance > Customize, or the Customize button in Reign Settings.

Reign keeps some older options for sites that have used them for years. Those are marked legacy in the Customizer and sit below the recommended ones. On a new site you can ignore every one of them.

1. Site Identity

Customize > Site Identity

Upload your Logo and set Logo Size. Add a Site Icon, which is the image browsers show in tabs and bookmarks.

The mobile logo is separate and comes later, in the Header step.

2. Colour palette

Customize > Color Options > Color Palette

Pick a palette. This sets your colours across the whole theme in one move, and for most sites it is the only colour decision you need to make.

Resist hand-picking individual colours. Reign has a section for that, with several hundred controls, and anything you set there overrides the palette at that spot. Use the palette first, then override only what genuinely needs it.

See the colour system.

3. Light and dark mode

Customize > Color Options > Light & Dark Mode

Turn on the light and dark switch to give visitors a toggle. Set the default mode, which can follow the visitor’s device, and where the switch sits.

4. Header

Customize > Header

Five sections, and they are worth doing in this order:

• Layout. The header style and menu hover behaviour.
• Topbar. The thin strip above the header. Turn it on and add info links and social links. Info links show first.
• Sticky Menu. Turn on sticky-on-scroll, then set the colours used once the header sticks. A sticky header that keeps its transparent styling is the most common cause of an unreadable menu on scroll.
• Mobile Menu. The mobile header layout, plus a separate mobile logo and size if you want one.
• Left Panel. An optional slide-in panel, grouped into behaviour, size and spacing, icon, and menu text. Its colours come from your palette rather than from this section.

5. Typography

Customize > Typography

Start with Font Presets, which sets the heading and body faces and the scale together, and is one decision instead of twenty.

If you need more control, Individual Fonts sets the body font, each heading level, the menu and blockquotes separately.

6. Content layouts

Customize > Content Layouts

Sections here are generated per content type, so you will see Blog: Single, Blog: Archive, Page: Single, Pages: Search, and one pair for every custom post type your plugins register.

For each, choose the layout and whether it has a left or right sidebar.

Two that catch people out:

• Hide Page Sub Header controls the page-title banner, and it is on, meaning hidden, by default. Turn it off to show the banner.
• For a grid blog layout, pick the grid listing layout first. Only then does Blogs Per Row become available.

7. Sign-in and register popup

Customize > General > Sign-in & Register Popup

Optional. Turn on the popup, choose whether it offers login, register or both, and set redirects and labels.

If BuddyPress is active, the register fields come from BuddyPress > Profile Fields, not from the theme. Editing them here will not change what the popup shows.

8. Footer

Customize > Footer

Footer Area covers the widget area’s typography and spacing. Copyright covers the bottom bar text, alignment and colours.

9. Branded login screen

Customize > Branded Login & Register

Optional, and worth doing on a membership site where people see the login screen often. It restyles wp-login.php: logo, background, form and button.

10. Finishing touches

Customize > General > Global Layout

Container widths, the global corner radius applied to buttons and forms, the scroll-up button, and an optional site loader.

Then check it

Load the front end and look at the header, a blog archive, a single post and a page, at desktop and at phone width. Most first-pass mistakes show up in the header on a phone.

If a change does not appear, see styles not applying.