You can install the theme automatically or manually. It’s better to install Reign on a fresh WordPress installation.

Manual Installation

Extract the zipped package downloaded from Wbcom Designs to your desktop. In the extracted package you will find reign-theme.zip which is the WordPress theme file.
You can install the theme one of two ways:

WordPress

Navigate to Appearance > Themes in your WordPress administration panel.
Click the Add New button at the top of the page.
Click the Upload theme button at the top of the page.
Select the theme .zip file in the theme package downloaded from Wbcom Designs and click Install Now.

FTP

Connect to your website host using your FTP client.
Go to your default WordPress themes folder (/wp-content/themes/) and upload the non-zipped theme folder into that folder (/wp-content/themes/).
Activation
After uploading the theme, you must preview and activate it.

Missing stylesheet issue

While installing the theme manually, you may see the “The package could not be installed. The theme is missing the style.css stylesheet.” message.

Don’t worry. If you see this message, it means you’ve uploaded a wrong theme’s file (actually, you’re trying to upload the main theme’s file containing the theme, its plugins, documentation, etc.)

Please, open this .zip file, find the theme’s .zip file in it, and use it instead.

Download the Reign Child theme

Before making changes to the theme code, we recommend that you install a child theme. This ensures that your changes won’t be lost when updating to a new version of Reign.

Not sure how child themes work or why you should use one? We have a blog post in our archives that might help clarify things!

• Download and install the theme
• Start by downloading the Reign child theme.
• Navigate to Appearance → Themes and click ADD NEW.
• Click UPLOAD THEME.
• Click BROWSE and choose the file you just downloaded, then click INSTALL NOW.
• Once it is installed, click ACTIVATE.

WordPress considers a child theme to be an entirely separate theme from the parent with regard to theme options. If you have configured options for the parent theme in the Customizer before installing the child theme, these options will not carry over to the child. You can either configure the options again for the child theme or try to migrate the theme options.

1. BuddyPress (recommended)
   
2. Elementor (recommended)
   
3. Wbcom Essential (optional only if your are willing to use elementor page builder)
4. BP Create Group Type (optional with BuddyPress )
5. BuddyPress Activity Social Share (optional with BuddyPress )
6. WordPress Social Login (optional with BuddyPress )
7. bbPress and rtMedia for WordPress (optional with BuddyPress )
8. bbPress ( recommended )

To configure topbar navigate to the

Dashboard >> Appearance >> Customize >> Header >> Top Bar.
You will have the following options:

Enable Topbar – Allows you to enable or disable topbar for your site.

Disable Topbar on mobile view – Allows you to disable topbar for your site on mobile view.

Topbar Type – Allows you to select default theme topbar or topbar made using Elementor.

Info Links – Allows you to add the link title, link URL and an icon. Fontawesome classes are used to set icons. Check https://fontawesome.com/ for further assistance.

Social Links – Allows you to add the social link title, social link URL and an icon. Fontawesome classes are used to set icons. Check https://fontawesome.com/ for further assistance.

Background Color – Allows you to choose a background colour for topbar.

Text Color – Allows you to choose a text colour.

Text Hover Color – Allows you to choose a text hover colour.

We also give you an option to create custom topbar with Elementor, To create a top bar with Elementor refer next point.

We have added default topbar designs and you can easily create new and use it from customizer settings.

Add new Elementor Topbar Designs:

Step1: Navigate to Reign Settings >> Header.

Step 2: Create a New Header.

Step 3: Select Header Type as Topbar.

Step 4: Publish once and start editing as Elementor.

Step 5: Save your design changes and it will be available inside customizer to set as global topbar for all pages.

Step 6: Save you design changes and it will be available inside customiser to set as global topbar for all pages.

How to change separator of topbar?
For changing separator of topbar, you have to apply following custom CSS code inside
Dashboard >> Appearance >> Customize >> Additional CSS

.reign-header-top .header-top-left span {
border: none;
}
.reign-header-top .header-top-left span:not(:first-child):before {
content: “*”;
padding-right: 10px;
}

You can change the value of content accordingly. Here you can also set a font awesome icon by placing the icon’s Unicode inside content value. You will get the Unicode by visiting the following link:
https://fontawesome.com/icons

Reign Theme have default ready to use header styles.

You can enable anyone of them from customizer settings

Customizing ▸ Header >>Layout

You can find header Customizing ▸ Header >> Main Menu

Primary Menu Font Style – Allows you to select font properties for primary menu of site.

Text Hover Color – Allows you to choose a text hover color.

Text Active – ColorAllows you to choose a text active color.

Background Hover Color – Allows you to choose a background hover color.

Background Active Color – Allows you to choose a background active color.

Background Color – Allows you to choose a background color for sub menu.

Sub Menu Font – Allows you to select font properties for sub-menu of site.

Select Font Family with Variant

It also allows to download font-family to server instead of using the Google CDN.

You can find options at Customizing ▸ Header >> Sticky Menu

You can find the corresponding options at Customizing ▸ Header >> Mobile Menu

You will find the corresponding option by navigating through

Dashboard >> Appearance >> Customize >> Site Identity.

You will find the corresponding option at:

Dashboard >> Appearance >> Customize >> General >> Sub Header

You will find the following options:
Sub Header Height (px): Allows you to set the height of subheader in pixels.
Header Image Background Color – Allows you to set the background colour of the header image section. Note that this will only reflect if there is no image.
Header Image Overlay Color – Allows you to set the image overlay colour.
Header Image Text Color – Allows you to set the text colour of the header image section.
Enable Breadcrumb – Allows you to enable or disable the breadcrumb option.

To setup default color scheme for website

Customizing >> Colors

Set a background image for your site. You will find the option inside
Appearance >> Customize >> Background Image.

For blog page styling simply head towards
Dashboard >> Appearance >> Customize >> Blog.

There are two options for blog styling listed below:
1) Styling blog archive page:

• Layout – Allows you to choose a layout for all archive pages.
• Visibility for header image – You have an option to enable and disable the same.
• Blog Header Image – Allows you to set page header image for a blog page.
• Blog Listing Layout – Select your log listing layout here. We have the option to choose from 4 different views.
• Excerpt Length (words) – Set the number of words you want to show as an excerpt.

2) Styling single blog page:

• Layout – Allows you to choose a layout for all single post pages.
• Visibility for page header – Allows you to enable or disable the header from single post pages.
• Visibility for header image – You have an option to enable and disable the same.
• Page Header Image – Allows you to set page header image for single post page.
• Switch header image with a featured image – This will show post featured image on top header section and featured image will be removed from post content.
• Post Meta Alignment – Select alignment for post-meta information on a single post page.

For single page styling simply head towards Dashboard >> Appearance >> Customize >> Page >> Single. You will have the following option:

• Layout – Allows you to choose a layout to display for all single post pages.
• Hide Page Header – Allows you to hide page header for this post type.
• Enable Header Image – Allows you to enable or disable the header image.
• Page Header Image – Allows you to set page header image for single post page.

You can configure the menu from either of the following locations:
Dashboard >> Appearance >> Customize >> Menu. or
Dashboard >> Appearance >> Menu.

Here we are exploring the first option:

Settings (You will find the settings icon beside the menu heading), you will have the following option inside settings.
Show advanced menu properties: You find following options as soon as you checkmark these options these will display inside each menu to set accordingly.
Link Target
Title Attribute
CSS Classes
Link Relationship (XFN)
Description
Create a new menu: You can create a new menu by giving a name and by specifying the display location.
Menu Locations: Your theme can display menus in 2 locations primary and user profile, you can set the same from here.

You can configure the widgets from either of the following locations:
Dashboard >> Appearance >> Customize >> Widgets. or
Dashboard >> Appearance >> Widgets.

Here we are exploring the first option:
Here widgets will display according to the page you are currently viewing you will see the following message:
“Your theme has 6 other widget areas, but this particular page doesn’t display them. You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages”.
Now you can add your desired widgets at a particular location by “Add new widgets” option.

You can configure the homepage settings from either of the following locations:
Dashboard >> Appearance >> Customize >> Homepage Settings. or
Dashboard >> Settings >> Readings.
Here we are exploring the first option:
You will get two options
Your latest posts.
A static page.
You can choose the content of the homepage of your site from above two options. It can be the list of posts in reverse chronological order (classic blog), or a fixed/static page. To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

A theme also provides an amazing option for styling your default WordPress login screen you can find the option inside:

Dashboard >> Appearance >> Customize >> WordPress Login Screen.

Custom Logo: Select custom logo to replace default WordPress logo.
Background Image: Select image to set as background image.
Login Screen Background Color: Select colour to set as a background colour.
Login Form Background Color: Select colour to set as a background colour for the login form.
Login Form Text Color: Select colour to set for text in Login Form.
Login Form Button Color: Select colour to set for button colour in Login Form.
Custom CSS: In case you need any custom CSS to apply on Login Screen, write it here.

