Introduction
Tribe is new platform for forums which has a great desktop and mobile design from the box.
This article will help you change your current Invision Power Board Community to brand new Tribe Community based on WordPress MemberPress platform.
What you will need
1 – Tribe account – A powerful community platform, integrated into your product.
2 – Zapier – with Pro plan to be able to run multiple actions in a single Zap. Alternatively we can host and manage your zaps for you at $5/zap/mo.
3 – WP OAuth Server – User Authorization Management Systems For WordPress.
Video Tutorial
Setting Tribe
Login to your Tribe Community.
1 – Update your community’s logo, favicon and Open Graph Image
To change Logo:
1.1 – Go to Admin Settings
1.2 – Scroll down to the Pictures section
1.3 – Click Upload Image in Logo section
1.4 – Click Upload Image in Favicon section
Note: Your favicon will be used as App icon for “Add to Home Screen” option on iOS devices.
1.5 – Click Upload Image in Open Graph Image section
1.6 – Click Save on the bottom and check results
Note: Tribe support only square or circle 40x40px logos, if your logo is rectangle, follow next steps:
1.7 – Go to Admin Settings
1.8 – Go to Theme
1.9 – Go to Navbar and click in “Enabled” Checkbox
1.10 – Add following code to Navigation Items:
<img src=”https://memberfix.rocks/your-logo-path/your-logo-title.png” target=”_self” style=”height: 50px; margin-top: 2px; background: #ffffff00;” /> | https://memberfix.rocks/ | start, responsive
1.11 – Based on logo change Height (px), in my case I set 60px, because I set 50px logo.
1.12 – Click Save on the bottom
2 – Change the font of community
2.1 – Go to Admin Settings
2.2 – Go to Theme
2.3 – In General tab, you can insert the Font Family
2.4 – Click Save on the bottom
3 – Add a navigation bar to community
3.1 – Go to Admin Settings
3.2 – Go to Theme
3.3 – Go to the Navbar tab.
3.4 – Check Enabled box is active
3.5 – Update the Navigation Bar’s height, colors of the background, font and bottom border.
3.6 In the Navigation Items section, put your pages names, links in following format:
Articles | https://memberfix.rocks/blog | start, responsive
Services | https://memberfix.rocks/# | start, responsive
Our Plugins | https://memberfix.rocks/# | start, responsive
Podcast | https://memberfix.rocks/the-membership-site-success-podcast/ | start, responsive
Resources | https://memberfix.rocks/dl/mf-toolkit/ | start, responsive
Contact Us | https://memberfix.rocks/contact/ | start, responsive
Note: tag “responsive” used for adding menu items to hamburger button menu in mobile view.
3.7 – Click Save on the bottom
4 – Customize community’s footer
4.1 – Go to Admin Settings.
4.2 – Go to Theme
4.3 – Go to the Footer tab.
4.4 – Choose Customized footer items Just as in Navbar, add menu items:
About Us | https://memberfix.rocks/about/ |
Twitter | http://www.twitter.com/vicdorfman |
Facebook | https://www.facebook.com/groups/speedkillsio/ |
4.4 – Click Save on the bottom
5 – Customize community’s header
5.1 – Go to Admin Settings
5.2 – Go to Theme
5.3 – Go to the Header tab. Update background and bottom border colors
5.4 – Click Save on the bottom
6 – Additional CSS and Custom Scripts
5.1 – Go to Admin Settings
5.2 – Go to Theme
5.3 – Go to the Advanced Settings tab
5.4. In Additional CSS field you can add any CSS code to any elements on page that have class or id.
For example:
Hide Tribe logo in menu:
.ui.menu .header.item.header-logo img {
display:none !important;}
Change Home button color:
.ui.text.menu .active.item {
font-weight: 400;
color: #ffffff;}
5.5 – In “Code added to the end of <body> tag” field you can add custom scripts.
For example:
Open links in header menu in the same tab:
<script>
window.onload = function () {
var menuItems = document.querySelectorAll(“.main-navbar a”);
menuItems.forEach((item) => {
item.target = “_self”;
});
};
</script>
5.6 – Click Save on the bottom
6 – Changing Tribe’s domain
To install subdomain, for example: community.memberfix.rocks – you need to add CNAME on domain DNS settings.
6.1 – Go to your domain registrar’s control panel, and search for DNS settings.
6.2 – Click on “add a CNAME record” and enter following settings:
Type: CNAME
Host/Name: “community” in this example (or your choice of subdomain)
Value or Points To: domains.tribe.so.
To install domain, for example: memberfixcommunity.rocks – you need to add both CNAME and A record.
6.3 – Go to your domain registrar’s control panel, and search for DNS settings.
6.4 – Click on “add a CNAME record” and enter following settings:
add a CNAME from www to domains.tribe.so, it is explained in 6.2.
6.5 – Click on “add a A record” and enter following settings:
add an A Record from @ (root) to 159.203.158.141
6.6 – Go to the Tribe Admin Panel, click on Domain on the left sidebar, and insert the subdomain/domain in the text field.
If everything right, you will receive a success message that your domain will be moved within 24 hours.
If something incorrect you will receive an error message that explains what is the issue with the settings that you have done.
Note: If you are using Cloudflare domain provider, please make sure before you add CNAME or A record, you click on the orange colored cloud sign (proxy) to make it grey colored (turn off proxy). And then you can add the the CNAME and A record.
SSO setup
1 – Setup SSO App between WordPress and Tribe
1.1 – Go to Admin Settings
1.2 – Go to Apps
1.3 – Find and Install OAuth2 SSO App
2 – Install WordPress OAuth Server on your website
2.1 – Go to Plugins > Add New > Search for WP OAuth Server
2.2 – Install and Activate WP OAuth Server (OAuth Authentication) By WP OAuth Server.
2.3 – Create a consumer/client using the admin interface.
This client will be unique to the site that the Single Sign-On will be taking place. Ensure that the Redirect URI is set correctly. On the left panel click on OAuth Server and click Add New Client:
Client Information
Client Name: Name to identify the application. You can pick any name.
Redirect URI: You can find the callback Url from Tribe OAuth2 SSO App.
<Community Url>/auth/oauth2/callback
ex: https://community.domain.com/auth/oauth2/callback54
2.4 – Once the information is entered, click on “Create Client”, and after the client is created, you can see the Client ID and Client Secret which are required for the next step.
2.5 – Check under OAuth Server > Settings > General Settings > is checked
3 – Setup SSO on Tribe Community Side
3.1 – Go to SSO App settings
Below is how you should do the settings:
General Settings
Enabled: is checked.
Client ID: From WordPress OAuth Server explained in step 2
Client Secret: From WordPress OAuth Server explained in step 2
Authorization URL: <WordPress Url>/oauth/authorize
ex: https://mywordpress.com/oauth/authorize
Token URL: <WordPress Url>/oauth/token
ex: https://mywordpress.com/oauth/token
Sign Up Url: <WordPress Url>/wp-login.php?action=register
ex: https://mywordpress.com/wp-login.php?action=register
Account Settings Url : <WordPress Url>/wp-admin/profile.php
ex: https://mywordpress.com/wp-admin/profile.php
User Info URL: <WordPress Url>/oauth/me
ex: https://mywordpress.com/oauth/me
Logout URL: <WordPress Url>/wp-login.php?action=logout
ex: https://mywordpress.com/wp-login.php?action=logout
Verify State: is checked
3.2 – Once all the information is entered click Update.
4 – Authentication Flow
4.1 – Login to your WordPress website
4.2 – Go to Tribe Community
4.3 – Click Login
4.4 – Choose Login with WordPress
Now all users from IP Board Community will have access to new Tribe Community, because they stored in WordPress.
Recreate Topics from IP Board
1 – Go to Admin Settings in Tribe
2 – Go to Topics
3 – Go to your IP Board Community and Copy Topic Information
4 – Press Add Topic in Tribe
5 – Add Title, Add description
6 – Save changes
7 – Click Edit
8 – Add image
9 – Add Topic to Navigation
Repeat this steps to all Topics.
In conclusion
As you can see, the installation of Tribe Community is pretty simple. Migration from IP Board can take some time, depending on number of content in your community.
If you’d rather delegate this project to us, sign up for a MemberFix plan or book us for an hourly project, and we’ll get going. ????
If you have any questions or suggestions, leave a comment below and we’ll reply!
