Team

Solutions

Work

Blog

Engage

Team

Solutions

Work

Blog

Engage

How to add user blogs on BuddyBoss for free

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
In one of our more recent projects, we worked on a membership website where every user needs to be able to publish posts and these posts should be visible on their profiles. Our obvious WordPress theme choice on this project was BuddyBoss in combination with BuddyBoss Platform plugin. Unfortunately, BuddyBoss Platform doesn’t support User blogs so we needed to find a way to extend its functionality. We present to you BuddyBlog from BuddyDev community.

If you aren’t familiar with BuddyBoss, here is some information about the theme and the plugin you may find useful.

The BuddyBoss theme is a premium WordPress theme with a huge range of functionalities and lots of possibilities for customization. It supports multiple navigation options in a form of standard title menu and/or a sidebar menu called Buddy panel. It has rich styling and typography options including Blog, Login, Register and 404-page customization. You can easily set the maintenance page from its options or activate CSS or JavaScript minification for better performances.

The real power of BuddyBoss comes to light when the BuddyBoss Platform plugin is installed alongside. With BuddyBoss Platform you can turn your website into an online community, social network, membership website or a great place to sell online courses. In BuddyBoss creators’ words: “BuddyBoss Platform is a fork and forge of the BuddyPress plugin and bbPress plugin.” Using these two will enable you to have complete control over your website content and flexibility to extend its functionality per your needs.

A functionality we needed to implement was an option for every member to be able to post blogs from his/her profile and to hold an archive of those blogs on their profile. There is a paid plugin to support User blogs on profiles, but there is also another way of setting it up (for free). Next, we will explore the second option in more detail.

Meet BuddyBlog plugin from BuddyDev

BuddyBlog is a free WordPress plugin essentially built for BuddyPress but because BuddyBoss Platform incorporates and extends BuddyPress features it can be used with both. With BuddyBlog your members will be able to create and moderate blog posts from their profiles. The plugin is developed by BuddyDev community and it can be downloaded for free from their website.

After downloading the plugin go to WordPress Dashboard and from Add Plugin window install the plugin by using Upload Plugins option on top of the page.

BuddyBlog plugin has one complementary plugin which you need to activate to be able to perform all post-related actions (Create, Edit, Delete) directly on Frontend and from members’ profiles. It’s called BuddyPress Simple Front End Post and it’s also available for free on BuddyDev website. Just follow the same installation process as you did for BuddyBlog. Download it from BuddyDev website, install from WordPress Dashboard or by using FTP access, if you prefer it that way, and activate the plugin.

How to configure BuddyBlog settings

Before we get started with how to create posts by utilizing your newly installed plugins, let me show you what options we have available in BuddyBlog settings. From the WordPress Dashboard navigate to Settings -> BuddyBlog options.

Here is the full list of available options to customize BuddyBlog settings:

  1. Blog Post Type – by default BuddyBlog will use Post content type to publish and organize members’ posts. The plugin supports all other default WordPress post types and you can also create a custom post type and select it by using this option.
  2. Default post status – decide what should happen when members submit a form to create a new post. Posts can be published immediately or saved as drafts for further review.
  3. Enable post visibility(Public/Private) – With this option, you can allow users to set post visibility to public or private. This can be assigned after the post is published.
  4. Allow Upload – allow or disallow users to upload media from the gallery in their posts.
  5. Enable Post Thumbnail – allows users to assign a featured image to posts they create from their profiles.
  6. Comment status – open or close comments for members posts.
  7. Allow post author to enable/disable comment – give the members option to decide on comments’ status for their posts. They can allow or disallow comments for their posts.
  8. Where to redirect after creating/updating post – choose from Archive or Single post page. If the Archive is selected, members will be redirected to the post list. If Single post page is selected, members will be redirected to published post.
  9. Taxonomy and allowed taxonomies – Enable or disable taxonomies and choose which can be assigned to member posts (Categories, Tags, Formats).
  10. Show single posts on user profile – If set to Yes, posts will have URL format similar to this: https://yoursite.com/members/username/buddyblog/postname. If set to No, posts URL will have a format https://yoursite.com/postname.
  11. Limit number of posts one user can create – community owners and admins can decide to limit the number of posts per user and specify the maximum number of posts.
  12. Which capability is required for publishing, Which capability is required for creating a post and Which capability can edit the post in backend – WordPress capabilities can be used to specify which users can publish posts or edit them form WordPress Dashboard. You can read more about the roles and capabilities on the WordPress support forum.
  13. Allow users to unpublish their posts – pretty straightforward option with Yes or No selection. Same goes for the next two on the list.
  14. Allow user to edit their post – Yes or No.
  15. Allow user to delete their post – Yes or No.

How to create a new blog from your profile

When you finish with setting up your preferred options for members of your community and want to start posting new blog posts, navigate to a new tab called Blog under your profile. You will see two nested tabs called Posts and New Post. As you can guess, the first one is an archive of all your published posts and the second one is a form for adding new posts. Let’s start with adding a new post.

The frontend editor is quite simple to use. You will have options to set post title, add post content and format it by using toolbar similar to WordPress Classic editor, upload media from WordPress Media Gallery and set featured image for your post. Add your content and when finished click on Post button to publish your new blog post. Depending on settings you chose in BuddyBlog options you will be redirected either to Post archive on your profile or to post itself. We are redirected to the Post archive where we can see all our posts starting with the latest ones.

