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' ); ?>

Comments

    1. Sure.

      Step 1 – You’ll want to use a fullwidth template for the slider to look nice. Go into FTP and duplicate the template titled page-fullwidth.php.

      Step 2 – Rename it to something unique, such as page-slider.php.

      Step 3 – Open the files in a text editor and change the page template name (line 3) from “Template Name: Full Width Content” to “Template Name: Slider”.

      Step 4 – Add the following code snippet just below get_header(); ?>.

      Make sure the opening and closing PHP brackets are correct.

      Step 5 – Create a page in your WordPress dashboard. Assign the page to the template “Slider”. If you view this page it should now be displaying your slider, assuming you actually added slides. Any page you assign to the Slider page template will now display slides.

  1. I’m interested in buying this theme but I’d like to have the slider on more than one page and load different slide to each. For example my homepage slider may have generic images to get people to join where as a members competition page may display the winners images from the last competition. I’m no coder but capable of following the level of your above instructions. Is it possible? Or is there a compatible gallery plugin I can use with this theme? Lastly is there a compatible event calendar plugin with buddy boss? Thanks in advance.

    1. Hi Ian. To have the slider on multiple pages with different slides for each page, you’ll want to use a slider plugin that allows for multiple sliders rather than our built in homepage solution.

      Some popular WP slider plugins:
      http://wordpress.org/plugins/simple-slider-ssp/
      http://wordpress.org/plugins/wowslider/

      Gallery plugins:
      https://wordpress.org/plugins/bp-album/ (BuddyPress profiles)
      http://wordpress.org/plugins/nextgen-gallery/ (WordPress)

      Event calendar:
      http://wordpress.org/plugins/the-events-calendar/
      https://wordpress.org/plugins/spider-event-calendar/
      http://wp-events-plugin.com/ (BuddyPress integrated)

    1. If you add no slides you are effectively disabling the slider. You can use another slider plugin like Layerslider or Showbiz Slider. I haven’t tried them, but they should work as expected.

  2. Hi guys,
    I’m wondering if its possible to modify this so that I can put just a single slide in, and shift the text up to the top third of the slide. I like the layout and fonts, but I want to put an image that has content that should be fully visible without the text and labels in themiddle.

    1. Hi hambone,
      Right now this is not easily doable. The slider only works with 2+ slides. You could pretty easily remove some of the other content (text/labels) by add display:none; to your CSS for those elements. However you would better off to just not use the slides, and add an image with some text overlaid on it to your homepage.

  3. Hi Michael 🙂

    I am working on the slider now, and for a brief moment there I thought he let me add slides higher than 400px. But then I cleaned up my media files and accidentally deleted the wrong photos. The thing is when I try to add the same size of photos again he crops them, and I don’t like it. These images need to be 600px high.
    And on the same subject, how (or where) do I change the size of the button, and play with the colors of the captions?

    Thank you

    1. Also- how can I change the animation speed? I want to make the sidewide sliding faster and the captions animation slower.
      Can you also please explain how to make a child theme php, to save these changes in case of updates..
      Thank you!

      1. Animation speed is set in slides-content.php

        This part:

        duration: "1000", /* Fade Speed (miliseconds) */
        pause: "6000", /* Autoslide pause between slides (miliseconds)*/

        That sets the animation speed, and the pause time. You can copy that file into your child theme, change the numbers from “1000” and “6000” to whatever you prefer, and then it should work.

        1. Michael, thank you. I did that part, and it worked.

          However this code:
          // Add thumbnail size just for this custom post type
          add_image_size(‘buddyboss_slides’, 1040, 600, true);
          (you see I changed 400 to 600) did not.

          I also managed to change the buttons size etc in the css, but- it only works if I put this code in global styles. and that changes the way the slider looks in other media screens.
          if i only put this code in here
          @media screen and (min-width: 1040px) {

          the css does not work.

          (custom.css in buddyboss child)

          this happens with other css code too – am i doing something wrong?

          thank you.

    2. You will need to edit some CSS to change the size of the buttons and color captions. Do that in your child theme.

      The slide height is set in the file buddyboss-slides-loader.php. This line:

      // Add thumbnail size just for this custom post type
      add_image_size('buddyboss_slides', 1040, 400, true);

      You would need to override that.

  4. Hey @tjchester
    I just install the plugin as above, but it told me two warnings:
    1. The Plugin Codestyling Localization was forced to protect its own page rendering process against 2 incidents !

    2. File Permission Problem: Your WordPress installation does not permit the modification of translation files directly. You will be prompt for FTP credentials if required.

    And I did modify my wp-config.php as “WordPress Codex Page – Upgrade Constants” told me. But it did work.

    Any help will be appreciated!

    -Xing

  5. Please i will like to remove header menu and the space under the slider for the homepage. i just want the slider only on the homepage. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *