How to Add a Forum to Your Website with Divi’s Marathon Layout Pack

Posted on March 20, 2018 by in Divi Resources | 31 comments

How to Add a Forum to Your Website with Divi’s Marathon Layout Pack

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.
forum

What You Need for This Tutorial

To complete this tutorial, you will need the following:

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.

add wpforo

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.

edit category

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.

edit category

Go back to the Categories and Forums page and click to edit the Main Forum.

click edit 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.

edit forum

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.

edit race prep

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.

settings

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.

forum access

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).

members tab

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.

forum before

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.

features

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.

big title

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.

style doc

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

update colors

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.

select 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].

add shortcode

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).

shadow

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.

final result

To add topics to your forums, click on one of the forums from the forum page and click the add topic button.

add topics

Here is an example of what a topic page looks like.

topic page

Here is what your forum looks like on mobile:

responsive

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.

31 Comments

  1. 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.

  2. I have installed wpForo on Divi based website 1 week ago. Everything went smooth 🙂

      • 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.

  3. What if I have a simplepress forum running now and I want to migrate to this one?

  4. 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.

    • B.J. Keeton

      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.

  5. 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.

    • Jason Champagne

      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.

  6. 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.

  7. 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.

    • Jason Champagne

      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.

  8. 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?

  9. 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?

  10. 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

  11. 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….

    • You could turn on Akismet and reCaptcha… to avoid spam registrations and postings

  12. B.J. Keeton

    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.

  13. Hi, I was looking for it. Bu I have a question:
    Is it easy to do with this layout a social network?
    Thanks.

  14. 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…

  15. 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. 🙁

  16. 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?

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

492,154 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest