BP Widgets Not Showing

[jwchameleoncorp]

Hello,

I’ve added some BP Widgets to a custom side bar (see attached snapshot), however only some of the widgets display (see attached snapshot). As you can see “Friends” and “Forums List” widgets do not show.

I cleared all caches several times.

Any idea what the issue might be?

Thanks!

Attachments:

You must be logged in to view attached files.

[Kieran]

Hi @jwchameleoncorp,

The friends widget will only display when viewing a profile and only when that user has friend connections.

With regards to the forums widget do you have any forums set up and posts within those forums? Also I notice a “visibility” option next to save. You may want to check whatever plugin is generating that and see if it’s causing issues.

Kieran.

[jwchameleoncorp]

Hi @kieran

Thanks for the quick reply.

1. The logged in Admin profile that I’m using has 2 friends, but if I understand you correctly, I can only see the widget if I am looking at my own profile? I can not use the widget on other pages? Is that correct?

2. I realize now that the Buddypress Forum widget is not visible because the font is white and invisible against the white background. I don’t see a way to change the font color settings, but I also think it might be an issue with some of the custom CSS that Radu and I have created in the Theme Settings > Quick CSS. How do I add to the Quick CSS to solve the problem?

Thanks for all your help! 🙂

[Kieran]

@jwchameleoncorp,

If you have the friends widget active you should see it whilst viewing any profile page. That goes for you, your friends and other users. so if the url is domain.com/members/… you will see the widget if the friend count is higher than 0.

With regards to the text, can you send me a link to a page I can access whilst logged out that is using the sidebar and I should be able to send you the css you require.

Kieran.

[jwchameleoncorp]

Hi @Kieran

So as long as the page is a profile page, the friends widget works; but it will not work on pages that are not profiles, correct?

For the CSS, go to: http://5firemen.com/home/ and look on the left sidebar, about half way down.

Thanks!

[Kieran]

@jwchameleoncorp

That is correct.

Regarding your CSS issue it seems you have overriding CSS. Are you by chance using the widget inside something Visual Composer related? Either way this should fix the issue.

COPY CODE

.vc_column_container a.bbp-forum-title {
    color: #585858 !important;
}

Change #585858 to suit your needs.

Kieran.

[Radu]

Thanks you Kieran

Cheeers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @Kieran

Thanks for taking a look!

I tried the code, however it didn’t work. I placed it in the Quick CSS area of the Theme Settings (see attached snapshot.) Did I do something incorrectly?

Also, regarding your question, yes the widget was placed there via a Visual Composer component (see attached snapshot.)

Thanks for your help on this. 🙂

[Kieran]

Hi @jwchameleoncorp,

I am unable to see any additional screenshots away from the original two images. Can I ask why you’re using a Visual Composer component to display a widget in the sidebar? Is there a specific need? I ask because because this is likely causing your issue.

Kind Regards,

Kieran.

[jwchameleoncorp]

Hi @kieran

Sorry, I forgot to add the snapshot attachments in the last reply. I’ve attached them to this reply.

I also added another attachment of the home page, to discuss why I am using VC to display a widget in the sidebar.

Based on my understanding of how Buddypress works, you are not able to customize or change the sidebar in any of the Buddypress views (i.e. profiles, activity, groups, forums, etc.)

If that is true, I wanted to customize the home page (and other pages other than BP pages) with different side bars, using the same 3 column layout throughout the website, to keep the look consistent. You can go the page here: http://5firemen.com/home

While I know I select the 3 column layout (or any layout for each page), what I can not do is place the carousel across the top that displays key things that I want my audience to see when they arrive on the website. I also can not add the picture grid (called “Crew Shot” above the activity feed) when using the 3 column layout.

The only way I could see to accomplish the 3 column layout on the home page with these additional components, was to create a 3 column layout via VC, and then arrange what I wanted.

However, I’d prefer to make things as easy as possible, and reduce the amount of code so things load faster; so if you know of another way, I open to suggestions.

Thanks for taking the time to make the site better. I really appreciate it. 🙂

Attachments:

You must be logged in to view attached files.

[jwchameleoncorp]

…sorry about all the typos in my last reply. I should’ve read it before I sent it. Lemme know if you need clarification. Cheers.

[Kieran]

That’s a lot of info to take in!

So first of all let’s address the widgets issue you’re having. You can use a conditional widget logic plugin to achieve what you’re after X widget to only display on X page, X widget to only display on BuddyPress page (s) etc etc.

You can find a suitable plugin for that here https://wordpress.org/plugins/widget-logic/ (As always, do a backup to be safe). Have a good read of the documentation and refer to WordPress Codex for more insight if you need it.

Doing this is going to solve a LOT of the issues you’re having.

With regards to the carousel, please send me the exact shortcode you want to use, exactly where in the theme you want it to appear and what page(s) you want it to appear on and I’ll send you a snippet for your functions file to display it.

