Skip to content
Docs

Choose page layouts and sidebars

Reign Theme overviewPremiumGet Reign Theme →

Choose page layouts and sidebars

Section titled “Choose page layouts and sidebars”

You will end up with each kind of page laid out the way you want: with a sidebar on the left, the right, both sides, or none, and with widgets in those sidebars. A sidebar is a column beside your main content. A widget is a small block you place in it, such as search, recent posts or a text note.

Before you start

Section titled “Before you start”
  • Decide the width of your site: full width or boxed.
  • Decide which content types need a sidebar. A blog often does. A landing page often does not.
  • Reign sets a right sidebar for every content type by default.

Steps

Section titled “Steps”

1. Set the site-wide width

Section titled “1. Set the site-wide width”
  1. Go to Appearance > Customize > General > Global Layout.
  2. Choose Site Layout: full width or boxed.
  3. Set Site Container Width (default 1170px). If you chose boxed, set Site Box Layout Container Width too.
  4. Set Site Sidebar Width (default 28.125%). This one width applies to every sidebar.
  5. Leave Sticky Sidebar on if you want the sidebar to stay in view as people scroll.

2. Choose a layout for each type of content

Section titled “2. Choose a layout for each type of content”
  1. Go to Appearance > Customize > Content Layouts.
  2. Open the section for the content you want to change:
    • Blog: Archive for your blog listing and category pages.
    • Blog: Single for individual posts.
    • Page: Single for pages.
    • Pages: Search for search results.
  3. Under Layout, pick the picture that matches what you want: left sidebar, right sidebar, both, or full width.
  4. Pick which widget area fills each side in Left Sidebar and Right Sidebar. These only appear when the layout uses that side.
  5. Select Publish.

Plugins that add their own content type, such as events or courses, add their own pair of sections here.

3. Fill the sidebars with widgets

Section titled “3. Fill the sidebars with widgets”
  1. Go to Appearance > Widgets.
  2. Open Right Sidebar or Left Sidebar.
  3. Add blocks such as Search, Latest Posts or Categories, then select Update. Every Wbcom plugin adds its own blocks too, such as BuddyNext’s online members or Learnomy’s course search. Add blocks here, on Appearance > Widgets: the Customizer’s widget screens show classic widget forms, where blocks are not offered.

With WooCommerce active, you also get WooCommerce Right Sidebar and WooCommerce Left Sidebar.

4. Change one page only

Section titled “4. Change one page only”
  1. Open the page for editing. In the settings panel on the right, under the Page tab (select the panel icon at the top right if the panel is hidden), scroll past Move to trash to the Reign Custom Settings box and open its Layout tab.
  2. Set Content Layout to a layout, or leave it on Default.
  3. Use Right Sidebar and Left Sidebar to pick a different widget area for this page.
  4. Select Save at the top right.

Check it worked

Section titled “Check it worked”
  1. Open a post, a page, your blog listing and a search result. Each should show the layout you chose.
  2. Check the sidebar widgets appear on the correct side.
  3. Switch the Customizer preview to phone width and check the page still reads well.

If something looks wrong

Section titled “If something looks wrong”
  • The sidebar is empty. The widget area has no widgets. Add some under Appearance > Widgets.
  • No page title banner. Banners are hidden by default. Turn off Hide Page Sub Header under Page: Single, and check Sub Header > Hide Sub Header is off.
  • Sidebar position pickers are missing. The Left Sidebar and Right Sidebar pickers appear only when the layout uses that side.
  • One page ignores my choice. Check that page’s own Content Layout under Reign Custom Settings (step 4). It may be set to something other than Default.

Reign Custom Settings reference

Section titled “Reign Custom Settings reference”

The Reign Custom Settings box appears when you edit a post, a page or any public custom content type, such as events or courses. Find it in the editor’s right-hand settings panel under the Page or Post tab, below Move to trash. It has two tabs, Layout and Subheader. Settings here apply to this one item only.

A few fields appear on pages only. They are marked below.

Layout tab

Section titled “Layout tab”
Field Default What it does
Display Page Title (pages only) Ticked Shows the page title at the top of the page content. Untick to hide it.
Hide Left Panel Menu (pages only) Default Default follows your Customizer left panel setting. Yes hides the left panel on this page. No shows it even if it is turned off site-wide.
Content Layout Default Picks the page layout. Options are below.
Right Sidebar Default The widget area for the right column. Lists every widget area on your site.
Left Sidebar Default The widget area for the left column. Lists every widget area on your site.

Content Layout options:

  • Default: follow the layout set in the Customizer for this content type.
  • Right Sidebar: content with a sidebar on the right.
  • Left Sidebar: content with a sidebar on the left.
  • Both Sidebars: a sidebar on each side.
  • Full Width: no sidebars; the content uses your site’s normal content width, with the page title banner.
  • Full Width( No Subheader ): the same, without the title banner.
  • Stretched View: no sidebars and no width limit; the content runs to the edges of the screen, with the title banner. Good for pages built from full-width sections.
  • Stretched View( No Subheader ): the same, without the title banner.

Subheader tab

Section titled “Subheader tab”

The subheader is the title banner at the top of a page. These fields take effect only when Overwrite Subheader Customizer Settings is ticked. Without it, the page uses your sub header Customizer settings.

Field Default What it does
Overwrite Subheader Customizer Settings Unticked Turns on the fields below for this item.
Subheader Height (px) 286 Banner height in pixels.
Subheader Background Color #555555 Banner colour behind the image.
Subheader Overlay Color rgba(38,38,38,0.6) Tint over the banner image.
Subheader Text Color #ffffff Colour of the banner title.
Subheader Link Color #ffffff Colour of the breadcrumb links.
Subheader Breadcrumbs Ticked Shows or hides the breadcrumb trail.
Display Header Image with Featured Image (pages only) Unticked Uses the page’s featured image as the banner image.
Subheader Banner Image none Choose a banner image with Add Subheader Banner Image. Ignored when the featured image option above is ticked.
Section titled “Related”