Getting Started 6
How to Install Reign Theme
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.
How to install child theme
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.
How I can get child theme
Which plugins are mandatory for Reign
- Wbcom Demo Installer
- Elementor
- Wbcom Essential
Who should use REIGN theme?
- Membership Sites
- Academic Commons / Learning Management Systems.
- Creative HUBs
- Business & Intranet Solutions
- Non Profit, Cause & Faith-Based, Church Communities.
REIGN Demo Data Installation
As an alternative, you can also download from our GITHUB repo, We have kept demo exporter at the public repo and planning to extend it as a regular plugin which can use for any theme vendor. With this one, you will replace your whole site with a new one like our site in demo. This one is suitable for you if you build a fresh site and want to get demo content. Please note that in this way, all your old data will be replaced. You may need to contact us to get the quickstart for this installation.

- Log into your site as an administrator.
- Make sure you activated your Reign theme before proceeding.
- Go to Dashboard → Theme Installer
- Choose the demo from the list. Click on the import button.
- Install all the required plugins.
- Click on the ‘Install Demo’ button and wait for a minute. You will receive a success message.
- Enjoy!
Do have a look at the below video to understand the full process.
Note :
- Images would not be imported as per copyright. We are giving placeholder images instead of the actual image. You will have to add images manually based upon the requirement.
- User will also not be imported
- We have given a link to our demo websites for some of the menu pages. You can remove or change them from the back end.
Troubleshooting 2
Theme Installation Errors
The Reign theme should install without any errors, although on some occasions people to encounter errors so here are the most common errors and the solutions:
- Your server memory limit to PHP is too low (most common).
- Your upload limit isn’t large enough and you must update your php.ini file to increase the upload_max_filesize value or contact your web host to fix it.
White Screen Of Death or PHP Error Notice
- PHP version 7.2 or greater
- MySQL version 5.6 or greater OR MariaDB version 10.0 or greater
- HTTPS support
- PHP 7.2 or greater
- MySQL 5.6 or greater OR MariaDB 10.0 or greater
- The mod_rewrite Apache module
- HTTPS support
Increasing the WordPress Memory Limit
Some servers (shared hosting plans usually) have a very low limit to PHP by default which can cause a blank screen (white screen of death) or an error on your site. Luckily increasing the memory limit to PHP is very simple and can be done with a small tweak in your wp-config.php file.
Have a look below at how to increase your memory limit or read the documentation on the WordPress CODEX.
Increasing the Memory Limit
Open your wp-config.php file via FTP and add the following code right before it says “That’s all, stop editing! Happy blogging”:
define( 'WP_MEMORY_LIMIT', '128M' );
You can alter the 128MB to the value you want, but 128MB should work pretty well for most live sites.
Topbar FAQ 3
How to configure default TopBar
To configure topbar navigate to the
Dashboard >> Appearance >> Customize >> Desktop 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.
Configure Topbar with Elementor
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?
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
Header Styling 12
Configure Header Layout
Reign Theme has default ready to use header styles.
You can enable anyone of them from customizer settings
Customizing >> Desktop Header >>Layout
Configure Header Menu Color & Font Style
You can find this inside Customize >> Desktop Header >> Main Menu
Primary Menu Font Style – Allows you to select font properties for a primary menu of the 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.
Enable ‘More’ menus wrap in header menu – Allows you to enable or disable ‘More’ menus options for header menu.
Configure Sub Menu Style
You will find the setting inside Customize >> Desktop Header >> Sub Menu
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.
Text Hover Color – Allows you to choose a text hover color.
Background Hover Color – Allows you to choose a background hover color.
Configure Sticky Menu
You can find options at Customize >> Desktop Header >> Sticky Menu
Add Logo at Header
You will find the corresponding option by navigating through
Dashboard >> Appearance >> Customize >> Site Identity.
Configure Menu
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.
Configure Sub Header
You will find the corresponding option at:
Dashboard >> Appearance >> Customize >> 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.
Page Header – Allows you to enable/disable page sub-header at single post type pages.
Enable Header Image – Allows you to enable/disable sub header image at single post type pages.
Sub Header Image – Allows you to select page header image for single custom post type page.
Switch Header Image With Featured Image – This will show post featured image on top header section at single post page and featured image will be removed from post content.
Single cart icon
From reign 2.3.0 you will get more customised cart icon. A single cart for both the products whether it is of WooCommerce or EDD. As, usual you can add the cart icon from
Dashboard >> Appearance >> Customize >> Desktop Header >> Layout >> Manage Icons Options.
Setup Header with product search
You can set header with product search by navigating through
Dashboard >> Appearance >> Customize >> Desktop header >> Layout.
In the layout section select, the fourth layout.
Display register and login icon at header
For displaying register and login icon at header navigate through
Dashboard >> Appearance >> customize >> Desktop Header >> Layout >> Manage Icons Options.
Enable login and register options.
Default header styling
You will find this option inside
Dashboard >> Appearance >> Customize >> Desktop Header >> Layout.
You will find the following option here:
1) Layout – Allows you to select header layout for the header on your site.
2) Background Color – Allows you can choose the background color for your header.
3) Manage Icons Options – Allows you to enable/disable particular icons.
4) Icon Color – Allows you to choose icon color.
5) Icon Hover Color – Allows you to choose icon hover color.
6) Site Title Font – Allows you to select font properties of site-title for your site.
Configure header with Elementor
Add new custom Header:
Step 1: Navigate to Dashboard >> Reign Settings >> Header >> Add New.
Step 2: Name your header 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 header for the website.
Step 7: Now set this header as your website’s header by navigating through
Dashboard >> Appearance >> Customize >> Desktop Header >> Select Header.
Step 8: Enable header type option and select your corresponding header from the drop down, you are all set with your new custom header.
Mobile Panel Settings 3
Mobile Panel Setting
From version 2.3.0 onwards you will get mobile panel setting options. You will now have two mobile panels left and right, you can fully customise those according to your needs.
For doing so navigate through:
Dashboard >> Appearance >> Customize >> Mobile panel settings.
1) Configuration – You will have the following options.
Toggle Content – The content to display in the main toggle bar (only valid for Full-Width toggle bar style). Can contain shortcodes and HTML, including tags. Default: [reign_toggle_title] will print the site title.
Toggle Content Right Edge – This content will appear at the right edge of the toggle bar, to the right of the toggle icon.
Close Icon – When the toggle is open, choose which icon to display.
- Hamburger Bars
- Close button
Toggle Bar Position – Choose Fixed if you’d like the toggle bar to be always visible, or Absolute if you’d like it only to be visible when scrolled to the very top of the page
- Fixed (always in the viewport)
- Absolute (scrolls out of viewport)
Align Text – Allows you to align text left, right, or centre. Applies to inline elements only.
2) Styles – You will have the following options.
Background Color – Allows you to select the background colour of the mobile header.
Transparent Background – Make the toggle bar transparent. Note that this only makes sense if you are using a hamburger-only Toggle Bar Style, or remove the Toggle Bar Gap
Text/Burger Color – Allow you to set the text colour of the toggle bar.
Font Size – Override the default font size of the toggle bar by setting a value here.
Hamburger Size – Size of the hamburger icon in pixels (font size).
Toggle Bar Gap – By default, toggle will automatically determine if a gap is needed – in short, space is left for the full bar toggle, and is not left for a burger-only toggle. If you wish to override this, you can do so here.
First Mobile panel
Reign version 2.3.0 provides you with cool options to style your left and right panel differently as per your choice.
Here, we will discuss first mobile panel options you can find the same by navigation through:
Dashboard >> Appearance >> Customize >> First Mobile Panel.
1) Configuration
Edge– Which edge of the viewport should the first panel appear on left or right.
Indent Always Visible Submenus – Check this to indent submenu items of always-visible submenus.
Display Panel Close Button – Display a × close button in the upper right of the ShiftNav panel.
Submenu Type Default – This submenu type will be used by Menu Item whose Submenu Type is set to “Menu Default”. You have three options here to select from they are listed below:
- Always visible
- Accordion
- Shift
Accordion Toggle Open Icon – The icon that, when tapped, will open the accordion submenu.
Accordion Toggle Close Icon – The icon that, when tapped, will close the accordion submenu.
2) Content
Display Site Title – Enabling or disabling this option will display the site title in the menu panel or not respectively.
Disable Menu – Check this to disable the menu entirely the panel will still be displayed and can be used for custom content.
Top Image – Will display the selected image at the top of first panel menus.
Pad Image – If checked add padding to align the image with menu item text. Uncheck to expand to the edges of the panel.
Image Link (URL) – Make the image a link to this URL.
Custom Content Before Menu – Can contain shortcodes and HTML, including tags. For eg [reign-search] will print the search before the menu.
Custom Content After Menu – Can contain shortcodes and HTML, including tags. For eg [reign-search] will print the search after the menu.
3) Styles – Panel
Skin – You have lots of option to select your desired skin from those.
Panel Background Color – Allows you to set the background color of the first panel.
Panel Default Font Color – The default font color for custom content within the panel (menu-specific styles will override this for menu items).
Panel Title Font Color – The font color for the header/title within the panel.
Panel Title Font Size – The font size for the header/title within the panel.
Panel Title Font Weight – The font weight of the text in the header/title within the panel.
4) Styles – Menu Items
Menu Item Background Color – The color of the menu item background. Normally not necessary to set unless you want it to differ from the panel background.
Menu Item Font Color – The color of the menu item text.
Menu Item Background Color [Active] – The color of the menu item background when activated.
Menu Item Font Color [Active] – The color of the menu item text when activated.
Menu Item Background Color [Current] – The background color of current menu items.
Menu Item Font Color [Current] – The font color of current menu items.
Menu Item Background Color [Highlight] – The background color of highlighted menu items.
Menu Item Font Color [Highlight] – The color of highlighted menu items.
Menu Item Font Size – The size of the menu item text.
Menu Item Font Weight – The weight of the menu item text.
Menu Item Padding – The padding around the menu item text.
Menu Item Top Border Color – The color of the top border of the menu item.
Menu Item Top Border Color [Active] – The color of the top border of an active menu item.
Menu Item Bottom Border Color – The color of the bottom border of the menu item.
Menu Item Bottom Border Color [Active] – The color of the bottom border of the active menu item.
Disable Menu Item Text Shadow – Remove the text shadow on the menu items.
Top Level Menu Item Text Transform – The font size for the header/title within the panel.
Disable Menu Item Borders – Remove the borders between menu items.
5) Styles – Activators & Retractors
Menu Item Activator Button Background – The background color of the button used to open and close the submenus.
Menu Item Activator Button Background [Active] – The active background color of the button used to open and close the submenus.
Menu Item Activator Arrow Color – The arrow color of the button used to open and close the submenus.
Menu Item Activator Arrow Color [Active] – The active arrow color of the button used to open and close the submenus.
Submenu Retractor / Back Button Background – The background color of the submenu retractor button.
Submenu Retractor / Back Button Font Color – The font color of the submenu retractor button.
Submenu Retractor / Back Button Alignment – The alignment of the submenu retractor button text.
6) Styles – Submenus
Submenu Background Color – The background color of the submenu.
Submenu Item Background Color – The background color of the individual submenu items
Submenu Item Font Color – The font color of the submenu items.
Submenu Item Top Border Color – The color of the submenu item top border.
Submenu Item Bottom Border Color – The color of the bottom border of the submenu items.
Submenu Item Font Size – The font size of the submenu items.
Submenu Item Font Weight – The font weight of the submenu items.
7) Styles – Font
Font Family– The font family the panel. This should be a system font or else the font assets should already be loaded on your site, via @font-face or Google Fonts for example.
Second Mobile Panel
Reign version 2.3.0 provides you with cool options to style your left and right panel differently as per your choice.
The second mobile panel has the same options as the first mobile panel with a bit change in the configuration section. However, we have added all here again for ease.
Here, we will discuss second mobile panel options you can find the same by navigation through:
Dashboard >> Appearance >> Customize >> First Mobile Panel.
1) Configuration
Display Menu – Select the menu to display or create a new menu. This setting will override the Theme Location setting.
Theme Location – Select the Theme Location to display. The Menu setting will override this setting if a menu is selected.
Edge– Which edge of the viewport should the first panel appear on left or right.
Indent Always Visible Submenus – Check this to indent submenu items of always-visible submenus.
Display Panel Close Button – Display a × close button in the upper right of the ShiftNav panel.
Submenu Type Default – This submenu type will be used by Menu Item whose Submenu Type is set to “Menu Default”. You have three options here to select from they are listed below:
- Always visible
- Accordion
- Shift
Accordion Toggle Open Icon – The icon that, when tapped, will open the accordion submenu.
Accordion Toggle Close Icon – The icon that, when tapped, will close the accordion submenu.
2) Content
Display Site Title – Enabling or disabling this option will display the site title in the menu panel or not respectively.
Disable Menu – Check this to disable the menu entirely the panel will still be displayed and can be used for custom content.
Top Image – Will display the selected image at the top of first panel menus.
Pad Image – If checked add padding to align the image with menu item text. Uncheck to expand to the edges of the panel.
Image Link (URL) – Make the image a link to this URL.
Custom Content Before Menu – Can contain shortcodes and HTML, including tags. For eg [reign-search] will print the search before the menu.
Custom Content After Menu – Can contain shortcodes and HTML, including tags. For eg [reign-search] will print the search after the menu.
3) Styles – Panel
Skin – You have lots of option to select your desired skin from those.
Panel Background Color – Allows you to set the background color of the first panel.
Panel Default Font Color – The default font color for custom content within the panel (menu-specific styles will override this for menu items).
Panel Title Font Color – The font color for the header/title within the panel.
Panel Title Font Size – The font size for the header/title within the panel.
Panel Title Font Weight – The font weight of the text in the header/title within the panel.
4) Styles – Menu Items
Menu Item Background Color – The color of the menu item background. Normally not necessary to set unless you want it to differ from the panel background.
Menu Item Font Color – The color of the menu item text.
Menu Item Background Color [Active] – The color of the menu item background when activated.
Menu Item Font Color [Active] – The color of the menu item text when activated.
Menu Item Background Color [Current] – The background color of current menu items.
Menu Item Font Color [Current] – The font color of current menu items.
Menu Item Background Color [Highlight] – The background color of highlighted menu items.
Menu Item Font Color [Highlight] – The color of highlighted menu items.
Menu Item Font Size – The size of the menu item text.
Menu Item Font Weight – The weight of the menu item text.
Menu Item Padding – The padding around the menu item text.
Menu Item Top Border Color – The color of the top border of the menu item.
Menu Item Top Border Color [Active] – The color of the top border of an active menu item.
Menu Item Bottom Border Color – The color of the bottom border of the menu item.
Menu Item Bottom Border Color [Active] – The color of the bottom border of the active menu item.
Disable Menu Item Text Shadow – Remove the text shadow on the menu items.
Top Level Menu Item Text Transform – The font size for the header/title within the panel.
Disable Menu Item Borders – Remove the borders between menu items.
5) Styles – Activators & Retractors
Menu Item Activator Button Background – The background color of the button used to open and close the submenus.
Menu Item Activator Button Background [Active] – The active background color of the button used to open and close the submenus.
Menu Item Activator Arrow Color – The arrow color of the button used to open and close the submenus.
Menu Item Activator Arrow Color [Active] – The active arrow color of the button used to open and close the submenus.
Submenu Retractor / Back Button Background – The background color of the submenu retractor button.
Submenu Retractor / Back Button Font Color – The font color of the submenu retractor button.
Submenu Retractor / Back Button Alignment – The alignment of the submenu retractor button text.
6) Styles – Submenus
Submenu Background Color – The background color of the submenu.
Submenu Item Background Color – The background color of the individual submenu items
Submenu Item Font Color – The font color of the submenu items.
Submenu Item Top Border Color – The color of the submenu item top border.
Submenu Item Bottom Border Color – The color of the bottom border of the submenu items.
Submenu Item Font Size – The font size of the submenu items.
Submenu Item Font Weight – The font weight of the submenu items.
7) Styles – Font
Font Family– The font family the panel. This should be a system font or else the font assets should already be loaded on your site, via @font-face or Google Fonts for example.
Theme Styling 11
Configure Color Scheme
You can now make your site more appealing with all new reign color scheme options. From version 2.3.0 onwards you will get palettes of tonal color options to dig from as per your choices.
You will get the option inside:
Dashboard >> Appearance >> Customize >> colors.
Here, you will get the following options to play around.
Color Scheme – Allows you to select the color scheme for your site.
If you don’t want any of the listed options on the color scheme section then you can create your own by following options.
Body Background Color – Allows you to choose a body text color for a site.
Body Text Color – Allows you to choose a body text color for a site.
Sections Background Color – Allows you to choose a sections background color for a site.
Theme Color – Allows you to choose a primary, active color for a site.
Headings Color – Allows you to choose a headings color for a site.
Link Color – Allows you to choose a link’s color for a site.
Link Hover Color – Allows you to choose a hover color for links of a site.
Button Text Color – Allows you to choose a button text color for a site.
Button Text Hover Color – Allows you to choose a button text hover color for a site.
Button Background Color – Allows you to choose a button background color for your site.
Button Background Hover Color – Allows you to choose a button background hover color for your site.
Accent Color – Allows you to choose a color for the links on the content area of the site.
Accent Hover Color – Allows you to choose hover color of the links on the content area of the site.
Border Color – Allows you to choose site border color.
HR Color – Allows you to choose an hr color for a site.
Set Background Image
Set a background image for your site. You will find the option inside
Appearance >> Customize >> Background Image.
Blog Styling
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.
Configure the style of website single pages
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.
Configure Widgets
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.
Homepage Settings
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.
WordPress Login Screen
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.
Additional CSS
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
How to set Favicon, Site Title and Tagline for the website?
For setting favicon, site title and tagline of the website you have to navigate through
Dashboard >> Appearance >> Customize >> Site Identity.
Change Typography
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 Alignment
- Text Transformation
- Color
You will also get a check mark to download font-family to a server instead of using the Google CDN.
You will also get a check mark to download font-family to a server instead of using the Google CDN.
This will be beneficial for the optimisation purpose. Serving Google Fonts from your own server, it is no longer required to make extra requests to Google as your server will be serving CSS and font files itself. This will slightly reduce the page load time. Secondly, you are not reliant on any other site. If google fonts temporarily down, your site would be unaffected.
Note that font-family set from here may not reflect on pages created by Elementor page builder, for those you can set the fonts by navigating through
Dashboard >> Elementor >> Settings >> Style
Layout Settings
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.
Site Container Width – Allows you to set the width of the container that holds the site area ( px or % ). Default is 1170px.
Footer FAQ 2
How To Configure Footer
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.
How to make your custom footer by Elementor page builder plugin and set it as website’s footer?
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.
Additional Settings 3
Creating custom login, register and 404 pages
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.
Where to write custom codes
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.
Member and Group Widget
Create member and group widget on any page by following steps:
Step 1: Navigate to Dashboard >> Pages >> Add New.
Step 2: Enter the title and edit the page via Elementor page builder.
Step 3: Drag and drop Reign members/ Reign Groups widget from the WordPress section.
Step 4: Update the page.
You are all done!
BuddyPress Configuration 6
Avatar Setting
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.
Advanced Settings
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.
Default Group Cover Image
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.
Default Profile Cover Image
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.
Social Media Links
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.
BP Layout Management
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.
BuddyPress Nouveau Options 7
General BP Settings
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.
Group Front Page
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.
Member 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.
Group Navigation
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.
Member Navigation
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.
Loop layouts
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
Directory Layouts
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.
BuddyPress 10
BuddyPress Plugin Features
Much more than just connectivity. A fully featured community, with lots of options to dig from members, groups and activity.
Here I am talking about the most powerful WordPress plugin BuddyPress.
Following are the list of features BuddyPress includes, we will discuss in brief:
1) Profile – One can create and update his profile and as an admin, you can also extend profile by creating new xProfile fields and fields Group.
2) Friend Connections – One can send and receive friend requests.
3) Groups – One can create and join groups, can become an admin of the group and also send invites. BuddyPress also provides a dedicated page for group listing.
4) Activity – One can keep track of activities happening throughout the site. BuddyPress provides separate places for different activities they are as follow:
Sitewide activity stream.
Member activity stream.
Group activity stream.
5) Members – A separate member listing page. An easy way to find and send a request to known or favourites.
6) Messages – Public and private messaging features with inbox, compose, sent and starred messaging options.
7) Notifications – Helps you to keep an eye on important updates.
8) Dynamic member links – Member specific pages.
9) Emails – You can now easily edit the BuddyPress email content.
10) Forums – Fully integrated with a bbPress plugin to give an option of forum discussions.
How to install BuddyPress
You can install plugin in one of two ways:
Automated Installation
Step 1: Navigate to Dashboard >> Plugin >> Add New
Step 2: Search for BuddyPress
Step 3: Install and Activate the plugin.
Manual Installation
Step 1: Download BuddyPress from here.
Step 2: Via FTP upload the plugin inside the wp-content/plugins folder.
Step 3: Navigate to Dashboard >> plugin >> installed Plugins. Activate plugin.
How to add BuddyPress Links for Navigation
There are two types of pages BuddyPress serves, directory pages and member-specific pages.
You can add both to the navigation menus.
Follow below steps to proceed further:
Add directory pages to the menu.
Step 1: Navigate to Appearance >> Menus.
Step 2: Create a new menu.
Step 3: Select the BuddyPress pages from page section.
Step 4: Select the location for the menus from menu settings options.
Step 5: Save the menu.
Add logged-in member specific links to the menu.
Either create a new menu or add these to the menu you already created above.
Step 1: Click on screen option at the top.
Step 2: Select the BuddyPress option.
Step 3: Select the items you want to add to the menu from the BuddyPress section.
Step 4: Click on “Add to menu” button.
Step 5: If you have created a new menu then select display location from Menu settings section.
Step 6: Save Menu.
How to setup BuddyPress
For configuring BuddyPress navigate through
Dashboard >> Settings >> BuddyPress.
You will find three options here, they are as follow:
- Components – Allows you to enable/disable components you want to include.
- Options – Includes different setting options related to BuddyPress such as profile, group and activity settings.
- Pages – Allows you to map BuddyPress pages accordingly.
Let’s discuss these three options in details.
Components
You will find the following options inside it:
- Extended Profiles – Allows you to Configure and customize your community with fully editable profile fields.
- Account Settings – Allow your users to modify their account as per their choice.
- Friend Connections – Allow your members to create friends and expand their circle.
- Private Messaging – Allow your members to share private messages.
- Activity Streams – Global, personal, and group activity streams with threaded commenting, direct posting, favouriting, and @mentions, all with a full RSS feed and email notification support.
- Notifications – Allows your member to receive notification of the activities related to them happening throughout the site depending on the customization of their notification settings.
- User Groups – Allows your users to organize themselves into specific public, private or hidden sections with separate activity streams and member listings in your community.
- Site Tracking – Track and record activity for new posts and comments from your site.
- BuddyPress Core – This is a must-use option and you can not deselect it. It‘s what makes BuddyPress possible.
- Community Members – This one is also a must-use option and you can’t deselect it, everything in a BuddyPress community revolves around its members.
Options
You will find four setting options inside it, here will discuss each one by one briefly:
Main Settings
- Toolbar – Allows showing the Toolbar for logged out users.
- Account Deletion – Selecting this option allows registered members to delete their own accounts.
- Template Pack – Allows you to select BuddyPress template pack.
Profile Settings
Profile Settings
- Profile Photo Uploads – Selecting this option allows members to upload avatars.
- Cover Image Uploads – Selecting this option allows registered members to upload cover images for their profile.
- Profile Syncing – Enable syncing of BuddyPress to WordPress profile.
Groups Settings.
Group Settings
- Group Creation – Selecting this option allows group creation for all users.
Admin can always create groups, no matter what the setting is. - Group Photo Uploads – Allows setting customizable avatars for groups.
- Group Cover Image Uploads – Allows setting customizable cover images for groups.
Activity Settings.
Activity Settings
- Post Comments – Allows activity stream commenting on posts and comments.
- Activity auto-refresh – It automatically checks for new items while viewing the activity stream.
Pages
As all is done let’s proceed towards creating and mapping pages.
Create two pages register and activate by navigating through
Dashboard >> Pages >> Add New >> Register/Activate.
You will notice BuddyPress already made two pages activity and members.
You now just have to map these page here in BuddyPress settings.
- Members: Select members page for member listing.
- Activity Streams: Select the activity page for site-wide activity.
- User Groups: Select groups for group listing.
- Register: Select registration page and allow your members to register to the site.
- Activate: Select activation page.
Now save the settings by clicking the save button.
How many users BuddyPress can support
BuddyPress can handle millions of users. It will add rows to the database without problem, and that database can scale to a very large size.
However, there are things that might have an impact on that. Your hardware will play a big role.
Server requirements for BuddyPress
Following are the minimum server requirements for the BuddyPress:
- PHP version 7.0 or greater.
- MySQL version 5.6 or greater.
- BuddyPress 3.0 supports WordPress 4.5 or greater.
BP avatar uploads will fail without one of these modules activated (WP will simply fail to create image sizes for posts but won’t show an error), so make sure that PHP must have the Imagick or GD modules installed (on the server) to allow re-sizing of images.
For release versions and WordPress version compatibility, give a closer look at the respective links.
How to edit profile
A user can edit their profile by navigating through:
Profile >> Edit
You only have to fill this page based on how many profile field group were set by Admin. For the profile section, you can also change your profile photo and cover image.
How to delete account
Register members can delete their account by navigating through:
Profile >> Settings >> Delete Account.
Make sure you will only get this option if site admin has enabled it.
Account deletion will also delete all the content created by you in the site. Those will be irrecoverable.
How to invite users
Invite Anyone is an ultimate plugin to increase members easily and quickly on your site.
It allows every member to invite their friends by adding send invite tab on user’s profile page.
How to start:
Step 1: Install and activate the plugin by navigating through
Dashboard >> Plugin >> Add New.
Step 2: Manage settings by heading towards:
Dashboard >> Settings >> Invite Anyone.
Step 3: Send invite tab will appear on a user’s profile and single group page when a plugin is activated, allowing users to enter email or selecting from the list respectively to invite their friends.
How to send message
BuddyPress allows you to send Public as well as private messages.
For sending a private message head towards your profile >> messages >> Compose.
Here, select a user name in autocomplete “send to” field, type your message and then click on send message button. All done.
For public messages, you can send the same by mentioning the member with “@” sign then your message anywhere within BuddyPress site it can be sitewide activity, group activity or your own profile page. The user will be notified by notification count and via email as well if enabled.