Any questions, let me know.

Kieran.

[jwchameleoncorp]

Haha! Yeah it is a lot to take in.

Okay, I like where you’re going with this! I’ll install the plugin and give it a shot.

For the home page, the things I created with VC, specifically for the home page, are:

(see attached snapshot or go to http://5firemen.com/home)

1. The carousel just below the Title/Bread Crumb bar (noted by big red circle around it). I created this area for the home page only, for content to be displayed when people login.

2. The picture grid just above the social feed (noted by medium sized red circle) in the middle column of the page. I created this to aggregate photos that are uploaded by my users.

3. I styled the page with gray (noted by two small circles on each side) which sections off and structures the page for easier viewing. As you can see, it even creates small borders between each column to provide delineation. I followed Facebook on this logic and tried to duplicate it as close as possible. I figured they spent a lot of money testing what works best, so why not copy it?

That’s what I created specifically for the home page via VC. I did not see a way to customize like this using a regular 3 column template.

Thanks for everything @kieran. Really appreciate your hard work and talent.

Attachments:

You must be logged in to view attached files.

[Kieran]

Hi @jwchameleoncorp,

1. To make your carousel appear below the breadcrumbs add this code to your child theme functions.php file. It is VERY important that you edit this code before saving it. Replace ‘[MYSHORTCODEHERE]’ with your shortcode for the carousel. Always make a backup of your child theme before making changes.

COPY CODE

// Add Carousel to Homepage below breadcrumbs section
add_action('kleo_before_main','add_carousel_to_home');
function add_carousel_to_home() {
    if ( is_front_page() ) {
        echo do_shortcode('[MYSHORTCODEHERE]');
    }
}

2. Remove everything from the homepage and go back to a single row in visual composer. Add element (your picture grid). Add element ‘BuddyPress > Activity Page’.

3. Set your page template to ‘3 Columns – left and right sidebars’.

Once that’s in place you can use the conditional logic plugin we spoke about to make sure you only see what you want seen on X page(s). You can also style (through row settings and custom CSS) the content and right sidebar to appear as they are currently.3

Kind Regards,

Kieran.

[Radu]

@Kieran thanks you for your hard support!

Have a nice day guys

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @kieran

Been out of town, but circling back to this. Love your idea! Thanks for putting all this together.

A couple questions:

1. What is my short code? I don’t know what it would be?

2. One of the reasons I used VC to create the 3 column layout, is that I can turn off the left and right columns on mobile. Can I do this with this scenario? This is important, since a webpage displays very differently on a computer versus a mobile phone.

Thanks my friend!

[Kieran]

Hi,

Sorry for the late reply, I’ve been very busy of late.

1. Your shortcode is whatever you’re using to display the images / recent uploads before the BuddyPress Activity.

2. Take a look at this page using a left and right sidebar on desktop, and then look at it on mobile too. http://seventhqueen.com/themes/kleo/3-colums-template/ you’ll see that your main content is still what shows first, the two sidebars collapse and show after the main content.

[jwchameleoncorp]

Hey @kieran

I’m back in town and catching up on things.

1. I think I figured out what you mean regarding the shortcode. For instance, if I want products to be displayed, I simply put [product]. Is that correct?

However, I tried the code, and it did not work. Could it be because the code designates it to be displayed on the Home Page? If so, my Home Page is set to be http://5firemen.com/welcome

Once a user logs in, or registers, they are directed to http://5firemen.com/home, which is where the carousel should be displayed below the title/breadcrumbs.

Can the code be tweaked so that the carousel is displayed on a specific pages, or on all pages with a breadcrumb, etc.? How does that work?

2. I looked at http://seventhqueen.com/themes/kleo/3-colums-template/, and I like the way it looks on mobile. Great solution!

Thanks for all your help @kieran. Your work is top shelf!

[Kieran]

Hi,

1. To generate your desired shortcode open a new page (there’s no need to publish this page), use visual composer to create it. Once created switch to classic mode / text and copy everything but the [vc_row][vc_column] and [/vc_row][/vc_column]. You can the replace the [MYSHORTCODEHERE] with the shortcode you have just generated.

The code I supplied above will only show on the homepage (as in the page that is set as the front page in “Settings > Reading”).

If you wish to target different pages you’ll have to do it slightly differently.

Example – This will show your shortcode on a page where the slug is “home”

COPY CODE

// Add Carousel to page with slug home below breadcrumbs section
add_action('kleo_before_content','add_carousel_to_home');
function add_carousel_to_home() {
    if ( is_page( 'home' ) ) {
        echo do_shortcode('[MYSHORTCODEHERE]');
    }
}

To target more pages or page ID’s you can review this document https://developer.wordpress.org/reference/functions/is_page/ (this link will also be useful when using a widget logic plugin)

To target different areas of the theme please see the theme documentation here https://archived.seventhqueen.com/documentation/kleo and scroll to Theme Hooks.

You can repurpose the above code as many times as you like to achieve different results and content in different areas of the theme. Simply replace the // DESCRIPTION and the two instances of add_carousel_to_home with an appropriate description of what you’re doing.

2. Glad that works for you. In that case you should probably do as we discussed earlier and set the page to the three column layout with left and right sidebar.

Kind Regards,

Kieran.

[jwchameleoncorp]

Hi @kieran

1. Okie dokie, I’ll check it out.

2. Yep! Will do. I’ve been building the page we’ve been talking about, here: http://5firemen.com/home-page-staging and will designate it when I have it all put together.

Will keep you posted.

Thanks my friend.

Have a great day!

[jwchameleoncorp]

Hi @kieran

Making pretty good progress with your brilliant solutions! 🙂

Here is the old home page: http://5firemen.com/home

Here is the new page being built with your ideas: http://5firemen.com/home-page-staging

There are only a few things I’m having trouble with…

1. On the new home page, the carousel displays above the breadcrumbs.

2. On the new home page, for some reason the content of the two side bars begins higher than the content on the main section. They are not vertically aligned which throws off the balance of the page. See the attached snapshots for examples.

I’ve tried to figure to solutions to both issues, but can’t seem to solve them.

Any ideas?

Thanks for your all your hard work. I really appreciate it!

Attachments:

You must be logged in to view attached files.

[Kieran]

Hi,

Are you using the new snippet that I sent you for displaying your shortcode? I had originally targeted the wrong area kleo_before_main, it should be kleo_before_content. (Note: the snippet I sent you will display on the page with the slug ‘home’, so if you want it elsewhere whilst testing you’ll have to change that)

On the row where the crew shot exists, go to the pencil icon and edit ‘Top padding’ to suit, I am guessing it is currently set to the default 40, try 0 and work from there.

Kieran.

[jwchameleoncorp]

Hi @kieran

1. I changed the target area to kleo_before_content and that did the trick. 🙂

2. After reading the WP Developer link you sent, I learned how to add the right slug and it is displaying on the right page. Thanks for teaching me that!

3. On the row with Crew Shot, Top Padding (in fact all paddings, margins, borders, etc.) are set to zero. However, the top VC element in that column does not move. Doesn’t matter what VC element is at the top (I removed crew shot and simply displayed the social feed to see if it made a difference), they all display with a gap at the top of the row. I even put in a value of -30 in the top padding (just to see if it would make a difference), and it still did change. I even made the settings exactly like http://5firemen.com/home (the original home page using the VC setup we are moving away from, but displays correctly), but that didn’t make a difference. and Any ideas?

Thanks a ton for all your help!

[Kieran]

Hmmmmmmm

3. Is a puzzle, would it be possible to have a look at the actual page in the backend? I should make it clear I do not work for KLEO so I am totally a third party in this discussion.

If that’s okay I will send you an email via the address stated on your website with my details.

If that’s not okay I would suggest going through each element and set them one by one to margin 0 and see if that works. Also there is a padding setting in theme options, maybe it’s that? It’s just hard to tell from the front end alone.

Kieran.

[jwchameleoncorp]

Hi @kieran

I did a few things…

1. Cloned the VC Setup Page we are moving away from (http://5firemen.com/home), which currently displays all three columns with equal height. That way I know the cloned page was set up exactly the same.

2. Then I took the cloned page a structured it your way, with a 3 column layout (main content and two sidebars.) I didn’t change a thing other than that, and the main column instantly displays offset. Cloned page is here: http://5firemen.com/home-clone

I also notice the same issue on the Kleo 3 Column Layout Demo Page: https://seventhqueen.com/themes/kleo/3-colums-template/

That tells me that not using VC components for the side bars, and only using VC for the main content, is a CSS theme issue. Also, when I use VC for all three sections, VC gives you the option to line up the column evenly, which is another reason I think this is a theme CSS issue.

3. The only place in the theme settings for padding, is in the breadcrumbs section. It does not apply to this issue.

@radu can you tell me if there is a way to adjust the gap above the main content column so that it lines up with the height of the side bar content?

Thanks for your help everyone!

[jwchameleoncorp]

Thanks for all the help everyone. @kieran I’ve redesigned everything with your suggestions and it worked out great! Thanks for taking the time to help. You really went above and beyond. I really appreciate it. Is there any way I can repay the favor?

[Kieran]

You’re very welcome @jwchameleoncorp,

You can leave KLEO theme a review on ThemeForest if you haven’t already, and if you really wanted to you could feel free to leave me a review on my business page on Facebook, if you search Facebook for ‘mywebink’ you’ll find it.

Good luck with the site!

Kieran.

[jwchameleoncorp]

I left a review for you and Seventh Queen. It’s the least I could do. You have been awesome. I couldn’t be more grateful. Feel free to connect on Facebook, (Jeff Williams review). Cheers!

[Author]

Posts