logo-template

Vikinger - BuddyPress Social Community

Introduction

Thank you for buying the Vikinger - BuddyPress Social Community theme. This documentation includes information on how to install and customize the theme and its various features and plugins.

If you want to check out all our other designs or if you have questions, just send us a comment through our profile page or follow our social accounts:



Once again, thanks for purchasing our theme. If you enjoy our items, please don't forget to rate them!.

React

We used React to make several parts of the template more dynamic, allowing users to interact with these parts without having to wait for a page reload, improving user experience. For example, a user can filter activities, add them to his favorites or pin it, react and comment on it, all without a single page refresh.

This also means that certain plugins or addons that may work out of the box with the default WordPress, BuddyPress or GamiPress, may not work without us adding support for them for our theme.

Video Tutorials

We created a lot of video tutorials that you'll find linked throughout the documentation in their respective sections. We hope that you find these useful when installing and customizing every theme related functionality. You can access the full playlist here.

Hosting & Speed

This being a social community, lots of people ask us about speed. Our theme is speed optimized, and we always keep optimizing it further, but speed will also greatly depend on your hosting.
From the live preview of the theme, you can see that the feeds and content loads pretty fast. We’ve been asked multiple times about the hosting/service that we use, so here it is:

  • Hosting Provider: Hostinger

  • Service: Cloud Startup

Please keep in mind that it will always depend on the scale of your project, so we strongly recommend talking with them in order to see what service will suit your needs.

Custom Services

Recently, lots of you asked us for customization services. Sadly, due to recent events (pandemic) we can't take any custom jobs due to lack of time as our team got smaller and it's already stretched thin.

Keeping in mind that due to Envato's Support Policy, our support team can't help with customizations or answer questions about them (we always try to help in any way we can, but keep in mind that personal and further customizations fall outside the support scope due to Envato's rules) we recently reached out to a couple of highly rated devs, so if you want, you can check them out here:

WordPress Customization

Here's also a list of illustrators and graphic artists:

Badges/Credits/Ranks Illustrators

We encourage you to first send them a message asking about what you need and they will advice you. You can also check out past reviews of people who already worked with them!

You can always recheck this list as we’ll keep updating it with new artists and developers.

How to Install

The theme installation process consists of two steps:

  • 1. Installing the Theme, either via a) upload or b) manual method.

  • 2. Installing Required Plugins for the Theme.

1. Installing the Theme

There are two ways to install the theme. You can either install it manually or by using the WordPress upload functionality.

a) Upload Install

To install the theme using this method you need to follow these steps:

  • Go to your WordPress administration panel.

  • Select the Appearance menu.

  • Click on the Add New button on the top left.

upload-install-01
  • Click on the Upload Theme button on the top left.

upload-install-02
  • Click on Choose File, select the vikinger.zip theme file that is inside the package Theme/ directory.

upload-install-03 upload-install-04
  • Click on Install Now and the theme installation will start.

upload-install-05 upload-install-06
  • The installation will finish and the plugin will now show in the Appearance menu, from where you can activate it.

upload-install-07 upload-install-08

b) Manual Install

To install the plugin using this method you need to follow these steps:

  • Go to the package Theme/ directory.

  • Copy the vikinger/ folder and paste it in your WordPress installation /wp-content/themes/ directory.

  • Go to your WordPress admin panel and open the Appearance menu. The Vikinger theme will appear on the list.

2. Installing Required Plugins

The theme requires several plugins to work correctly. To make the process of installing, activating and upgrading all required plugins easier, we created a one click installer that does this for you:

  • After activating the theme, a Vikinger menu will appear on your WordPress admin panel, click it.

  • On this screen, you can view the status of the theme setup process, the required plugins and a button on the bottom that you can use to fix any missing plugin installs, activations or updates.

theme-setup-01
  • The setup status will tell you that something is wrong because we haven't installed any of the required plugins yet. If you already have any of the required plugins installed, activated and updated to the latest version, a checkmark will appear next to it.

  • Click on the Install / Activate / Update button to complete the setup. Please be patient as the process may take a few minutes