What we don’t like here is a lack of stylization and an overall presentation of the Archive page. By default, you will see a full list of the articles with all the content. See the full page shot. But don’t worry, we can help you refine it.

How to style members Post archive

Instead of having full post content presented on the archive page, which is bad for several reasons, we are going to apply some CSS rules here to improve it visually and organize the page better. We want to achieve something similar to this.

Here you see a nice two-column layout presenting only featured image, a title linked to the original post, metadata and some styled action-buttons which were a plain text in the original design. We’ll give you a full CSS code for this. The markup and CSS classes we will use come from BuddyBlog plugin itself so the code can automatically be applied to your website. If you need additional information about the code for better understanding and adjusting it to match your design, please let us know in the comments.

You will need to place the following code in a stylesheet on your website. We strongly recommend that you use the BuddyBoss child theme and place all custom code inside the custom.css file. Access this file from Theme Editor under BuddyBoss child theme assets/css folder and paste this code:

.my-posts .post {
    width: 50% !important;
    float: left !important;
    padding-right: 30px !important;
}
.my-posts .post .author-box {
    display: none !important;
}
.my-posts .post .post-content .post-featured-image img {
    height: 300px !important;
}
.my-posts .post .post-content .posttitle {
    padding: 25px 30px !important;
    border-left: 1px solid #e7e9ec !important;
    border-right: 1px solid #e7e9ec !important;
    margin: 0 !important;
    background-color: #f5ffff !important;
}
.my-posts .post .post-content .posttitle a {
    color: #122B41 !important;
}
.my-posts .post .post-content .posttitle a:hover {
    color: #007CFF !important;
}
.my-posts .post .post-content .date, .my-posts .post .post-content .postmetadata {
    padding: 0 30px 25px 30px !important;
    border-left: 1px solid #e7e9ec !important;
    border-right: 1px solid #e7e9ec !important;
    margin: 0 !important;
    background-color: #f5ffff !important;
}
.my-posts .post .post-content .entry {
    display: none !important;
}
.my-posts .post .post-content .post-actions {
    padding: 0 30px 25px 30px !important;
    border-left: 1px solid #e7e9ec !important;
    border-right: 1px solid #e7e9ec !important;
    border-bottom: 1px solid #e7e9ec !important;
    background-color: #f5ffff !important;
    text-align: center !important;
}
.my-posts .post .post-content .post-actions a {
    font-size: 12px !important;
    padding: 8px 24px !important;
    border: 1px solid #007CFF !important;
    border-radius: 100px !important;
    margin-right: 8px !important;
    background-color: #007CFF !important;
    color: #fff !important;
}
.my-posts .post .post-content .post-actions a:hover {
    background-color: #fff !important;
    color: #007CFF !important;
    border: 1px solid #007CFF !important;
}

To make this layout fully responsive and good-looking on tablets and mobile devices please add following code to the same BuddyBoss child theme stylesheet. These are media query rules where we address important breakpoints moving from desktop to smaller devices.

@media (max-width:1100px) {
    .my-posts .post .post-content .post-actions a {
	font-size: 10px !important;
	padding: 8px 12px !important;
	margin-right: 5px !important;
    }
}
@media (max-width:600px) {
    .my-posts .post {
	width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
    }
    .my-posts .post .post-content .post-featured-image img {
    	height: 200px !important;
    }
}
@media (max-width:310px) {
    .my-posts .post .post-content .post-actions a {
	display: block !important;
	margin-bottom: 25px !important;
	width: 60% !important;
	margin-left: auto !important;
	margin-right: auto !important;
    }
}

After adding this code you should end up with something like this for:

Tablets
Mobile devices

Conclusion

Let’s recapitulate. To introduce user blog on your BuddyBoss or BuddyPress community you need to install BuddyBlog plugin from BuddyDev and support it with a plugin called BuddyPress Simple Front End Post – to enable creation and moderation of posts in frontend. Use the CSS code provided in this guide to add better organization and a more appealing layout for user blogs.

If you are looking for help in building online communities, membership or online courses platforms reach out to us. We have a lot of experience in building these platforms.

Looking forward to hearing how this worked for your community. Send us your feedback and questions in the comments section below.

Do you want our team to design and develop a stunning website for you? Send us the details and we'll start discussing a strategy for your project!
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.

Leave a Reply

Comments

    1. Nemanja Tomanovic Author

      Thank you for reaching out, Désirée! To keep image ratio remove fixed height for the image and change this rule to be:

      .my-posts .post .post-content .post-featured-image img {
      width: 100% !important;
      height: auto !important;
      }

      Please let me know if this worked for you!

  1. Avatar

    Hi Nemanja,
    thank you for this very useful plugin!

    Is it possible, to display related posts under each post?
    By using buddyblog they don´t show up anymore.

    Thanks for help
    kind regards
    Thomas C.

    1. Nemanja Tomanovic Author

      Hi Thomas Christian Liebl and thank you for your comment. I have worked with this plugin on several websites and all had related posts visible on single posts. True, my setup on these websites was BuddyBoss theme + BuddyBoss Platform + BuddyBlog and in this scenario, the Theme provided related posts functionality. What setup are you using on your website? Does your theme provide related posts?

Leave a Comment

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email