Adding a forum to your site is a pretty simple process. There are some great plugins out there that will give you the functionality but may be hard to match the design of the forum with your Divi layout.
In this use case tutorial, Iβm going to show you how to add a forum to your site that is both powerful and beautiful. Iβll be using Diviβs Marathon Layout pack with the forum plugin WPForo.
I think you will be surprised at the result.
Letβs get started.
Sneak Peek
Here is a sneak peek of the forum we will be creating together.
What You Need for This Tutorial
To complete this tutorial, you will need the following:
- Divi Theme (installed and active)
- The Marathon About Page Layout (accessible from your Divi Builder)
- WPForo Plugin
Creating Your Forum
To create the forum, we will use the WPForo plugin. You can find the plugin by searching for it from within the WordPress dashboard by navigating to Plugins > Add New.
Once you have activated the plugin, navigate to Forums > Forums. This will bring you to the Categories and Forums page where you can setup new categories and forums and change their order and hierarchy. By default, you will see a blue category block named βMain Categoryβ with one white forum block named βMain Forumβ. This means that you have one forum named βMain Forumβ under the category βMain Categoryβ.
Letβs change the name of our Main Category to βMarathonβ by clicking the edit icon on the blue block menu.
Then update the category information as follows:
Title: Marathon
Description: These are all of our Marathon Forums.
Forum Slug: marathon
Category Layout: Simplified
Publish your changes.
Go back to the Categories and Forums page and click to edit the Main Forum.
Update the following:
Title: Running is a Lifestyle
Description: This is a forum about the marathon running lifestyle.
Forum Slug: running-is-a-lifestyle
Publish your changes.
Letβs create one more forum under the Marathon Category by going to Categories and Forums page and clicking the Add New button at the top of the page.
Then update the following:
Title: Race Prep
Description: This forum discusses how to prepare for a marathon.
Forum Slug: race-prep
Parent Forum: Marathon
Publish your changes.
Update Forum Settings
Now that we have created our forums, letβs go to the forum settings by navigating to Forums > Settings.
In the General tab, You can update the forum base URL, forum title, and forum Description.
Donβt forget to update your options before going to the next tab.
The plugin comes with three forum layouts (or templates). These include the Simplified layout (the one we are using), the Extended Layout (great for a multi forum structure with a lot of content), and a Q&A Layout. Since we are using the Simplified layout, the settings under the Forums tab do not apply.
The Forum Accesses tab allows you to set the permissions for each usergroup that will have access to your forums. By default, guests will have read only access, registered users will have standard access, and admins will have full access.
Hover over Standard Access and click edit to update the permissions if you want.
Bear in mind that whenever a user registers for the forum, their posts will be awaiting moderation until you (the admin) approve them under the moderation page. Also, if you leave the option βCan Attach Fileβ checked, the newly registered viewer will still be unable to post attachments until they have successfully posted 4 or 5 successful and approved post. This is a helpful security measure against spammers.
You can skip the Topics & Posts tab for now but those options may be helpful for your own forum later on.
The Members tab has some really cool options. You can do things like add custom redirects after the user logs in, registers, and/or confirms subscription. You can even customize the rating system and badges members will recieve by posting in the forum (which I love).
You can skip the Emails tab for now but this will be helpful for setting up your confirmation and notification emails.
The Features tab holds a lot of powerful options to customize your forum. You can go through these on your own time to see if any apply to your situation. The first seven options (and the last one) allow you to choose what elements of the forum you want to show. For our purposes, I would like to clean up the forum a little by hiding the forum stats section and the WPForo footer.
Here is what our forum currently looks like with those two elements at the bottom.
To hide these elements, select βNoβ for βShow Forum Statisticβ and also select βNoβ for the βHelp wpForo to grow, show plugin infoβ option at the bottom of the page.
Designing Your Forum
The style tab is where you can design your forum by editing the color scheme and font sizes. You can even add your own custom css.
Start by updating the following font sizes:
Forums: 27px
Topics: 27px
Post Content: 16px
Then add the following custom CSS in the input box:
#wpforo-wrap #wpforo-title{font-size: 46px; font-weight: 600; line-height: 1.3em; }
This css changes the forum title to a bigger font size with more space in order to match our Divi Marathon Layout.
You may notice that you donβt have the option to change the actual font being used for the forum. Not a problem. We can handle that from the Divi builder when we add the forum shortcode to the page.
The forum Color Styles are a bit overwhelming (and confusing) at first glance because you donβt know what colors are assigned to what elements on our forum. To find this information, click on the documentation link.
This will send you to the documentation on these colors and what elements are affected by each. The documentation is helpful because it not only lists the elements assigned to each color, but also gives you the target CSS ID/Class that can be used to customize individual elements.
To match the colors of our Divi Marathon Layout to our Default color palette, update the following:
Color 9: #ffffff
Color 11: #4866FF (this is the color taken from the button color on the Marathon Layout)
Color 12: #4866FF
Color 14: #4866FF
Color 15: #4866FF
Color 16: #4866FF
Designing Your Forum Page
Once you activate WPForo, a forum page is automatically created for you. The forum homepage can be found at the url example.com/community/. Go ahead and find the forum page from your page list and click to edit it. The page will have a shortcode in the content section of the page. We will use this shortcode to insert the forum inside a text module of our layout.
Deploy the Divi Builder and Visual Builder. Then open the settings menu at the bottom, click the Add from Library icon and select to use the Marathon About Page Layout.
Delete the first row in the first section. Then replace the video module in the row remaining in the first section with a text module.
In the text module Content box, enter the the shortcode [wpforo].
Under the design tab update the following:
Text Font: Montserrat
Link Font: Montserrat
Link Font Weight: Medium
Heading Font: Montserrat
Custom Padding: 3% Top, 3% Right, 3% Bottom, 3% Left
Box Shadow: select third option and change the shadow color to rgba(0,0,0,0.12).
Save settings.
Go to the section settings and change the custom padding back to the default. Then disable the box shadow option.
Save your settings.
Then delete the remaining rows and sections below your forum section.
Now letβs check out the final result.
To add topics to your forums, click on one of the forums from the forum page and click the add topic button.
Here is an example of what a topic page looks like.
Here is what your forum looks like on mobile:
Final Thoughts
Forums are a popular feature on the web these days. So why not add one to your marathon website? The WPForo plugin has excellent functionality and with a little customization using the Divi Builder, you can match your forumβs design with the Diviβs Marathon Layout Pack.
I hope this use case tutorial will help you create your own beautiful forum for your website.
And as always, I look forward to hearing from you in the comments.
I don’t think this works anymore in 2023, I tried following the tutorial and though everything went well, the forum does not work, in that every click within the text container results in permission issues.
There should be just a FORUM -THEME of Divi it self. Just complete like the presets of pages.
Any tips on customizing the mobile layout? I’d like to it be full width but I can’t seem to figure out the option, even with some custom css.
Thanks
Thank you for this tutorial. I’ve installed wpForo and my client wants site visitors to register for the forum before they have access to it. He also wants to keep the forum private so that only registered users can access it. Do you have instructions on how to achieve these 2 goals? Many thanks!
I wish this released earlier, I used to love Divi but I transitioned to my theology forum a few years ago. I always thought Divi would be perfect if you could make a forum with it. Is it compatible with anspress?
Is there a video for this? I had an email about it, but when I clicked on the link, a message appeared on YouTube saying that the video had been removed. π
I have installed WPForo Plugin on my new niche website.Really wonderful plugin & easy to customize background look.Good stuff.I need more for an example,I would love to customize the signup form.could you please suggest me another wpforo plugin alternative? Good stuff
Thanks in Advance
I personally did not tried it, but for signup or login forms you could also use (I read in wpForo documentation) Buddypress or Ultimate member plugins…
Hi, I was looking for it. Bu I have a question:
Is it easy to do with this layout a social network?
Thanks.
I am really happy about this one, too, Jason. I’m totally adding this to my running site as soon as I can get the dev time, and some of the marathon layouts. I appreciate you putting the time in on the forums since I didn’t know about WPForo at all before this.
Creating forum is a easy task but what to do to stop spamming posts? I am getting too much spam posts on my forum, my first hour of work goes waste in this….
Use Google Recaptcha
I have ZERO spam registrations since implementing this.
You could turn on Akismet and reCaptcha… to avoid spam registrations and postings
Thank you for this article.
I manage a small site + forum for French users of Divi and I use
bbPress, but it seems a bit slow, so this new solution
is pretty good.
Thank you for the info and your work
There is a WP blog from a friend that uses another template. For him to use will have to change to Vivi so only try to install the forum to get this look?
This particular example is just for Divi, yes.
Very good complement, I was looking for something like this for one of our projects, but I have a question, how can I have a Spanish version?
this is good plugin becoz my some friends already used this ….so good article..
I’m wondering if there’s a level of transparency that needs to be addressed?
I often see these “How To” blogs reference obscure plugins that I couldn’t find even if I tried. Does the author have any connection to the respective plugin developers?
In this blog, I would assume most people would be bbPress or BuddyPress for WordPress forums and I’m sure there’s others. Referring a plugin that has so few downloads and few reviews is troubling.
If the author is selecting, say WPForo, as opposed to a more popular option, I’d really be interesting in know why that’s the case. Again, for the sake of transparency and disclosure.
Michael,
Thanks for your concern. I have no hidden agenda. It is true that 10,000 active installations isn’t much compared to bbpress’s 300,000. But it is less than 2 years old and the high reviews and recent growth shows enough promise to introduce it to the community. And the out of box design elements are refreshing. But I love bbpress and understand it’s widespread popularity. Because of this, we do plan on covering it in a future Divi post in order to give it the attention it deserves.
I hope that helps clear things up.
Hi Jason,
Loving all the tutorials especially as I am only new to the whole WordPress / Divi world.
I look forward to the tutorial for bbpress as that is what I have installed.
Still not sure if it is in fact the “best” but it’s the most used which is why I ran with it.
Hi Jason, thanks for another enlightening article. Even if I’m not personally going to use the resource your article happens to be about I still find each of them extremely helpful as a reminder that the options we have with Divi are basically limitless. Just getting our minds thinking about options we may not have previously considered is greatly undervalued. Understanding why you don’t choose to use something in a particular project can be as informative as why you would decide to use it. In a nutshell , thanks for the articles, I get something out of all of them.
Also for the template Extra ???
Yes this should work well with Extra as well.
I have tried installing this today on a test site I am working on. Everything went well until it came to customising the colours. I simply cannot get them to change. I have disabled all other plugins, cleared the cache, and checked on several other computers, but no joy.
I appreciate that wpforo is a third party plugin, but any thoughts would be much appreciated.
Andy,
This may be because of the WPForo layout you are using for your Forum Category. Are you using the simplified, extended, or Q & A? I think I remember running into this issue whenever I switch over to a new layout. The colors didn’t seem to change the new layout I selected. I thought this was cache related but I may be wrong. Maybe try the different layouts and see if any of them are able to be changed.
Hi Jason
I have been using the simplified layout. I finally got some of the colours to change, by heading further down the list of options. I found that changing the options that control all of the colour groups (orange, green etc) worked. I also had to disconnet my site from Cloudlfare, which isn’t a huge issue for this site but could be for others.
I tried uninstalling the plugin from the plugi screen, as well as going to my c-panel and deleting the contents of the folders and re-installing to see if that made any difference. I found that a lot of the data was still stored in the database and the uninstalling process didnt full remove all data.
After a lot of messing around I did get most of the changes done, but I have to say its been a real fiddle.
I’m creating a site where the divi community can chat, share tips and showcase their work etc. This forum plugin will come in handy. What do you think of that idea?
Not everyone has facebook to join the divi groups.
I personally think it’s a great idea. The more people we have out there talking about Divi and helping each other, the better. π
And you’re right. The Divi groups on FB are awesome, but the limitations of it being on a social platform do rear their heads occasionally.
I also agree, the Facebook group is amazing but we need an alternative. In the spirit of action, I have created a Divi community group on Telegram. Search and Join the “Divi Pro” group on Telegram. Search “Divi Pro” in telegram.
What if I have a simplepress forum running now and I want to migrate to this one?
Armando,
This may help: https://wpforo.com/community/simplepress/simplepress-migration/
I have installed wpForo on Divi based website 1 week ago. Everything went smooth π
Nice… How do you like it so far?
I like it. Nice look, responsive out of the box. Even translated everything to my native language (Lithuanian).
But at the moment sometimes happens that login (for admin too) page freezes. It is somehow related with reCaptcha (a lot of users have this issue). Temporally fix is to go to ftp and in plugins directory to rename ‘wpforo’ directory to something else. Developers promissed to check that carefully before releasing next version of forum.
Cool! I don’t need it but I think these types of posts are really helpful and I have used your other tutorials a lot.
Awesome!