theme-setup-02
  • When the process completes, if all plugins where successfully installed, activated and updated, the new setup status will say that everything is ok. It can happen that a plugin failed to install, activate or update, in this case you can use the same button to try again and complete the setup.

theme-setup-03 theme-setup-04 theme-setup-05 theme-setup-06
  • That's it, the theme installation is complete!. Next, you need to configure some of the installed plugin options, go to the Theme Setup section of this documentation and follow the setup guide.

Theme Setup

After installing the theme, you need to configure some plugin options to ensure the correct functionality of the included features.

If you haven't installed the theme yet, please refer to the How to Install section of this documentation before proceeding.

BuddyPress

The following configuration changes need to be made for this plugin:

  • 1. Change WordPress permalink structure.

  • 2. Add BuddyPress Components.

  • 3. Change BuddyPress Template Pack.

1. Change WordPress permalink structure

  • Go to Settings -> Permalinks on your WordPress admin panel.

  • Select Post Name under Permalink Settings and click on Save Changes.

permalink-01

2. Add BuddyPress Components

  • Go to Settings -> BuddyPress on your WordPress admin panel.

  • Select the components so you have the same as on the screenshot below and click on Save Settings.

buddypress-components-01

3. Change BuddyPress Template Pack

  • Go to Settings -> BuddyPress on your WordPress admin panel.

  • Select the Options tab.

  • Change the Template Pack to BuddyPress Legacy and click on Save Settings.

buddypress-template-pack-01 buddypress-template-pack-02
  • Select the Pages tab and check that you have the same pages assigned as on the screenshot below.

buddypress-template-pack-03
  • That's it, you finished the setup process and can now start using and customizing your theme!.

Demo Import

We created a demo content import page so you'll be able to import all the menus, pages and profile fields that you see in the live demo and more!

First of all, make sure to follow the steps of the "How to Install" and "Theme Setup" sections. After this you'll have two options:

  • 1 - Customize the theme the way you want, adding your sections, menus, etc, following the steps of each of the documentation sections (Theme Customization, Menus, etc) and the video guides. This is better for people that want to start from zero and customize everything.

  • 2 - Import content from the demo. You'll find the import screen inside the theme, in the "Demo Import" tab. There, you'll be able to choose what elements to import, or even reset them. We developed this so you can import all, or just choose the elements that you'd like to add.

    Please keep in mind that this tool doesn't import the Elementor and GamiPress plugin specific demo content data (including all badges, quests, ranks and credits with the illustrations) because they are imported via each plugin. You can import the plugin specific demo content data by following the steps in the "Elementor" and "GamiPress" / "Demo Content" sections of the documentation.

Check out this video guide where you can see the entire process, from installing and configuring the theme, to importing all content to make it look like the live demo:

After this, as we mentioned before, you only need to install the Elementor demo content and customize all other elements (menus, pages, etc) any way you want! Take a look at other sections of the documentation to see how to edit each one!

Site Identity

You can customize theme options by using the WordPress Customizer. To access the Customizer, open your site and click on Customize on the WordPress top bar.

customizer-01 customizer-02

Click on the Site Identity customizer section to access it.

site-identity-01 site-identity-02

From here, you can customize the following theme options:

  • Logo: this image appears on the header to the left of the Site Title and on the Loading Screen.

  • Site Title: this text appears on the header and footer of the theme.

  • Tagline: this text appears below the Site Title on the footer of the theme.

  • Site Icon: this image appears in browser tabs, bookmark bars, and within the WordPress mobile apps.

Widgets

We created 3 custom widgets for the theme that you can use on the post page sidebars:

  • (Vikinger) Posts Grid: usable in the (Vikinger) Blog Post Bottom Sidebar.

  • (Vikinger) Mixed Posts List: usable in the (Vikinger) Blog Post Sidebar.

  • (Vikinger) Posts List: usable in the (Vikinger) Blog Post Sidebar.

(Vikinger) Posts Grid

