BuddyBoss Theme

Installing BuddyBoss

Modified on April 22, 2016

In this tutorial I will teach you how to quickly install the BuddyBoss theme (version 3.0+). Before you start, make sure to install and set up WordPress, and optionally BuddyPress and bbPress as well. You can always download the most recent version of BuddyBoss by clicking “My Account” under your profile icon at the top of this site while logged in.


Easy install via WordPress dashboard

  1. Log in to your WordPress dashboard and go to Appearance > Themes.
  2. Click Add New. Click Upload.
  3. Find the theme file “buddyboss-[version].zip” from your computer and upload it. Click Install Now.
  4. Find the theme file “buddyboss-child-[version].zip” from your computer and upload it. Click Install Now.
  5. Activate the “BuddyBoss Child Theme” as your main theme.
  6. You can now access theme settings at Appearance > BuddyBoss and Appearance > Customize.

tutorials-install-bb


Or: Manual install via FTP

  1. Unzip “buddyboss-[version].zip” and “buddyboss-child-[version].zip”.
  2. Upload both theme folders via FTP to your wp-content/themes/directory. Make sure the parent theme folder is titled “buddyboss” and not any other variation for child themes to work.
  3. Log in to your WordPress dashboard and select Appearance > Themes.
  4. Activate the “BuddyBoss Child Theme” as your main theme.
  5. You can now access settings at Appearance > BuddyBoss.

install-ftp


Minimum Server Requirements

BuddyBoss should work on the vast majority of server setups. If you run into server issues, contact your web host to make sure your server has the following standard technologies installed.

  • PHP 5.6+
    • php5-gd
    • php5-mbstring
    • php5-mysql
    • php5-exif
  • MySQL 5.6+
  • The mod_rewrite Apache module

Back To Top

Basic Setup

Modified on February 5, 2014

In this tutorial I will teach you how to configure the basic options for the BuddyBoss theme (version 3.0+). To view all of the options for BuddyBoss, just navigate through the other tutorials listed on this page.

Setting up custom menus

  1. Go to Appearance > Menus.
  2. Create a new menu and add all desires pages into that menu.
  3. Drag and drop to reorder pages. Click “Save Menu”.
  4. Click “Manage Locations” and set your new menu to the desired location.

tutorials-menus

BuddyBoss comes with four menu locations:

  • Primary Menu — shows up in the header
  • Footer Menu — shows up in the footer
  • Profile: Extra Links — shows up in all BuddyPress user sidebars
  • Group: Extra Links — shows up in all BuddyPress group sidebars

You can drag and drop menus into an indented position to get drop downs for the “Primary Menu” location.


Adding featured images to blog posts

  1. In the WordPress Dashboard, go to Posts and select a post to edit.
  2. Under “Featured Image” in the right column, click “Set featured image”.
  3. Upload your image into the media uploader, and then click “Set featured image”.
  4. Click to “Update” your blog post.
  5. Now when you view your blog index, you will see your uploaded image featured for this post

posts-feat-image


Removing comments on individual pages

By default, all new pages will have a comments box. You may want to change this behavior.

  1. From the front-end, navigate to the page you want to edit.
  2. Click “Edit Page” in the Toolbar at the top.
  3. Open “Screen Options” from the top and check the “Discussion” option.
  4. Scroll down on the page to the Discussion section, and uncheck “Allow comments”.

tutorials-screen-options


Allowing users to create accounts

This is only relevant if you are using the BuddyPress plugin.

1. Go to Settings > General. Select “Anyone can register” under Membership.

tutorials-setting-general

2. Go to Settings > BuddyPress > Settings. Make sure “Show the Toolbar for logged out users” is set to “Yes”.

tutorials-toolbar


Changing the default user avatar

BuddyBoss comes with an attractive custom avatar that can replace the default WordPress “Mystery Man”.

  1. Go to Settings > Discussion in your Dashboard.
  2. At the bottom of the page, set Default Avatar to “BuddyBoss Man”.
  3. Click “Save Changes”.

tutorials-avatar


Configuring advanced member search

This is only relevant if you are using the BuddyPress plugin.

  1. Install the “BP Profile Search” plugin.
  2. Go to Users > Profile Search.
  3. “Search Form Header” and “Toggle Form” are not relevant. Whatever you put in there will not be used as those options are only for the hard-coded option. BuddyBoss is using the widget provided with the plugin.
  4. Check all of the profile fields you would like to be searchable. How to set up profile fields →
  5. Leave “Add to Members Directory” unchecked. We will be using the widget instead.
  6. Click “Save Changes”.
  7. Navigate to Appearance > Widgets.
  8. Add the “BP Profile Search” widget to your desired widget area (usually Members → Directory).

tutorials-bp-profile-search

Back To Top

Customize

Modified on May 18, 2014

In this tutorial I will teach you how to use the advanced theme options to customize the look and feel of your site (requires BuddyBoss 3.1+).

You can access all of the theme customizer options at Appearance > Customize from your WordPress dashboard. Every time you change a setting, you will see your site dynamically update in the live preview next to the settings. To preview what it would look like on a mobile device, just make your browser window skinny while using the customizer.

If you want a completely unique design, ask about our custom theme and plugin development.


Changing the Site Title & Tagline

If you have not uploaded a logo, your Site Title and Tagline will automatically display where the logo would be.

  1. Go to Appearance > Customize.
  2. Open Site Title & Tagline.
  3. Type your desired text.
  4. Click Save & Publish.

tutorials-sitetitle-tagline


Adding a Logo

If you upload a logo, it will display instead of the Site Title & Tagline.

  1. Go to Appearance > Customize.
  2. Open Logo.
  3. Click “No Image” so it opens up.
  4. Under “Drop a file here or select a file“, click “select a file”. Find your logo from your computer.
  5. Click Save & Publish.

tutorials-logo

Your newly upload logo will now be visible on the WordPress login screen as well.

tutorials-login-logo


Changing the WordPress Toolbar layout

Starting in BuddyBoss 3.1.1, you can change the toolbar layout via the customizer settings. The two options are Full Width, which is similar to the default WordPress Toolbar, or Float Right which will dock the Toolbar to the right side of the screen.

Fluid Width

  1. Go to Appearance > Customize.
  2. Open WordPress Toolbar.
  3. Select “Fluid Width” which should be the default.
  4. Click Save & Publish.

tutorials-toolbar-fluid

Float Right

  1. Go to Appearance > Customize.
  2. Open WordPress Toolbar.
  3. Select “Float Right”.
  4. Click Save & Publish.

tutorials-toolbar-float


Customizing Colors

You can easily change the colors for all of the major elements of your site.

  1. Go to Appearance > Customize.
  2. Open Colors → Layout, or Colors → Text.
  3. For each element you want to adjust, select your desired color using the color picker.
  4. Click Save & Publish.

tutorials-colors


Customizing Fonts

You can easily change the fonts for all of the major elements of your site.

  1. Go to Appearance > Customize.
  2. Open Typography.
  3. For each element you want to adjust, select your desired font using the font dropdowns.
  4. Click Save & Publish.

tutorials-fonts


Adding social media links to your footer

You can easily social media links (Facebook, Twitter, etc.) into your site’s footer. For this particular section, you will only see the preview update after clicking Save & Publish.

  1. Go to Appearance > Customize.
  2. Open Social Media Links.
  3. Enter your social media link for each icon that you want to display.
  4. Click Save & Publish.

tutorials-social-links


Pro Tip: Deactivating the color and font styles

The color and font options are automatically outputted as inline styles into the HTML of your website. If you inspect the HTML you will see them in <style type=”text/css”> [styles] </style>. Even if you have not used the customizer, it will still output the default colors into the HTML, which will generally override styles set for the same CSS attributes in your child theme.

If you are making a lot of custom CSS edits you may wish to disable the customizer’s CSS output entirely. This is easy to do. Just add this function into your child theme’s functions.php file:

// Remove customizer CSS output
add_action( 'after_setup_theme', 'remove_buddyboss_customizer_css') ;
function remove_buddyboss_customizer_css() {
remove_action('wp_head', 'buddyboss_customizer_css');
}

Back To Top

Featured Slider

Modified on February 5, 2014

In this tutorial I will teach you how to set up the optional Featured Slider on your homepage (requires BuddyBoss 3.1+).

After installing BuddyBoss 3.1+, you will see a new menu section in your WordPress dashboard titled Slides. If you add slides they will automatically display in a slideshow on your homepage.

Adding slides

You need to add at least two slides for the slideshow to work properly.

  1. Go to Slides > Add New.
  2. Add the primary slide text as the post title.
  3. Add the secondary slide text into the Secondary Text section.
  4. If you want a button on the slide, add the text and URL destination for the button into the “Learn More” button section.

tutorials-slides-new

Next, you need to upload an image for your slide. The image must be at least 1040px wide by 400px tall, otherwise the slideshow will get distorted as you scale it.

  1. Find the Featured Image section, by default in the right column of the editor.
  2. Click “Set featured image” and upload your image at 1040px by 400px.
  3. Once you see your image successfully uploaded, click “Set featured image”.
  4. You can now “publish” your slide.

tutorials-slide-publish

Your new slide should now be visible on your homepage. Remember, you need at least two slides for the slideshow to function correctly.

tutorials-slides-finished


Putting your slideshow on a different page

Want to add your slideshow to another page besides your homepage? You will have to edit some code, but this is a relatively simple edit.

In your child theme, create a page template that you plan on using for the page that will contain your slideshow. In the page template, add the following code snippet just below the header call to display the slider.

<?php get_template_part( 'content', 'slides' ); ?>

Back To Top

User Wall Posting

Modified on June 14, 2015

User Wall Posting requires that you have the BuddyBoss Wall plugin installed. The feature allows your members to interact with each other in an intuitive manner similar to Facebook, with interactive “Walls”, News Feeds, and Likes.

Activating User Wall Posting

  1. Go to Settings > BuddyPress > Components.
  2. Make sure both “Friend Connections” and “Activity Streams” are enabled.
  3. Go to the Settings > BuddyBoss Wall menu in your Dashboard.
  4. Configure the options as required for your site.

You should now be able to go any user’s profile and write on his or her Wall.

profile-walls

Back To Top

User Photo Uploading

Modified on June 14, 2015

User Photo Uploading requires that you have the BuddyBoss Media plugin installed, sold separately. The feature allows your members to upload photos to their profiles, and to other user’s profiles as well if you have User Wall Posting enabled.

Activating User Photo Uploading

  1. Go to the Settings > BuddyBoss Media menu in your Dashboard.
  2. Configure the options as required for your site.

You should see a new “Photos” tab on your profile. You can upload a photo from the Photos tab, or from your main profile activity page. Photos can be organized into Albums as well.

photo-uploading

Back To Top

Widgets

Modified on February 5, 2014

Widgets Explained

Every page on your site can have a sidebar that you can place “widgets” into. Add widgets by going to Appearance > Widgets and dragging the widgets you wish to use into the appropriate sidebars. When you open any sidebar box it will explain where and how that particular sidebar is used.

tutorials-widgets

BuddyBoss comes with 16 widget areas. They are:

WordPress Pages & Posts

  • Page → Right Sidebar
  • Page → Left Sidebar

Homepage

  • Homepage → Right Sidebar
  • Homepage → Left Sidebar

BuddyPress Pages

  • Members → Directory
  • Members → Single Profile
  • Groups → Directory
  • Groups → Single Group
  • Activity → Directory
  • Forums → Directory & Single
  • Blogs → Directory (multisite)

Footer

  • Footer #1
  • Footer #2
  • Footer #3
  • Footer #4
  • Footer #5

BuddyBoss Login Widget