You can find the corresponding option at:

Dashboard >> Appearance >> Customize >> Additional CSS

Here you can add your own CSS code here to customize the appearance and layout of your site. Learn more about CSS

For setting favicon, site title and tagline of the website you have to navigate through

Dashboard >> Appearance >> Customize >> Site Identity.

You will find the corresponding option inside

Dashboard >> Appearance >> Customize >> General >> Typography.

You will find the following options:
Body Font
Heading H1- Heading H6
For all the above seven elements you will get the following options to change accordingly.

• Font Family
• Variant
• Font Size
• Line Height
• Letter Spacing
• Text Align
• Text Transform
• Color

You will also get a check mark to download font-family to a server instead of using the Google CDN.

You will find the corresponding option at:

Dashboard >> Appearance >> Customize >> General >> Layouts

You will find the following options:
Pre Content Loader – You have the option to enable or disable the same, it will allow you to show loader before loading content.

Site Layout – Allows you to select full-width or Boxed-layout.

Sticky Sidebar – Allows you to enable or disable the sticky sidebar.

You will find the corresponding option at:

Dashboard >> Appearance >> Customize >> Footer.

Here you will find the following options:

1) Select Footer

Footer Type: Allows you to select default theme footer or footer made using Elementor.
If you enable the option “Elementor Footer” then you will get the drop-down “Select Footer” listing Elementor footers so that you can select it from.

2) Settings

You will find following styling option inside it note that these are only applicable if you are using default theme footer.
Background Color – Allows you to change the background color of a footer.
Widget Title Color – Allows you to change the widget title color of a footer.
Text Color – Allows you to change the text colour of footer.
Link Color – Allows you to change the link color.
Link Hover Color – Allows you to change the link hover color.

3) Copyright

Here you will get the following options
Enable Footer Copyright – Allows you to enable or disable the option.
Copyright Text – Allows you to write the text you want to display.
Alignment – Allows you to align the text center, left or right.
Padding – Here you can set the top, right, bottom, left padding accordingly.
Background Color – Allows you to set the background colour of copyright section.
Text Color – Allows you to set the text colour of copyright text.
Link Color – Allows you to set the link colour if any in copyright text.
Link Hover Color – Allows you to set the link hover colour of copyright text.

Add new custom Footer:

Step 1: Navigate to Dashboard >> Reign Settings >> Footer >> Add New.

Step 2: Name your footer and click the publish button.

Step 3: Now pressing on Edit with Elementor button will redirect you to the page builder.

Step 5: Add your elements, You are done with your job by simple drag and drop of widgets. There are multiple options to select widgets from for example Brading, Social icons, Nav menu and many more.

Step 6: Save your design changes and it will be available inside customizer to set as a global footer for the website.

Step 7: Now set this footer as your website’s footer by navigating through
Dashboard >> Appearance >> Customize >> Footer >> Select Footer.

Step 8: Enable Elementor footer option and select your corresponding footer, you are all set with your new custom footer.

Step 1: Head towards Dashboard >> Pages >> Add new.
Step 2: Name the page and publish.
Step 3: Now edit the page using Elementor page builder.
Step 4: Design the page as per requirements and place the login/register widget at the desired location. You will find the widget inside wbcom elements sections.
As far as 404 page is a concern you can make the same using regular title and button widgets.
Step 5: Updated the page.
Step 6: Assign the page by navigating to:
Dashboard >> Customize >> General >> Page Mapping.
Now select the specific page at respective drop downs and you are done with your custom pages.

You will find the corresponding option inside
Dashboard >> Appearance >> customize >> General >> Custom Codes
Here, you will find the following options:
Tracking Code: You can enter your tracking codes here. This code will be enqueued in the site header. For example Google Tracking Code, Facebook Pixel Code, etc.
Custom JS: Header: Just want to do some quick JS changes? Enter them here, they will be applied to your theme.
Custom JS: Footer: Just want to do some quick JS changes? Enter them here, they will be applied to your theme.

You will find the corresponding option inside:
Dashboard >> Reign Setting >> BuddyPress Setting >> Avatar Setting
You will find the following options inside it:
Avatar Thumb Size: Changes user and group avatar to selected dimensions in an activity, members and group lists.
Avatar Full Size: Changes user and group avatar to selected dimension in user and group header.
Avatar Max Size: Changed maximum image size a user can upload for avatars.
Default User Avatar: Upload an image that displays before a user has added a custom image.
Default Group Avatar: Upload an image that displays before a custom image is added to a group.

You will find the corresponding option inside:
Dashboard >> Reign Setting >> BuddyPress Setting >> Advanced Setting
You will find the following options inside it:
Member Per Page: Here you can manage the number of members to show per page.
Group Per Page: Here you can manage a number of groups to show per page.
Select xProfile Field: Here you can select an xprofile field to show on member cover image header.
Root Profiles: Remove members slug from profile URL.
Auto Group Join: Disable auto join when posting in a group.
LDAP Usernames: Enable support for LDAP usernames that include dots.
WYSIWYG Textarea: Removes text editor form text area profile field.
All members Auto-Complete: Auto-complete all members instead of just friends in messages.
Profile Fields Auto-Link: Disable auto-linking in profile fields.
User @ Mentions: Disable user @ mentions.
Ignore Deprecated Code: Do not load deprecated code.

You will find the corresponding option inside:
Dashboard >> Reign Setting >> BuddyPress Setting >> Default Group Cover Image
You will find the following options inside it:
Select Image: Select image to set as default group cover image here.
Select Image Size: Select image size for default group cover image here.

You will find the corresponding option inside:
Dashboard >> Reign Setting >> BuddyPress Setting >> Default Profile Cover Image
You will find the following options inside it:
Select Image: Select image to set as default profile cover image here.
Select Image Size: Select image size for default profile cover image here.

You will find the corresponding option inside:
Dashboard >> Reign Setting >> BuddyPress Setting >> Social Media Links
Here you can add your social media site’s URL and upload a respective icon.

You will find the corresponding option inside:
Dashboard >> Reign Setting >> BuddyPress >> BP Layout Management
Here you will find the following options:

Select Header Position: Allows you to select a header position. A user also has an option to edit the same, in that case, it will be overridden.

Select Member Header Layout: Allows you to select member header layout. A user also has an option to edit the same, in that case, it will be overridden.

Select Group Header Layout: Allows you to select a group header layout.

Select Member Directory Layout: Allows you to select member directory layout.

Select Group Directory Layout: Allows you to select a group directory layout.

You will find the corresponding option inside:

Dashboard >> Appearance >> Customize >> BuddyPress Nouveau >> General BP Setting.
You will get an option to Configure general BuddyPress appearance ie you can use the round style for member and group avatars.

You will find the corresponding option inside:

Dashboard >> Appearance >> Customize >> BuddyPress Nouveau >> Group Front Page.

Here you will get the following options to configure the default front page for groups.

• Enable or disable custom front pages for groups.
• Enable or disable widget region for group homepages. When enabled, the site admin can add widgets to group pages via the Widgets panel.
• Display the group description in the body of the group’s front page.

You will find the corresponding option inside:

Dashboard >> Appearance >> Customize >> BuddyPress Nouveau >> Member Front Page.
Here you will get the following options to Configure the default front page for members.

• Enable or disabel default front page for member profiles.
• Display the biographical info from the member’s WordPress profile.

You will find the corresponding option inside:

Dashboard >> Appearance >> Customize >> BuddyPress Nouveau >> Group Navigation.
Here you will get the following options to customize the navigation menu for groups. You can see your changes by navigating to a group in the live preview window.

• Display the group navigation vertically.
• Use tab styling for primary navigation.
• Use tab styling for secondary navigation.
• Use tab styling for the group creation process.

NOTE: Customizing the Groups navigation order needs you to create at least one group first.

You will find the corresponding option inside:

Dashboard >> Appearance >> Customize >> BuddyPress Nouveau >> Member Navigation.
Here you will get the following options to customize the navigation menu for members. In the preview window, navigate to a user to preview your changes.

• Display the member navigation vertically.
• Use tab styling for primary nav.
• Use tab styling for secondary nav.
• Also Allows you to drag each possible member navigation items into the order preferable order.

You will find the corresponding option inside:

Dashboard >> Appearance >> Customize >> BuddyPress Nouveau >> Loop layouts.
Here you can set the number of columns to use for BuddyPress loops listed below:

• Members
• Member > Friends
• Groups
• Group > Members

You will find the corresponding option inside:

Dashboard >> Appearance >> Customize >> BuddyPress Nouveau >> Directory Layouts.
Here you can select the layout style for directory content & navigation(option are listed below):

• Use column navigation for the Members directory.
• Use tab styling for Members directory navigation.
• Use column navigation for the Activity directory.
• Use tab styling for Activity directory navigation.
• Use column navigation for the Groups directory.
• Use tab styling for Groups directory navigation.