posts-grid-01

This widget can be customized by using the following options:

  • Pre Title: text that shows before the Title.

  • Title: title of the widget.

  • Post Count: how many posts to show in the grid.

  • Show: type of posts to show in the grid. One of: Popular, Newest, Related

  • Related By: criteria that determines if posts are related, has effect only if Related was selected in the Show option.

(Vikinger) Mixed Posts List

mixed-posts-list-01

This widget can be customized by using the following options:

  • Title: title of the widget.

  • Select Post Tabs to show: each tab will display the type of posts indicated in the option, select at least 1.

  • Post Count: how many posts to show on each tab.

  • Related By: criteria that determines if posts are related, has effect only in the Related tab option.

(Vikinger) Posts List

posts-list-01

This widget can be customized by using the following options:

  • Title: title of the widget.

  • Post Count: how many posts to show in the list.

  • Show: type of posts to show in the list. One of: Popular, Newest, Related

  • Related By: criteria that determines if posts are related, has effect only if Related was selected in the Show option.

Sidebars

We created 2 custom sidebars for the theme that you can use to display widgets:

  • (Vikinger) Blog Post Bottom Sidebar: used in Version 1 post pages. Refer to the Blog -> Post Versions section for more information.

  • (Vikinger) Blog Post Sidebar: used in Version 2 and Version 3 post pages. Refer to the Blog -> Post Versions section for more information.

Adding Widgets to the Blog Post Bottom Sidebar

While viewing a version 1 post page, click on the Widgets customizer section to access it (You can also edit the sidebars widgets from the WordPress admin panel, Appearance -> Widgets menu).

blog-post-bottom-sidebar-01

The (Vikinger) Blog Post Bottom Sidebar sidebar will be available for selection:

blog-post-bottom-sidebar-02 blog-post-bottom-sidebar-03

From here, you can add, edit or remove the widgets assigned to this sidebar. Please refer to the Widgets section of this documentation ror more information about which custom widgets this sidebar supports.

Adding Widgets to the Blog Post Sidebar

While viewing a version 2 or 3 post page, click on the Widgets customizer section to access it (You can also edit the sidebars widgets from the WordPress admin panel, Appearance -> Widgets menu).

blog-post-sidebar-01

The (Vikinger) Blog Post Sidebar sidebar will be available for selection:

blog-post-sidebar-02 blog-post-sidebar-03

From here, you can add, edit or remove the widgets assigned to this sidebar. Please refer to the Widgets section of this documentation ror more information about which custom widgets this sidebar supports.

Vikinger Settings

We created a lot of different options to allow you to customize as much as possible of the theme and integrated them with the WordPress Customizer, this way you have a centralized place where you can edit and preview any change you make to the theme.

vikinger-settings-01

There are more than 15 sections with more than 85 customizable options in total which can be accessed from the Vikinger Settings panel of the Customizer.

vikinger-settings-02

Sections have information about what type of options they contain and each of their options have a description that helps understand what that particular option changes in the theme.

vikinger-settings-03

Below, we include an example that shows how to change theme options by using the Customizer.

Changing theme colors

Customizer Overview

Here's a quick overview of all the main customization options that you'll have with the theme, from changing login page texts, settings, color presets, member options, headers, and much more! We strongly suggest you to check out this page before customizing your theme!

Customizer -> Site Identity

Change the main elements of the site like logo, site title, icon, and the option to show the logo and title, or just the logo.

Vikinger Settings -> Login - Register

Change everything related to the lgin and register pages, like background image, main text, the option to force users to login and more!

Vikinger Settings -> Admin Bar

You can choose to display or hide the admin bar. Selecting "Hide" will hide the admin bar on the frontend for all logged in users except administrators.

Vikinger Settings -> Font

From here, you can select the primary and secondary fonts used in the theme.

Vikinger Settings -> Color Presets

Choose the default color preset of the site, enable the color theme switch, select which color preset to assign to your site light and dark color themes and select the default color theme the site uses.