BuddyBoss comes packaged with a profile login widget (requires the BuddyPress plugin). BuddyPress 1.9+ now comes with a login widget as well, so you may prefer to use their version.

  1. Go to Appearance > Widgets.
  2. Add the “(BuddyBoss) Profile Login Widget” to your desired widget area. You can add it to as many widget areas as you’d like.
  3. Give the widget a title of your choosing. The title will only be displayed for logged out users; logged in users see their profile info.

Back To Top

Language Translations

Modified on February 13, 2014

Although BuddyBoss displays in U.S. English by default, the theme has the built-in capability to be used in any language. Every language instance in the theme is tied to a translation file, which can be used to translate the theme into your language of choice.

There are two ways to translate a theme or plugin into another language. You can use a WordPress translation plugin, or you can directly edit the language files using desktop software. I’ll go over both methods in this tutorial.


Introduction

The packaged language files can be found in your theme at /buddyboss/languages/. In there you will see en_US.po and en_US.mo. These are the language files, with the default translation set to U.S. English.

tutorials-languages

Language Files Explained

Language files are somewhat confusing, so I’ll try my best to help you out here. The first part of the filename displays a naming structure to identify the specific language it is meant to be translated into.  en_US stands for English, U.S. You can see all of the various country codes at this resource.

The second part of the filename tells the computer which file to use. The .po extension tells you it is a Portable Object file type, meaning it is the human readable version of the language file. The .mo extension tells you it is a Machine Object file type, meaning it is the machine-optimized version of the language file that the software actually uses. Generally you make your translations in the PO file, and then the MO file is automatically updated when you save the PO file.


Option 1: Translating with a WordPress plugin

Two popular plugins for translating languages are Codestyling Localization and the WPML plugin. In this tutorial I will be using the Codestyling Localization plugin simply because it is free. For this tutorial, we’ll pretend you are translating your copy of BuddyBoss into German.

1. Install and activate the Codestyling Localization plugin.
2. Go to Tools > Localization.
3. Find “BuddyBoss [version]” and click on “Add New Language”.

tutorials-languages-localization

4. Select your country’s radio button and click “create po-file”. At this point a PO file should have been created in the /buddyboss/languages/ folder.

tutorials-languages-step

5. For your country, click “Rescan” and then “scan now”.

tutorials-languages-scan

6. For your country, click “Edit”. This will bring you another page listing the language instances available to be translated.
7. Click on “Edit” in the Actions column for every language instance that you would like to translate.
8. Type your translation for each language instance, and click “Save” when you are done with each.

languages-translation

9. Click “generate mo-file”. At this point, you should see a MO file created in the /buddyboss/languages/ folder.

tutorials-languages-mo

10. Assuming your server is set to German, you should see your German translations appear on the live website now. If you don’t see it working yet, you may need to change your country as specified in wp-config.php to reflect the translation. The default is define('WPLANG', '');. In this example, you would change it to define ('WPLANG', 'de_DE');.


Option 2: Editing language files directly

You will need special software to directly edit your PO/MO files. The software I personally use is Poedit for Mac. It’s not glamorous but it gets the job done. You may also consider Pootle (web-based) or GNU Gettext (command shell). The rest of this tutorial will assume you are using Poedit.

Once you have the necessary software installed, you should go ahead and find the PO/MO files from the theme, located at /buddyboss/languages/. Copy these files into your child theme and put them into /buddyboss-child/languages/.

Make sure you see this exact line uncommented in the functions.php file in your child theme:  load_theme_textdomain( 'buddyboss', get_stylesheet_directory() . '/languages' );. That line tells WordPress to load your child theme’s language files in place of the parent theme’s language files. If you see the textdomain written as 'buddyboss_child', for this method you will want to change it to read as 'buddyboss'.

Let’s pretend you are translating your copy of BuddyBoss into German. Copy en_US.po and en_US.mo on your local machine and rename them to de_DE.po and de_DE.mo, the German (Deutschland) country codes as specified at this resource. Now open the PO file in Poedit. The software should display a bunch of lines of text which you can translate. Select any line of text, make your translations, and when you hit “Save” your MO file should get auto-updated on your machine.

lanuages-poedit

Once you are finished translating every line of text, confirm that both of your changed files (MO and PO) are in your child theme’s language folder located at  /buddyboss-child/languages/ and upload the modifications to your server.

Assuming your server is set to German, at this point you should see your German translations appear on the live website. If you don’t see it working yet, you may need to change your country as specified in wp-config.php to reflect the translation. The default is define('WPLANG', '');. In this example, you would change it to define ('WPLANG', 'de_DE');.

Back To Top

Editing CSS

Modified on February 13, 2014

In this tutorial I will be teaching you how to edit CSS in your BuddyBoss child theme. We’ll start with a brief intro to child themes, and then I’ll use an example CSS edit to teach you how I would go about implementing it. This tutorial assumes you already have a working knowledge of how to write CSS.

Intro to Child Themes

A child theme is the safest and easiest way to modify the BuddyBoss theme, whether you want to make a few tiny changes or extensive changes. In WordPress a “child theme” is a theme that inherits the functionality of another theme, called the “parent theme”. It allows you to modify, or add to, the functionality of that parent theme. In our case BuddyBoss is the parent theme, and it comes pre-packaged with a starter child theme. We strongly recommend you activate your child theme as the primary theme, and make your CSS edits in the child theme files. The rest of this tutorial assumes you are using a child theme for your CSS edits.

Why use the packaged child theme?

We often release theme updates with bug fixes or new features, and if you’ve only modified your child theme you can safely upgrade BuddyBoss without losing any of your edits. The child theme inherits all of the templates and functionality from the parent theme, but allows you to change the appearance of the parent theme without editing any of its code, because code in the child theme overwrites code in the parent theme. More information can be found in our detailed Introduction to Child Themes.


Tutorial CSS Edit

For the remainder of this tutorial, I will be implementing a dummy CSS edit so you can follow the exact steps I would take, and then apply those same steps to almost any other CSS edit you may want to implement. For this tutorial we will be changing the background color of the desktop primary navigation from the default Blue to Red. You can actually change this color without touching any code with the Customizer, but we’ll do it manually for the purposes of the tutorial.

This is a good example to use, because it’s easy to test, only applies to large screen sizes (requires media queries) and also overrides a Customizer setting. This single example covers most use case scenarios.

Here is the final change we are aiming for:

tutorial-finished

1. Hunt down the styles to edit

The first step in modifying a style found in the parent theme is to figure how and where that style is being generated. To do this, we will use the Web Inspector that comes with the Google Chrome web browser. It is an extremely valuable tool for any web developer, and makes it particularly easy to figure out where CSS styles are being defined in just about any website you visit.

While viewing your website in Google Chrome, right-click on the element you want to edit (the navigation) and click “Inspect Element”.

tutorial-inspect

You will now be presented with a panel in your browser showing you all of the styles for the element you selected. If you accidentally clicked the wrong element, you can navigate through the HTML of the page until you grab the correct element, and you will see the Inspector highlighting elements on the page to let you know what you are about to select.

tutorial-inspected

In the left column you can see the HTML, and in the right column you can see the corresponding CSS for the HTML element you have selected. You can actually click into the right column of the Inspector to play with the CSS and see a live preview of your changes immediately in the browser. This is usually how I experiment with potential CSS changes. For this tutorial, we will be adjusting the CSS selectors defined as .main-navigation, .main-navigation ul.nav-menu to have the attribute of background-color: #be3b2f, which defines the background color as Red using the appropriate HEX color value. Just click into the right column and change the background-color to #be3b2f and you should see the change in your browser. No need to save or refresh.

tutorial-browser-inspect

Keep in mind these edits are only happening in your browser. If you refresh the page, they will be lost. The next step is to make them permanent by adding them into your child theme’s stylesheet.

2. Add your CSS edits into your child theme

We recommend adding all of your CSS edits into your child theme at /themes/buddyboss-child/css/custom.css. Any styles added to this stylesheet will overwrite styles set in the parent theme’s /css/ folder.

child-css-folder

Open your stylesheet in a text editor

custom-cssOpen up custom.css in your favorite text editor. My personal favorite is Sublime Text 2. It’s free to try, powerful, lightweight and available on both Mac and Windows. Some popular alternatives are Coda for Mac (expensive but reliable) and the good old Notepad application that comes with Windows. If you prefer to edit the CSS directly in WordPress (not an ideal method) I suggest installing the WP Editor plugin.  Among other things, it will allow you to navigate through the folder structure of the theme and will give you syntax highlighting.

Add your edits into the correct “media query”

Onward! The next step is to add your CSS edits into custom.css. When you first open up the file, you will notice that it is broken down into sections based on media queries, allowing the theme to be “responsive” for mobile devices. Media queries allow CSS to load based on different screen sizes. We start with global styles that are loaded for all screen sizes. Then we narrow down to sizes below or above certain widths (to approximate which device you are using), targeting each width using specific CSS. In BuddyBoss we generally break it down into phone, tablet, and laptop & desktop as the three primary screen sizes.

Go back to your Inspector for a second. You’ll notice that the color we’ve applied to the navigation is in fact located within a media query! This particular media query specifies that the style is to be applied only when screens are 721px or wider. You will want to add your CSS edit into this same media query in custom.css.

tutorial-media-query

In the Chrome Inspector, you can actually just put your cursor into the inspector and copy the whole code snippet. Then back at custom.css, paste the CSS you copied from the Inspector into the corresponding media query. It should look something like this:

/*--------------------------------------------------------------
2.3 - MINIMUM width of 721 pixels (tablets+)
--------------------------------------------------------------*/
@media screen and (min-width: 721px) {

   .main-navigation, .main-navigation ul.nav-menu {
      background-color: #be3b2f;
   }
}/* don't delete this closing bracket */

Ordinarily this would be the final step. However you will likely see no change in your browser. The reason is that this particular style happens to be defined additionally in the Customizer, which injects styles right into the HTML, thereby overriding stylesheets with all of the custom color selections from the admin options. The inline Customizer styles are taking over. You can tell this by going back to the Chrome Inspector. You will see that this particular style is not coming from a stylesheet, but rather from (index) which just means it’s coming from the HTML file.

tutorial-customizer-override

Override the Customizer

For this particular CSS edit, we will need to override the Customizer’s priority. This is actually very simple. We just need to add an !important declaration to our style attribute. Like so:

/*--------------------------------------------------------------
2.3 - MINIMUM width of 721 pixels (tablets+)
--------------------------------------------------------------*/
@media screen and (min-width: 721px) {

   .main-navigation, .main-navigation ul.nav-menu {
      background-color: #be3b2f !important;
   }
}/* don't delete this closing bracket */

If you did everything correctly, you should now see Red navigation on your site. You can follow these steps for pretty much any CSS edit. And always make sure to add the CSS into the proper media query, or to no media query (the beginning Global section) depending on what screen size you need to target.


Extra Tip: Mobile CSS

Editing mobile CSS is no different from desktop CSS. While using the Chrome Inspector, make your browser window tiny enough that the layout collapses to mobile mode. It helps to dock the Inspector to the right side of the screen in this case, by clicking on the little square icon, to free up room to see everything. Then just follow the same steps and add your edits into the appropriate “small screen” media queries.

tutorial-mobile-css

If you want to see something really cool, check this out. You can plug your Android device into your computer and inspect/edit CSS loading from your Android device within the Chrome browser on your desktop. This is how I test things natively on Android and it saves a ton of time. Make sure to download Chrome beta on your Android device for this to work (as of February 13, 2014).

Back To Top

Boss. Theme

Editing CSS

Modified on January 29, 2015

This tutorial assumes you have a basic working knowledge of CSS and are comfortable touching code.

Back To Top

WordPress

WordPress install

Modified on February 4, 2014

In this tutorial I will teach you how to manually install WordPress. I am assuming you have access to FTP (to upload files) and the ability to create a database at your server. If your server has “1-click install” for WordPress, you may prefer to use that method, in which case you should contact your web host and ask how to access their 1-click install.

Before watching this video…

  1. Purchase web hosting (see below)
  2. Create a database at your server. Save the database name, username, and password.
  3. Set up FTP access at your server for your domain.

Web Hosting

  • Find a reliable web host. My favorite is KnownHost due to their uptime, excellent hardware, great customer support, and reasonable pricing. BuddyBoss is hosted there (SSD-2 option) and we’ve been very happy with them.
  • You can start with cheap shared hosting if you’re on a budget, but BuddyPress queries the database constantly and your site will be slow. You’re much better off with a fast SSD (solid state drive) and a ton of RAM (memory) on your own dedicated virtual server (no other sites sharing resources). It makes an enormous speed impact.

1. Upload WordPress to your server (0:28)

  1. Download the latest version of WordPress from wordpress.org/download.
  2. Unzip the folder.
  3. Upload all files to the root directory of your domain on your server, often /public_html/ or /httpdocs/.

2. Edit your wp-config file (2:03)

  1. Duplicate wp-config-sample.php and rename it to wp-config.php.
  2. Open wp-config.php using your favorite text editor.
  3. Add your database name next to DB_NAME.
  4. Add your database username next to DB_USER.
  5. Add your database password next to DB_PASSWORD.
  6. Add your server hostname next to DB_HOST. On most servers this will retain the default of localhost. Check with your hosting provider to be sure.

3. Install WordPress (3:45)

  1. Go to your domain in a web browser (like Chrome or Firefox) and refresh the page.
  2. Add your site title.
  3. Create a unique username (avoid “admin” for security purposes).
  4. Create a unique and strong password. You can generate a strong password here.
  5. Add your email. This will be used for admin notifications by default.
  6. Check if you want search engines (like Google) to be able to index and display results for your website (can be changed later).
  7. Click “Install WordPress” and then log in using the username/password you just set up.

Back To Top

WordPress setup

Modified on February 4, 2014

In this tutorial I will teach you how to correctly set up a fresh WordPress install.

Before watching this video…

  1. Purchase web hosting (see below).
  2. Install WordPress.

Web Hosting

  • Find a reliable web host. My favorite is KnownHost due to their uptime, excellent hardware, great customer support, and reasonable pricing. BuddyBoss is hosted there (SSD-2 option) and we’ve been very happy with them.
  • You can start with cheap shared hosting if you’re on a budget, but BuddyPress queries the database constantly and your site will be slow. You’re much better off with a fast SSD (solid state drive) and a ton of RAM (memory) on your own dedicated virtual server (no other sites sharing resources). It makes an enormous speed impact.

1. Familiarize yourself with the WordPress dashboard (0:16)

  1. Click your site title in the Admin Bar to access the dashboard. Or go to www.yourdomain.com/wp-admin to access the login screen.
  2. See an overview of your site in the Dashboard > Home section.
  3. See WordPress and plugin updates in the Dashboard > Updates section.
  4. Play with creating blog posts and pages in the Posts and Pages sections.

2. Configure basic WordPress settings (1:14)

  1. Navigate to Settings > General.
    • Check “Anyone can register” if you want to later let BuddyPress users create accounts.
    • Select your local timezone.
    • Click “Save Changes”.
  2. Go to Settings > Reading.
    • Under “Search Engine Visibility”, check if you want search engines (like Google) to index and display results from your site or not.

3. Configure Blog and Homepage setup (2:20)

Option A: Use your homepage as the blog

  1. Go to Settings > Reading.
    • Set “Front page displays” as “Your Latest Posts”.
    • Your blog posts (created at Posts > Add New) should now feed into the homepage.

Option B: Use a static homepage, with blog posts on a separate page

  1. Go to Pages > Add New.
    • Create a page and name it “Home” or whatever you want your homepage to be titled.
    • Create another page and name it “Blog” or whatever you want your blog page to be titled.
  2. Go to Settings > Reading.
    • Set “Front page displays” as “A static page”.
    • Set the home page you just created as the “Front page”.
    • Set your newly created page as the “Posts page.”
  3. Your blog posts (created at Posts > Add New) should now feed into the blog page.

4. Create a custom navigation menu (3:50)

  1. Go to Appearance > Menus.
    • Rename the default “Menu 1” to the name you prefer. Or click “create a new menu”.
    • Add the pages you want into the menu.
    • Drag and drop to re-order the pages within the menu.
    • Click “Save Menu”.
  2. Go to “Manage Locations”, still in the Menus screen.
    • Assign your new menu to the desired menu location from your theme.
    • Click “Save Changes”.

5. Set up “pretty permalinks” for better URLs (5:13)

  1. Go to Settings > Permalinks.
    • Set it to whichever option you prefer. Most people recommend using the “Post name” option.
    • Click “Save Changes”.

Back To Top

Database backups

Modified on February 7, 2014

In this tutorial I will teach you how to set up automated database backups for WordPress.

It is extremely important that you back up your database on a regular schedule. What if your server crashes? Or you forget to pay your hosting bill? Or your site gets hacked? Or you mess something up? All of your data could be permanently lost, which would be a shame considering how easy it is to prevent the problem. With automated backups, you can restore your entire site from one of your database backups and be back up and running as if nothing ever happened.

Installing a database backup plugin

There are lots of methods to set up WordPress database backups, and I’ll focus on the plugin that I have personally used for many years. The plugin is called WP-DBManager. I recommend this plugin because it has proven to be dependable, allows for continuous backups to your server and lets you email the backups to yourself.

1. Install the WP-DBManager plugin.
2. Activate the plugin.
3. Upon activation, you will immediately get an error message alerting you that “Your backup folder MIGHT be visible to the public”. We will fix this in the next step.

backups-error

4. Log into your website via FTP and locate /wp-content/plugins/wp-dbmanager/htaccess.txt. This is the file that needs to be moved manually.

backup-htaccesstext

5. Move the file htaccess.txt into the newly created backup folder located at /wp-content/backup-db/. Then rename the file to  .htaccess. You many need to turn on “hidden files” in your FTP client to see .htaccess after renaming it. This should resolve the error message.

backup-htaccess

6. You should now see a new menu in your WordPress dashboard titled “Database”. Open it and navigate to “DB Options”. From here you can configure how many database files to keep, how often to back up, optimize and repair your database, and if you would like the database emailed to you. Configure your desired options and click “Save”.

I personally back up my sites every hour, because on a BuddyPress site there is constantly new activity being added to the database. I set the Gzip option to “Yes” which compresses your backups so they take up less space on the server. For Maximum Backup Files, I recommend at least 10, but you can set it to as many as you can realistically save to your server without causing storage problems.

db-options

7. The final step is to confirm that everything is actually working. Do not skip this step! Go back to your site’s file system via FTP and make sure that you see backup files in  /wp-content/backup-db/. If you see a file backed up there, you’re all set. Next time you have a database problem, you can safely come back to this folder and grab an old copy (possibly from earlier that day!) to restore your site from.

backup-file

Back To Top

BuddyPress

BuddyPress install + setup

Modified on March 8, 2015

In this tutorial I will teach you how to install and set up the BuddyPress social networking plugin.

Before watching this video…

  1. Install and set up WordPress.

1. Install BuddyPress (0:28)

  1. Log into your WordPress dashboard and go to Plugins > Add New.
  2. Search for “buddypress”.
  3. BuddyPress should be the first result. Click “Install Now”.
  4. After WordPress finishes downloading the plugin, click “Activate Plugin”.

2. Activate BuddyPress components (2:04)

  1. Go to Settings > BuddyPress > Components.
  2. Activate the components you plan on using. Do not activate all of them unless you need them all!
  3. Click “Save Settings”.

3. Attach pages to BuddyPress components (2:43)

  1. Go to Settings > BuddyPress > Pages.
  2. BuddyPress should have automatically created and attached pages to your components. If not, or if you want editable pages for the “Register” and “Activate” components (not necessary) first create the pages at Pages > Add New and then return to here and select your new pages for each component.
  3. Click “Save Settings”.

4. Configure BuddyPress settings (3:54)

  1. Go to Settings > BuddyPress > Settings.
  2. Select the settings you desire, such as Group creation, Account Deletion, etc.
  3. Click “Save Settings.”

Option: Allow new users to create accounts on your site

  1. Go to Settings > General. Select “Anyone can register” under Membership.
  2. Go to Settings > BuddyPress > Settings. Make sure “Show the Toolbar for logged out users” is set to “Yes”.

5. Set up user profile fields (6:28)

  1. Go to Users > Profile Fields.
  2. Add all profile fields you want to collect during initial user sign ups into the “Base” profile group (you can rename this).
  3. Create new profile field groups for collecting information after signup. Add the desired profile fields to these groups.

Back To Top

bbPress

bbPress install + setup

Modified on February 4, 2014

In this tutorial I will teach you how to install and set up the bbPress forum software plugin.

Before watching this video…

  1. Install and set up WordPress.
  2. Optional: Install BuddyPress.

1. Install bbPress (0:20)

  1. Log into your WordPress dashboard and go to Plugins > Add New.
  2. Search for “bbpress”.
  3. bbPress should be the first result. Click “Install Now”.
  4. After WordPress finishes downloading the plugin, click “Activate Plugin”.
  5. You should now see sections for Forums, Topics, and Replies in the WordPress dashboard.

2. Configure bbPress settings (1:11)

  1. Got to Settings > Forums.
  2. Select the settings you desire.
  3. Make sure the “Forum Root” is a unique URL, not used by an existing page on your site.
  4. Click “Save Settings”.

3. Create your first forum (2:06)

  1. Go to Forums > New Forum.
  2. Give the forum a title and description.
  3. Select the Type, Status, and Visibility for the forum.
  4. Click “Publish”.
  5. Click “View Forum” to see it on the front-end and add your first topics and replies.

4. Optional: set a WordPress page as your forum index (4:39)

  1. Go to Pages > Add New.
  2. Give the page a title.
  3. Add this shortcode into the text editor: forum-code
  4. Click “Update”.

5. Allow BuddyPress groups to have forums (6:23)

  1. Install BuddyPress
  2. Activate the BuddyPress Groups component in Settings > BuddyPress > Components.
  3. Go to Settings > Forums.
  4. Under “BuddyPress Integration”, check “Allow BuddyPress Groups to have their own forums”.
  5. In any BuddyPress group that you manage, go to Admin > Forum and then associate the group with a particular forum.

Back To Top

Performance

Ideal Server Setup

Modified on September 1, 2015

If you plan on supporting a moderately large community, you should consider moving to a good server setup for optimal performance. With many different types of dynamic content (activity streams, internal messages, etc.), BuddyPress needs to pull a wide range of content from the database and will slow down on shared hosting. Yes, it is possible to run BuddyPress on shared hosting, but you will be missing out on the huge performance gains and scalability of a powerful server dedicated to your site.

What to look for in a web host

For the most part, you don’t need to worry about server space unless you are hosting a lot of media. 10-20GB is more than enough for most sites. The primary thing we care about is reading and writing to the database quickly, which means an ideal server will have a solid state drive (SSD) and a lot of RAM (2GB or more). A fast CPU is nice as well.

Your server should also be dedicated only to your site so you can set it up however you want, and then easily scale up as necessary. Most people prefer to use a managed virtual private server (VPS) as it offers the benefits of a full private server but at a substantially lower price along with support from the hosting company.

Our Recommendations

Virtual Private Server (VPS)

We’ve hosted sites with many companies, and right now we suggest going with a VPS at KnownHost. They offer the best bang for your buck, along with fantastic technical support and virtually 100% uptime in our experience. Our suggestion is to go with the SSD-2 plan. It gives you 30GB of storage (more than enough) along with 2GB of RAM, an SSD (much faster than a traditional hard drive), a powerful CPU (24 cores) and plenty of bandwidth. This will keep you going for a long time.

They market the price at $50/month, but it will actually be $55/month once you include either cPanel or Plesk – the admin panel for managing your server. I personally prefer Plesk, but I recommend going with whatever you’re used to. If you’ve been using shared hosting you are probably used to cPanel. KnownHost will have you fill out a form to purchase hosting, and within 24 hours they’ll get you set up with your brand new server, paid on a month-to-month basis. $55/month may seem expensive compared to cheap shared hosting, but consider the value of 100% uptime and not having to pay a developer $50/hour or more to fix your site when it goes offline or slows down. It’s a worthwhile investment.

tutorials-server-2

Amazon Web Services (AWS)

An alternative option that you may have heard about is Amazon AWS hosting. In many ways AWS is better than a VPS. It’s virtually infinitely scalable, offers fallbacks if your site goes offline via cloud hosting, and lets you create completely custom architectures (like distributing your site across multiple servers for example). However it also has a slightly steeper learning curve, will be more expensive than a VPS for most people, and will require that you either hire a server admin or learn how to manage a server yourself. So unless you really need it I would still recommend a VPS such as KnownHost or MediaTemple for most people. See a more detailed discussion here.

Back To Top

Content Delivery Network

Modified on May 8, 2014

A content delivery network (CDN) is one of the easiest methods to improve the performance of any website, including those that are powered by BuddyPress. When someone loads a page from your website, likely 50-90% of the browser requests are for content assets such as images, CSS stylesheets, and JavaScript files. If these are all loading from your server, with a moderate amount of traffic they will queue up and slow down your site’s performance. Additionally, they have to be delivered from your server’s physical location to your visitor’s physical location, which can add a delay in many circumstances. Let’s say your server is in LA and your visitor is in the Philippines. Using a CDN your visitor may get most of your site’s files delivered from a server located in nearby Manila, resulting in a noticeable speed improvement.

What exactly is a CDN?

A CDN is a distributed network of servers around the globe that serve your site’s assets – images, stylesheets, JavaScript files, etc. You can easily sync WordPress to a CDN so that your site assets are automatically offloaded to the CDN.

How to set up a CDN with WordPress

The first step is to purchase your CDN package. I recommend using MaxCDN as they are reliable, inexpensive, and easily integrate with several WordPress plugins. Their packages start at $9/month or $90/year, and the cheap starter package is enough for most people. It’s a tremendous value when you consider how large of an impact it will have on your site’s performance. Once you purchase your CDN there, you will set up a “zone” for your website at MaxCDN.

tutorials-zones

Once you have correctly configured your zone, make sure to note down the CDN URL. There are several ways to integrate a CDN with WordPress, and for this tutorial we will be doing it with WP Super Cache. It’s technically a caching plugin, but we can easily disable page caching and just use it for it’s excellent CDN support. There are better methods for caching BuddyPress, as described here.

The first step is to install and activate WP Super Cache. Go to Plugins > Add New in your WordPress dashboard and do a search for the plugin. Install and activate.

tutorials-wpsupercache

Once you have the plugin activated, navigate over to Settings > WP Super Cache. Click on the “Easy” tab and then turn “Caching On” in order for the plugin to work, even though we won’t actually use any of the page caching features as they interfere with BuddyPress’ ability to serve dynamic content.

tutorials-caching-on

Click on the “Advanced” tab. Scroll down to “Accepted Filenames & Rejected URIs” and check every single content type to not be cached, and then click “Save”. This should effectively disable all page caching features.

tutorials-disable-cache

Now to the fun part, where we actually integrate the CDN into WordPress. Click on the “CDN” tab. Check “Enable CDN Support”. Then add your CDN URL that you noted earlier into the “Off-site URL” and “Additional CNAMES” fields. It should look something like this: http://yourzone.youraccount.netdna-cdn.com

That’s it! Your site should now be offloading all assets to the CDN! To confirm that it’s working, you can view your page source in a browser and you should see links (like stylesheets, JavaScript files) using the new CDN URL structure.

tutorials-cdn-2

Purging the Cache

If you update your theme, you may notice that the CDN is still serving the old version of the files. Back at MaxCDN, you can go to Manage Cache for your Pull Zone and click to “Purge All” files. This will remove all of the files from the CDN, and they will get regenerated on subsequent page requests using your new versions.

tutorials-purge

However there is an easier method. If your assets have a version number appended to their URL, then you can just update the version number and the CDN will purge that individual file automatically. When you integrate a stylesheet or JavaScript file via WordPress’ enqueue method (the proper way), it gives an option to add a version number. In the BuddyBoss theme for example, we add a version number to every stylesheet and JavaScript file that gets updated whenever the file is changed, meaning theme updates automatically purge your cache for those files. You can add version numbers to stylesheets and JavaScript files that you enqueue in your child theme as well. Here is an example code snippet, with the version number in bold:

wp_enqueue_script( 'buddyboss-main', get_template_directory_uri().'/js/buddyboss.js', array( 'jquery' ), '3.1.7' );

And the outputted URL will show as:

../js/buddyboss.js?ver=3.1.7

Back To Top

Caching BuddyPress

Modified on May 7, 2014

You can get noticeable performance improvements by enabling Object Caching, which will improve page load times for not only BuddyPress, but many other plugins, themes and WordPress core itself.

Caching Methods Explained

Page Caching

When people think of caching, “page caching” is usually what comes to mind first. Unfortunately page caching is not a practical solution if you have BuddyPress enabled. With page caching, when a page is requested a fully assembled HTML file is generated and then served to subsequent users who visit that page (until the cache expires), dramatically reducing hits to the database. Due to the dynamic nature of BuddyPress, page caching would cause content to go stale, defeating one of the core purposes of BuddyPress – live interaction between users. You could theoretically cache pages for logged out users only. But once they are logged in your BuddyPress content would go stale and dynamic elements within the Toolbar, like Notifications, would stop updating until the page’s cache expired.

Object Caching (recommended)

Even though we are not able to cache finished pages, we can still cache a lot of the data that is used to assemble those pages via “Object Caching”. BuddyPress is built to be able to take advantage of Object Caching when you have a persistent caching plugin enabled, such as W3 Total Cache.

WordPress has an API (a set of functions) for Object Caching that allows developers to cache data used by their code. By default, WordPress allows for a form of Object Caching but its lifetime is only for a single page load. If you have a persistent caching plugin installed, you can make the object cache persist longer than a single page load which will reduce the amount of requests to your server and improve page load speed. This is what we’ll be setting up in the next section.

How to enable Object Caching

APC – (private server) (recommended)

If you are hosting your site using our recommended server setup, you can simply contact your web host and request that they install APC on your server (it’s free) and then it will be available to you as a very fast method for Object Caching. Generally you cannot install APC on a shared hosting environment. APC stores the cached values in RAM, which is why I recommend at least 2GB of RAM for ideal server performance.

Once your web host has confirmed that APC is installed and working, you will then need to enable it for WordPress with a plugin. My recommended method is with the APC Object Cache Backend plugin. This is not a true plugin, but rather a “drop-in” file. As such, you do not actually activate the plugin. You just need to copy the object-cache.php file into your /wp-content/ directory. You don’t even need to upload the actual plugin. That’s it! As long as you have APC installed on your server and have placed the file correctly, APC-powered Object Caching should now be enabled and you should begin seeing performance improvements. To confirm that it’s working, you can type this into your browser while logged in as an admin: http://www.yourdomain.com/wp-admin/plugins.php?plugin_status=dropins . It should show APC Object Cache as a drop-in.

tutorials-dropin

You can also enable APC caching using the W3 Total Cache plugin, at Performance > General Settings, under “Object Cache”. If you’re already using W3 Total Cache this may be the preferred method. If you’re not using W3 Total Cache already then I recommend the above plugin as it only requires one file to work!

File caching (shared hosting)

If you are using a shared hosting plan, APC will not be an option and you will likely be limited to file caching, where the cached values are stored in files on your web server. This will ideally result in performance gains, but there is a chance that it could actually result in a negative performance impact if your hosting environment cannot handle it. This is another reason as to why I recommend getting a good server setup and then implementing a proper caching method like APC. But if you are limited to shared hosting, you can try file caching and see if it works for you.

The best method is to install W3 Total Cache. After installing and activating the plugin, go to Performance > General Settings, and then navigate to “Object Cache”. Check the box to “Enable” the object cache. Under “Object Cache Method” it will probably only offer “Disk” as you are on shared hosting. You will see grayed out options for APC, eAccelerator, and other various options that could theoretically be installed on a private server setup. Click “Save all settings” and you have now enabled Object Caching, with the cache saving files to your disk.

tutorials-w3object

After enabling the Object Cache, you can navigate over to Performance > Object Cache to configure the cache options as necessary.

Back To Top

BuddyPress Reorder Tabs

General

BuddyBoss Updater Plugin

Modified on June 9, 2017

The BuddyBoss Updater plugin is used to activate the license key for your BuddyBoss products.

Activating your license key(s) on your site will give you direct access to new updates, via the WordPress updates page. You will also need to keep an active license to have access to support from our team.

Installing the BuddyBoss Updater Plugin

Follow these steps to install the plugin on your site:

  1. Download the BuddyBoss Updater plugin (buddyboss-updater.zip file).
  2. Go to: Plugins > Add New.
  3. Choose “Upload Plugin” at the top.
  4. Choose File and select the buddyboss-updater .zip file.
  5. Select Install Now.
  6. Activate the plugin.

 

Activating your license keys

On your site’s WordPress dashboard, go to: BuddyBoss > Licenses. A tab will be displayed for each premium BuddyBoss product or package that you have activated on your site.

BuddyBoss Licences Navigation

Follow these steps to activate your product’s license key:

  1. Login to your BuddyBoss account.
  2. Go to your account area.
  3. Under the “Subscriptions” tab, find your product and copy the license key.
  4. Go back to your site and enter the license key in the correct product tab.
  5. Enter the email associated with your BuddyBoss account.
  6. Click “Save Changes”

[Add Updater Plugin Screenshot here]

 

I can’t see my product in the Updater plugin

If your BuddyBoss product is installed on your site and is not listed in the updater plugin, make sure you are not running an old version of the plugin/theme. Also, note that free BuddyBoss products do not require a license. Read more in the sections below:

Free BuddyBoss Products

Our free products do not require an active license key. You will keep receiving free updates without having to activate them.

Old product versions

If you are still running an old version of a premium BuddyBoss product, you will need to update your product first, before you can activate your license.

I have used all my available activations

If you try activating a new site, after you’ve used all of the allowed activations, you will get an error message. To solve this, you can either deactivate your key on another site that is no longer in use, or purchase a new license.

Follow these steps to deactivate your license key from a site that is no longer in use:

  1. Go to: BuddyBoss Account Dashboard > My Subscriptions tab
  2. Deactivate your key for the URL that is no longer in use.

My license has expired

If your license has expired, you will not be able to activate the license key on your site. You can go to BuddyBoss Account Dashboard > My Subscriptions area and proceed to renew the license.

My license key doesn’t work

If you are presented with an “invalid value” error message when activating your license key, please ensure that the license key entered is correct. If you continue having trouble activating your license key, please contact support for help, by opening a new ticket.

Back To Top

Social Learner - LearnDash

Social Learner - Sensei