Vikinger Settings -> Colors - Custom Preset and other Color Presets

You can change the theme colors of the individual presets with your desired ones.

Vikinger Settings -> Loading Screen

Choose to display or hide the loading screen of the site. We recommend to display the loading screen to avoid FOUC (flash of unstyled content.

Vikinger Settings -> Search

Change search options, like showing or hiding the search bar and enabling or disabling search results.

Vikinger Settings -> Avatar

You can choose to use hexagon, circle or square avatars for members and groups.

Vikinger Settings -> Media

Change media settings like photo/video maximum upload size and allowed extensions.

Vikinger Settings -> Blog

You can choose to use version 1 or version 2 of the blog open post.

Vikinger Settings -> Side Menu

You can choose to display or hide the side menu.

Vikinger Settings -> Newsfeed

Choose newsfeed options like limit Youtube playback, enabling a "show more" button on longer status updates, place character limits and more.

Vikinger Settings -> Members

Customize the members options like default avatar and covers, enabling profile section tabs and choosing their order.

Vikinger Settings -> Groups

Customize the groups default avatar and covers.

Vikinger Settings -> Page Headers

Customize the background image used in all the headers of the theme and the option to display or hide them all.

Vikinger Settings -> Page Headers - Search, Blog, Forum, etc...

Customize each individual header title, subtitle and main image.

Vikinger Settings -> Footer

Choose if you want the footer hidden or not and what's displayed on the left and bottom parts of the footer of the site.

Vikinger Settings -> 404 Page

From here, you can customize the image and text used in the 404 error page.

Menu Locations

We created 4 menu locations for this theme:

  • Header Menu: menu items in this location display on the header of the site. The first menu item of this menu shows first in the header, while the rest of the menu items are hidden inside a dropdown that can be shown by hovering over a three dots icon (...).

  • Header Features Menu: menu items in this location display on the header of the site. This location creates a menu item on the header that has the same name as the one assigned to the menu (Menu Name). This menu item hides a big dropdown that displays all the menu items assigned to this menu. All menu items can be grouped under a named title by using the Title Attribute parameter.

  • Side Menu: menu items in this location display on the left side menu bar. All menu items can be assigned icons by using the CSS Classes parameter. Available icons to use for the menu items are listed in the Menu Icons section of this documentation.

  • Footer Menu: menu items in this location display on the footer of the site. All menu items can be grouped under a named title by using the Title Attribute parameter.

Configuring your Screen Options

Before you start creating your menus, you need to make sure that you have activated all related Screen Options to be able to take full advantange of the customization available for them (e.g. adding icons to the side menu items).

Follow these steps to make all relevant options available in the menu creation screen:

  • Go to your WordPress admin panel.

  • Go to Appearance -> Menus.

menu-locations-01
  • Click on Screen Options at the top right of the screen.

menu-locations-02
  • Activate the options BuddyPress, Title Attribute and CSS Classes.

menu-locations-03
  • Now, you can use the Title Attribute and CSS Classes properties on each menu item, and the BuddyPress option will display available links in a dropdown under the Add menu items option.

Menu Icons

We created more than 20 icons for you to choose from and use with the menu items of the Side Menu menu location. You can assign any of this icons to any menu item by entering the icon name into the menu item CSS Classes property:

newsfeed

members

group

badges

quests

ranks

credits

profile

timeline

friend

blog-posts

photos

videos

streams

forums

overview

marketplace

events

notification

shopping-bag

settings

comment

messages

Post Formats

We created 3 post formats for the theme:

  • Video: used for displaying a video as a highlight of the post.

  • Audio: used for displaying an audio as a highlight of the post.

  • Gallery: used for displaying a collection of images as a highlight of the post.

All 3 post formats change how both the post preview and post page display the content.

How to assign a post format to a post

  • Go to the WordPress admin panel.

  • Click on Posts and click on Add New or Edit an existing one.

  • Go to the Document options of the right sidebar and open Status & visibility.

  • There is a Post Format select control, click it and the available post formats will display. Select one.

  • At the bottom of the page, the special inputs for the post format you selected will appear.

  • If the post format special inputs don't appear, click on the three dots at the top right of the page and select Options.

  • Scroll to the Advanced Panels section and make sure that all the Vikinger - "Post Format" options are checked.

Post Versions

We created 3 post page versions for the theme:

  • Post Page Version 1: this is the default post page version used for displaying posts with Standard post format. This version features a sidebar at the bottom of the page, after the post content and comment list is displayed (Blog Post Bottom Sidebar).

  • Post Page Version 2: this is a variant of the version 1 post page, it's also used for displaying posts with Standard post format. Please refer to the Theme Customization -> Vikinger Settings for information on how to select if version 1 or version 2 is used for displaying posts with Standard post format. This version features a sidebar at the right side of the page (Blog Post Sidebar).

  • Post Page Version 3: this version is used for displaying posts with Video, Audio or Gallery post formats. Even though the 3 post formats share the same post page version, the way content is displayed changes accordingly (e.g. Video and Audio post pages show an iframe at the top, while the gallery type shows a slider). This version features a sidebar at the left side of the page (Blog Post Sidebar)

Post Page Version 1

post-v1-01

Post Page Version 1 (Sidebar)

post-v1-02

Post Page Version 2

post-v2-01

Post Page Version 2 (Sidebar)

post-v2-02

Post Page Version 3

post-v3-01

Post Page Version 3 (Sidebar)

post-v3-02

Profile Fields

You can customize which fields you want to add to your users profile, such as bio fields, personal information, interests and social network links by using the BuddyPress Profile Fields functionality. Each of the fields you create will be available to every user on their respective settings screen where they can fill them with information that will then show in the different parts of the site (e.g. users can fill social links information and the links will show in their profile header and profile preview cards).

Profile field groups

Before you start customizing your desired profile fields, you need to create the base profile Field Groups that the theme uses to display them. The Field Groups that the theme uses are:

  • Profile_Bio: used to display bio information about the users. Users complete this information by going to their Profile Info settings screen. The completed information is displayed on the users About Me widgets on their profile timeline and profile about pages, and on their profile preview cards.

  • Profile_Personal: used to display personal information about the users. Users complete this information by going to their Profile Info settings screen. The completed information is displayed on the users Personal Info widget on their profile about pages.

  • Profile_Interests: used to display things the users are interested in. Users complete this information by going to their Profile Info settings screen. The completed information is displayed on the users Interests widget on their profile about pages.

  • Social_Links: used to display users social links. Users complete this information by going to their Social settings screen. The completed information is displayed on the users profile header on any of their profile subpages and on their profile preview cards.

  • Account_Info: used to display account info about the users. Users complete this information by going to their Account Info settings screen. This information is private to the users and is not displayed anywhere on the site. Used to allow users to change their displayed name.

Creating profile field groups

To create the Field Groups the theme uses, follow these steps:

  • Go to your WordPress admin panel.

  • Go to Users -> Profile Fields.

profile-fields-01
  • Click on Add New Field Group.

profile-fields-02
  • Enter the group name, in this example we are going to create the Profile_Bio group.

profile-fields-03
  • Click on Save after entering the group name.

profile-fields-04
  • Go to the Profile_Bio group tab that was created and click on Add New Field.

  • Enter About as the field name and select Multi-line Text Area as the field type (this is the only fixed name field that you need to create because we use it to show it in a specific way in the profile about widget and profile preview cards).

profile-fields-05
  • Click on Save to create the field.

profile-fields-06
  • The field will now show in every user Profile Info screen.

profile-fields-07
  • Enter some information and click on Save Changes.

profile-fields-08
  • The information you entered will now appear in the About Me widget on the users profile timeline, profile about pages and on their profile preview card.

profile-fields-09 profile-fields-10 profile-fields-11

You can follow the same steps to create the other profile field groups and add fields to them.

Overview

Gamification functionality for the Vikinger theme is provided by the GamiPress plugin.

Taking advantage of their awards system, we created 4 main gamification features: Badges, Quests, Credits and Ranks. Each with their own designs and features to take advantage of their capabilities to the fullest!

You can check each section to know more about how to create these pages and how to create new badges, quests, ranks and credits.

As a bonus, we included PSD and PNG files of all the gamification elements (badges, quest medals, credits and rank shields) that you see in the live preview!. All elements are made with PS vectors, so you can customize them any way you want or even create new ones! You can read more about this in the Resources -> Illustrations section of the documentation file.

Here's a quick overview of the gamification sections:

  • Credits: using the GamiPress Points feature we created three different credits: Gold, Gems and Emeralds. Use them to unlock new ranks and level up! You can proudly show them in your profile with the credits widget and you'll also be able to always see your current balance on the top bar.

  • Badges: using the GamiPress Achievements feature we designed a badges system where you can unlock them and earn credits to unlock profile ranks! You can also proudly show them in your profile with the badges widget!.

  • Quests: using the GamiPress Achievements feature we also designed a quests system where you can complete them and earn credits to unlock profile ranks! Like the badges, you can proudly show them in your profile with the quests widget!.

  • Ranks: using the GamiPress Ranks feature we created a 6 ranks system where you can "level up" by collecting credits and completing requirements! We've also linked your rank number and progress to profile avatars! You'll be able to quickly see each user's rank and progress via the outer progress bar.

Demo Content

Instead of creating the badges, quests, credits and ranks manually, you can choose to import them to match the demo content and start customizing them from there.

To import them to your WordPress install, follow these steps:

  • Go to your WordPress admin panel.

  • Go to GamiPress -> Tools and open the Import / Export tab.

demo-content-01
  • Scroll down to where the Setup section is.

  • Open the Import tab and click on Choose File.

demo-content-02
  • Navigate to the theme folder and select the Imports/GamiPress/vikinger-gamipress-demo-content.txt file.

  • Click on Import Setup to finish the process.

demo-content-03
  • Please read: After importing the GamiPress Setup, please make some edit changes to the achievements/ranks/credits, like updating a step, adding a badge, or changing the credits awarded amount. This will help the GamiPress plugin "hook" better with your theme.

Credits

Below, you will find information on how to create credits by using the GamiPress backend menu and how to create a page that will display all credits as well as any awards or deducts you assign to them so users of your site can know which actions will award and deduct credits from their balance.

How to create credits

  • Go to your WordPress admin panel.

  • Go to GamiPress -> Point Types and click on Add New.

credits-01
  • Enter the credit Singular and Plural Name and add an Image to it.

  • Click on Publish to finish creating your credit.

credits-02
  • Your credit will now appear on the site header, responsive menu, user profile credit widget and user profile credits page.

credits-03 credits-04 credits-05

How to create credits page

The credits page displays the logged user credit balance and all the awards and deducts that you define from the GamiPress credit options. To create the credits page, follow these steps:

  • Go to your WordPress admin panel.

  • Go to Pages and click on Add New.

  • Enter a title for your page.

  • On the right sidebar, go to the Document tab and select the Points Page template under Page Attributes. Click on Publish to save your page.

credits-page-01
  • That's it, your created page will be available on your site, create a menu item for it to allow your users to navigate to it easily!.

credits-page-02

Badges

Below, you will find information on how to create badges by using the GamiPress backend menu and how to create a page that will display all badges so users of your site can know what they need to do to earn them.

How to create badges

Before you start creating badges, you need to create the Badges Achievement Type:

  • Go to your WordPress admin panel.

  • Go to GamiPress -> Achievement Types and click on Add New.

badges-01
  • Enter Badge in Singular Name, Badges in Plural Name.

  • Click on Publish to finish creating your badges achievement type.

badges-02
  • Your badge achievement type will now appear on the Achievements menu.

  • Click on Add New to add a new badge.

badges-03
  • Enter your badge Name and Description.

badges-04
  • Enter the Points it awards.

badges-05
  • Add Steps to complete it.

badges-06
  • Assign it an Image.

badges-07
  • Click on Save All Steps to save steps and on Publish to save the badge.

badges-08
  • That's it, your badge is ready to be displayed on your site and unlocked by your users. To display it on your site, you need to create a badges page by following the steps described below.

How to create badges page

  • Go to your WordPress admin panel.

  • Go to Pages and click on Add New.

  • Enter a title for your page.

  • On the right sidebar, go to the Document tab and select the Badges Page template under Page Attributes. Click on Publish to save your page.

badges-page-01
  • That's it, your created page will be available on your site, create a menu item for it to allow your users to navigate to it easily!.

badges-page-02

Quests

Below, you will find information on how to create quests by using the GamiPress backend menu and how to create a page that will display all quests so users of your site can know what they need to do to earn them.

How to create quests

Before you start creating quests, you need to create the Quests Achievement Type:

  • Go to your WordPress admin panel.

  • Go to GamiPress -> Achievement Types and click on Add New.

quests-01
  • Enter Quest in Singular Name, Quests in Plural Name.

  • Click on Publish to finish creating your quests achievement type.

quests-02
  • Your quest achievement type will now appear on the Achievements menu.

  • Click on Add New to add a new quest.

quests-03
  • Enter your quest Name and Description.

quests-04
  • Enter the Points it awards.

quests-05
  • Add Steps to complete it.

quests-06
  • Assign it an Image.

quests-07
  • Click on Save All Steps to save steps and on Publish to save the quest.

quests-08
  • That's it, your quest is ready to be displayed on your site and unlocked by your users. To display it on your site, you need to create a quests page by following the steps described below.

How to create quests page

  • Go to your WordPress admin panel.

  • Go to Pages and click on Add New.

  • Enter a title for your page.

  • On the right sidebar, go to the Document tab and select the Quests Page template under Page Attributes. Click on Publish to save your page.

quests-page-01
  • That's it, your created page will be available on your site, create a menu item for it to allow your users to navigate to it easily!.

quests-page-02

Ranks

Below, you will find information on how to create ranks by using the GamiPress backend menu and how to create a page that will display all ranks so users of your site can know what they need to do to earn them.

How to create ranks

Before you start creating ranks, you need to create the Ranks Rank Type:

  • Go to your WordPress admin panel.

  • Go to GamiPress -> Rank Types and click on Add New.

ranks-01
  • Enter Rank in Singular Name, Ranks in Plural Name.

  • Click on Publish to finish creating your ranks rank type.

ranks-02
  • Your ranks rank type will now appear on the Ranks menu.

  • Click on Add New to add a new rank.

ranks-03
  • Enter your rank Name and Description.

ranks-04
  • Since this is the first rank, it is assigned to all users, so you can't add any requirements to it. Other ranks your create after this one will allow you to add requirements to them.

  • Assign it an Image.

ranks-05
  • Click on Publish to save the rank.

ranks-06
  • That's it, your rank is ready to be displayed on your site and unlocked by your users. To display it on your site, you need to create a ranks page by following the steps described below.

How to create ranks page

  • Go to your WordPress admin panel.

  • Go to Pages and click on Add New.

  • Enter a title for your page.

  • On the right sidebar, go to the Document tab and select the Ranks Page template under Page Attributes. Click on Publish to save your page.

ranks-page-01
  • That's it, your created page will be available on your site, create a menu item for it to allow your users to navigate to it easily!.

ranks-page-02

Page Templates

Landing Page Template

We created a page template that you can import to get the demo landing page of the theme: http://odindesign-themes.com/vikinger-wp/. Below, we describe how to create the landing page and how to import the page template:

  • Go to your WordPress admin panel.

  • Go to Pages. We are going to create a page that will be used to load the landing page template.

page-templates-01
  • Click Add New, enter a title for the page and click on the Edit With Elementor button on the top bar.

page-templates-02
  • Now, we need to import the page template, click on the Folder Icon that is on the center of the screen, next to the plus icon and above the Drag widget here text.

page-templates-03
  • Go to the My Templates tab.

  • Click on the circle icon with an arrow inside that is pointing up on the top right to import the page template.

page-templates-04
  • Click Select File.

page-templates-05
  • Navigate to the theme package folder and select the Imports/Elementor/elementor-vikinger-landing-template.json file.

page-templates-06
  • Click on the Insert button to insert it on the page.

page-templates-07
  • You can customize the template to your liking, e.g. you can change the background image from the Style tab on the left side panel.

page-templates-08
  • Click the Publish button at the bottom to finish.

page-templates-09
  • That's it!, you can check your page by navigating to it on your site.

page-templates-10

Page Widgets

We created a Login and Register widget that displays a tab separated login and register form when the user is not logged in, and a profile preview card when the user is logged in. Also, we integrated the widget with the WordPress Settings -> General -> Membership -> Anyone can register option. This means that the register form tab will only show if this option is checked.

To use the widget on your custom Elementor page, follow these steps:

  • Open the page you want to use the widget in and click on Edit with Elementor.

page-widgets-01
  • Scroll down on the left panel until you find the Vikinger widgets panel.

page-widgets-02 page-widgets-03
  • Drag and drop the widget where you like.

page-widgets-04

Overview

Creating a Forum

GamiPress Integration

Adding Badges to the Forums

If you want to add the badges of each user at the bottom of their profile info (like you see in this screenshot of the live preview):

bbpress-integration-01

You'll need to install the GamiPress bbPress Integration

Once installed and activated, you'll need to go to "GamiPress" -> "Settings" in the WordPress backend panel, and then choose the "Add-ons" -> "Achievements" tabs.

Select the options like they are in this screenshot:

bbpress-integration-02

When you're finished, click "Save Changes" and it's done!

We suggest you use this integration to only show badges and not all elements, because the user spaces of the discussions will become very cluttered if you do and it won't look good.

Translation

This theme is translation ready, which means that it can be translated to different languages by adding the corresponding localization files in the languages/ directory.

How to change site language

To change the site language, follow these steps:

  • Go to the WordPress admin panel.

  • Go to the Settings -> General.

  • Scroll to Site Language and select your desired language.

  • Scroll to the bottom of the page and click Save Changes.

  • Now, when you visit your site, all text will be translated to the language you selected.

If the localization files for the language you selected don't exist, then no translation will be loaded and the text of your site will not change.

How to add new localization files

To add new localization files you need to use the languages/vikinger.pot file we created as a base and generate new .po and .mo files by translating the text present in that file.

There are different ways to generate these files, but you always have to translate all the text found in the vikinger.pot file to the language you want.

Since you are going to translate the text anyway, we ask that you please send us the translated text and we will create the new localization files for you. This way we can help you by generating the localization files, and other people will be able to use that translation in their theme, as we will be adding it in an update.

Available Translations

The following are the currently included translations for the theme, we will be updating this list every time we add a new translation:

  • English (Base).

  • Spanish.

Illustrations

Yes! We're including all illustration elements like the credits, rank shields, badges, quest medals, section banners, the landing illustrations, avatars and a lot more inside the pack inside the "Illustrations" folder. All files have a PNG version and a PSD one, made with PS vectors, so you can easily customize them with a few clicks!

Here's a quick rundown of what you'll find:

  • Avatars: 15 People Illustrations and Avatars and 1 Smiley Default Avatar.

  • Badges: 24 Badges.

  • Banners: 10 Section Banners.

  • Credits: 3 Credits.

  • Landing - 404: Landing and 404 Illustrations.

  • Quests: 1 Open Quest and 12 Quest Medals.

  • Ranks: 6 Rank Shields.

SVG Icons

We included 54 different icons with both PNG and SVG files

Contact Us

After downloading and installing the theme, a support menu will show with information on how to get support for the theme (support contact email and guidelines on how to get support).

What does support include?

For information on what support does include, please refer to the ThemeForest item support policy page:

For information on what support does not include, please refer to the ThemeForest item support policy page: