BP-Tricks

Easily hide specific tabs on BuddyPress member and group pages

bowe — Fri, 10 Feb 2012 18:07:38 +0000

Today I received a question on Twitter from @Calzo:

@BoweFrankema Nice Bowe! I like the theme! Maybe you could help… how would I go about hiding certain tabs on the profile menu bar? Any idea?
— Calzo Houdini (@Calzo) February 10, 2012

I’d thought I’d share the solution with everyone, in case someone else would like to know! We’ll be using some simple CSS to quickly hide any profile or members tabs we don’t need. “Why would you do this?” I hear you ask. Well if you’re building a custom theme or forking BuddyPress templates, you might change up your navigation which could make certain tabs not needed anymore. A good example for this can be seen in my latest BuddyPress Theme called Balance. It comes with a simple member widget that makes the “Profile” tab unneeded when being used:

Hiding the unneeded tabs with some CSS

So how would we hide the tabs we don’t need? Simple we’ll use some CSS to hide them! Luckily every tab has it’s own unique ID, so we can easily target them. Let’s start with the profiles.

Hiding Profile Tabs

/* Hide Certain Profile Icons  */
#user-activity {
	display: none;
}
#user-xprofile {
	display: none;
}
#user-friends {
	display: none;
}
#user-groups {
	display: none;
}
#user-profile {
	display: none;
}
#user-settings {
	display: none;
}
#user-messages {
	display: none;
}
#user-forums {
	display: none;
}

Those are all of them, and if you’d use this code you’d lose all tabs. So remove the CSS of the ones you’d want to keep. If you’re done and you know some CSS, you can combine them into one declaration.

Hiding the Group Tabs

/* Hide Certain Group Icons */
li#members-groups-li a {
	display: none;
}
li#forums-groups-li a {
	display: none;
}
li#admin-groups-li a {
	display: none;
}
li#invite-groups-li a {
	display: none;
}
li#home-groups-li a {
	display: none;
}

And that’s it! Add this CSS to the stylesheet of your child theme, so you don’t lose these changes on BuddyPress updates, and you’re golden!

Bonus Tip: Hide tabs added by 3rd party Plugins

If you’d like to hide tabs added by third party plugins, you can use FireBug to quickly find the CSS you need to target. Simply open up your Firebug/Chrome inspector and inspect the tab you want to hide. You get something like this:

Copy the name of the ID you’d like to change and set a display none on it, using the CSS examples given in this trick. That’s how easy it is!

@BoweFrankema Wowsers! That worked perfectly! Cheers mate!
— Calzo Houdini (@Calzo) February 10, 2012

Got any BuddyPress tricks you’d like to see answered?

Leave a reply in the comments and I’ll do my best to answer them in an upcoming trick! Also you can follow me on Twitter to receive the latest BuddyPress news. It’s good to be able to share some tricks with you again!

- - - - - - - - You've finished reading Easily hide specific tabs on BuddyPress member and group pages on BP-Tricks.

Creating a custom email template for your BuddyPress emails

bowe — Thu, 23 Jun 2011 11:12:31 +0000

Let’s face it, the standard WordPress/BuddyPress emails suck. They are boring, confusingly formatted and have no branding whatsoever. For a regular WordPress site this isn’t that bad because usually your visitors do not receive your emails that often. With BuddyPress your users get loads of emails for all the notifications they receive. Creating a good looking email template does wonders for the feel of your network, and really gives it a more unique feel. Can you imagine Twitter of Facebook sending out completely text based email notifications to you? That is so 90′s! Let’s get started!

Install the awesome WP-Better-Emails plugin

This is one hell of a hidden gem on the WordPress repository. If it wasn’t for Sarah Gooding her post on WPMU I’d probably would have never found it. This plugin gives you a great looking email template to work from, and that’s exactly what we’re going to do.

Changing the email template into something more BuddyPress worthy

WordPress Blue? Screw you! BuddyPress red is what we want! So when you’ve installed the plugin visit the Email Options page under Settings, can then click on the Template Options tab. Here you can modify the template that get’s sent to your users, and below is the code I’ve used to give it a nice BuddyPress feel:


















													%blog_name%

													%blog_description%






%content%







													
 Email sent the %date% @ %time%
 For any request, please contact %admin_email%

Upload the BuddyPress Logo to your uploads folder

We’re almost done, the only thing we need to do now is upload a nice BuddyPress logo to the uploads folder. The template I made already reserved a spot for the logo in the footer, so all we need to do is upload it. Save the logo below to your hard drive and upload it into wp-content/uploads/

Of course you can replace this logo for any logo you like, actually I’ll advise you to do that.

Check the results

This template is based on the BP-Default color scheme, but you can adjust the template with a code editor with some basic html/css knowledge. Change the background color, text color and images and you have a completely custom email template going out to your users!

Have fun creating your custom email template. If you’ve made any cool ones be sure to show me in the comments!

- - - - - - - - You've finished reading Creating a custom email template for your BuddyPress emails on BP-Tricks.

Add @mentions auto-complete to your BuddyPress site with the BP Labs plugin

bowe — Sun, 19 Jun 2011 21:07:55 +0000

One of the things that I really love about the new Twitter app for Mac and Facebook is the auto-complete function when you’re mentioning someone. This allows you to quickly notify a user that you’d like to have involved in the conversation. BuddyPress has had this functionality since BP 1.2 but sadly until now it was a feature that used to confuse the heck out of certain people, and thus it was often disabled.

BuddyPress Core Developer Paul Gibbs has been working in semi-secrecy on the solution to this problem, and released his BP-Labs plugin in just before the weekend. This plugin adds Twitteresque (I love to make up new words) username auto completion to BuddyPress. Like to try it?

Download the BuddyPress Labs Plugin

When you’ve installed the plugin just start typing the (user)name of the person you want to mention and this happens:

Crazy awesome right?! The plugin also adds a nice Group Management tool to the front-end of your BuddyPress network. When you’re logged in as an admin, just visit the Group Directory and hover over a group to see some quick links to the group administration pages. Here’s another preview:

The BP-Labs plugin will be updated in the future to add more experimental UI functionality to BuddyPress, so for those who like to stay on top of things, be sure to install the plugin.

What would you like to see added to the plugin? Let me (and Paul) know in the comments!

- - - - - - - - You've finished reading Add @mentions auto-complete to your BuddyPress site with the BP Labs plugin on BP-Tricks.

Less is more; Using the right BuddyPress tools for the job

bowe — Fri, 20 May 2011 11:59:29 +0000

Authors note: This article has been published before on BuddyDress.com a couple of months ago.

A while back I held a presentation at WordCampNL about BuddyPress, and I can’t believe how hard it was to explain what BuddyPress was all about in just 30 minutes. Overall I had a lot of fun doing the presentation, but I came to the realisation that BuddyPress has far outgrown the status of “just” a WordPress plugin, and that it had become a powerful social networking tool, which can be used for almost anything! And while this is a great thing, and you can quickly set up a community which uses all BuddyPress core features and awesome plugins to the fullest, it does not mean that your community will be successful if you just provide numerous ways for your members to interact with each other.

Just like Spidermans uncle said; “With great power comes great responsibility”. In our case that means that as BuddyPress community builders we need to take a close look at the functionality BuddyPress provides and which plugins we want to use to extend upon it, and NOT simply use every possible communication method available in BuddyPress. Because while that might seem tempting to do at first, it can lead to a community that never takes off, simply because of an overkill of ways to communicate. The problem of allowing people too much choices, is well-known in the restaurant and supermarket business;

expertly weeding out assortments leads to good results since it improves customers’ shopping experiences. Unilever’s director of marketing for household products, Rob Persiko, says, “Consumers have a hard time finding what they’re looking for because there’s so much on the shelf.” Isn’t that the best reason to reassess retail assortments? >>source

This exact same concept applies to your BuddyPress community. You have to take a close look at what your members want, and how experienced they are in the world of social networking. Here are three things I always do when I work on new BuddyPress projects for myself or clients;

1: Think back to the time you’ve just discovered BuddyPress and remember what confused you: also take into consideration that as a community builder you’ve probably already became familiar with a lot of standard social networking features well before you started using BuddyPress. Try to look at your community with a complete blank and “unexperienced” point of view.

2: Find out how your potential members communicate: Does your target audience hang out on forums, twitter of Facebook? If they communicate in a more traditional way (forums, mailing lists etc) you might want to put the focus on Groups and Forums and strip the activity stream from Status Updates and comments on forum topics. If they hang out with the cool kids on Twitter and Facebook you might want to put all your focus on the stream, and get rid of forums and groups entirely!

3: Do a closed beta test before launch: If you think you’ve got everything set up right, it’s time to unleash a wild bunch of diverse people out on your project. You’ll be surprised on the amount of feedback you’ll get, and how the most trivial things can confuse the heck out of your members. But it’s essential to the success of your community, and take time to listen to the feedback you’ll get and tweak where necessary.

If you use other methods to fine tune your community to your target audience, just let me know by leaving a comment, and good luck with setting up your BuddyPress powered community!

- - - - - - - - You've finished reading Less is more; Using the right BuddyPress tools for the job on BP-Tricks.

Adding some cool “Call to Action” buttons to stream entries

bowe — Tue, 17 May 2011 17:50:38 +0000

When something happens within your BuddyPress Community, you usually want others to respond to this activity. That’s the whole core concept of Social networking. By default BuddyPress adds a “Reply” and “Favorite” button to activity stream items, and while this is cool, for some entries you would like the user to go somewhere. This simple snippet will add a additional button which points them in the right direction.

Add the following code to your Child Themes Functions.php or add it to BP-Custom.php in your plugin folder

/* Add Cool Buttons to Activity Stream Items */

function my_bp_activity_entry_meta() {

	if ( bp_get_activity_object_name() == 'blogs' && bp_get_activity_type() == 'new_blog_post' ) {?>
		View Blog Post
	
		View Blog Comment
	
		View Activity Status
	
		View Forum Thread
	
	    View Forum Reply
	
You’ll now have some neat buttons which call your user to action! Here’s an example for a blog post entry:


Credits
[bc_member name="etiviti" size="80" fields="About me,Website,Twitter Name"]
- - - - - - - -
You've finished reading Adding some cool “Call to Action” buttons to stream entries on BP-Tricks.

BuddyPress Shortcodes Plugin

bowe — Tue, 17 May 2011 14:13:52 +0000

A while back I thought about ways to make BuddyPress integrate with the regular posts and pages within WordPress better. I had no idea to properly display BuddyPress information in posts, sidebar or templates. So I came up with the idea to use WordPress Shortcodes to display BuddyPress related content anywhere.

Download Bowe Codes (BuddyPress Shortcodes)

So I approached iMath on Twitter can after some short Tweets send him a document containing all the shortcodes and their configuration options I had in mind. In record time he started worked on it, and decided to name the plugin after yours truly! I can die a happy man now.

So who is iMath anyway? Let’s use a shortcode and pull in his BP-Tricks information!

[bc_member name="imath" size="100" fields="About me,Website,Twitter Name"]

Shortcode used: bc_member name=”imath” size=”100″ fields=”About me,Website,Twitter Name”

It goes without saying that this makes creating custom BuddyPress related pages, widgets and even templates so much easier!

Available BuddyPress Shortcodes

Currently there are 10 shortcodes available:

Member: Display a specific member
Group: Display a specific groups
Members: A list of members
Groups: Displays a certain amount of groups
My Friends: Displays friends of the displayed or logged in user
My Groups: Displays groups of the displayed or logged in user,
My Messages: Shows messages and the notifications of a logged in user,
MultiSite Blogs: Allows you to show certain Blogs from your MultSite network
MultiSite Posts: Displays specific posts from your MultiSite Network

Installation

You can download and install The BoweCodes plugin using the built in WordPress plugin installer. Or you can also download the plugin manually:

Download Bowe Codes (BuddyPress Shortcodes)

note: make sure it is uploaded to “/wp-content/plugins/bowe-codes/” Renaming the plugin is not a good idea because stuff will break!

Activate Bowe Codes in the “Plugins” admin panel using the “Network Activate” (or “Activate” if you are not running a network) link.

Inserting the BuddyPress Shortcodes in Post and Pages

After you’ve installed the plugin you’ll know see a cool icon in the post and page writing screen.

This button allows you to easily and quickly insert your shortcodes. Every shortcode has several configuration option that allow you to customize the output easily. Isn’t that awesome? Anyways here are some of the things you can expect:

Avatar = Yes/No
Avatar Size = “60″
Type = “Features, Popular, New ” (Group and Member shortcodes)
Amount = “10″ (amount of items to show)
Class =”my_groups” (allows you to specify a specific CSS class to the output)

Just check out all of the options and experiment a bit.

Inserting the BuddyPress Shortcodes in Widgets and Templates

To enable the use of shortcodes in Text Widgets just add the following code to your (Child Themes) functions.php file

add_filter( 'widget_text', 'shortcode_unautop');
add_filter( 'widget_text', 'do_shortcode');

To output a shortcode in a template file just use this piece of code

Feature Suggestions?

You might have some ideas to improve this plugin or have questions about the usage. Just leave your ideas and suggestions in the comments. Finally be sure to thank iMath for his great work as well. For some crazy reason he does not take donations, but donations can be made to any other awesome BuddyPress project or Charity instead!

- - - - - - - - You've finished reading BuddyPress Shortcodes Plugin on BP-Tricks.

The current state of BuddyPress: A critical analysis

bowe — Mon, 16 May 2011 00:24:35 +0000

About two years ago I stumbled upon BuddyPress when I was looking for a open source social networking solution for a non-profit project. Until that time I was only familiar with paid scripts to set up a social network, and you’ll probably recognize the way I felt when being introduced to the community that powers WordPress and thus BuddyPress. I actually started using WordPress for the first time thanks to BuddyPress. Within two years time I’ve switched my working career from boring web design jobs into the awesome world and community of WordPress and BuddyPress. It’s been the two most bad-ass working years of my life!

So obviously that shift meant that I’ve been spending more and more time on working with BuddyPress, and getting more and more involved. I started BP-Tricks and currently you’re looking at the 3rd version of it. While it’s been hard to maintain at time, and the post ratio has not always been high, I’m proud of the project and seeing it evolve.

One of the coolest BuddyPress related things I did was a 40 minute crash course introduction to BuddyPress at WordCampNL. It was so much fun to see these WordPress people being amazed at what you could do with BuddyPress. I made a lot of friends that day!

I’m telling you all this because I think it’s important that you know that my concerns written down in this article are coming from someone who owes a lot to the project, and has no intention to see it fail or “die”. I know pretty much all the people running the project behind the scenes, grinding out code as soon as they find the time in their busy lives.

So why write it then? Because if I look at the current state of BuddyPress I can only be honest and tell everyone not much has changed for almost a year. It’s still a great social networking solution but the development and 3rd party plugin development has slowed down enormously. To me it’s obvious that some things need to change. I’ll get to that part later, first we need to go back a little and summarize what happened when BuddyPress 1.2 was launched.

A short trip down memory lane

around the time BP 1.2 was released the potential and buzz around our beloved social networking plugin was steadily growing. The community was active, great 3rd party plugins were released and being worked on, and the project moved at a steady pace. It was a great time for the entire project, and our hero Andy Peatling was spending his full commitment on making it ever more awesome, being backed up by a team of volunteers. Exiting times!

After 1.2 released Andy’s focus shifted away from BuddyPress, and I figure that makes a lot of sense. You can’t do the same stuff forever! JJJ was considered the Alpha Male now, and it was a spot he rightfully earned. When JJJ was also hired by Automattic I could only be glad for him. Both Andy and JJJ proved that they are capable of developing and maintaining great open source projects, and these job offers allowed them to earn their living with what they loved to do. I did expect that Automattic would make sure they kept being involved with the project, since at that time it was obviously doing very well. Instead Andy completely moved away from the project, and JJJ got his hands full on working on the new BBPress Plugin. He did drop in from time to time to do maintenance and chip in a few cents on BuddyPress related discussions, bust mostly he was doing other things.

Luckily around that time Paul and Boone moved up the ladder becoming Core Developers. And once again I was happy for them. Why? Because these guys write BuddyPress code in their sleep! I can’t name you two guys who have been as passionate about BuddyPress as they are. They have spent hundreds (thousands?!) of hours working on the project, answering support questions and developing plugins. So if you thought this article comes to a point where I start blaming them, JJJ or Andy for the current problems BuddyPress has, you better stop reading now.

So what IS the actual problem then?

Ok now that I’ve spent so much words on setting up the stage, it’s time to start with addressing the problems. This is where stuff can get ugly. But I think it needs to be said. If you have kids reading over your shoulder, it’s time to move them away from the computer.

BuddyPress Development has slowed down drastically

Paul and Boone have been trying their absolute best to keep the development going, but they are doing this part time, on a voluntary basis. It’s impossible to keep such a massive project progressing at the same pace as before JJJ and Andy “left” BuddyPress. They both have jobs, a life and a passion for other things besides BuddyPress. like eating pizza and having a flock of chickens running around.

If I look at the current state of BuddyPress I can only be honest and tell everyone not much has changed for almost a year.

And while it has been said that anyone can “easily send in patches or help with the project” it’s actually not that easy. Remember that a lot of people who want to help out with BuddyPress have no idea how to create patches, work with the trac system or even know where to get started! And no, the answer “Just read the Codex” has never been sufficient. I’m not saying the current way of working is wrong, but it’s too heavily based on the WordPress way of working. And with freaking millions of active users, even they had a hard time finding core contributors.

3rd Party developers and designers are hardly rewarded for their work financially or mentally

That sounds like a bold statement, but just take a few steps back and look at the current situation:

Plugin donations are extremely spare. Thousands of people download BuddyPress plugins every day and the developers hardly receive anything in return. While some might say that that’s just “way how GPL works”, Providing solutions and tools that benefit the community in large should be rewarded financially. That realization is not present with 95% of the community and that reflects on the activity around 3rd party plugin development. I can’t name a single major plugin being released for BuddyPress for the last couple of months or even a year from someone who has not been active in BuddyPress before 1.2 was released. There are still a few amazing plugin developers out there, but when you actually talk to these guys, and ask what they get in return, it makes me a very sad panda. Because mostly the response is something like: “I get about $20 bucks of donations, shit loads of feature requests and the occasional hatemail”.

Even contributors that have been part of the community from the beginning have given up and moved on to other things. Maybe the most painful example of this is the way Jeff Sayre’s Privacy Component has turned out. Hundreds of hours of development seem to have been for nothing due to pushed back released dates, rude community members and overly long demotivating discussions about the importance of such functionality. For me it’s been hard to look back at it being both a user and developer. Not to mention how it must have been for Jeff and the community members who did try their best to get it out there for us to use.

Even this years Google’s Summer of Code has been completely free of any BuddyPress related projects, while the previous year we got EventPress, BuddyPress Courseware, BP-Moderation and BP-Album developed. As far as I know there were NO BuddyPress related project proposals send in. That is a sign that can’t be ignored.

Creating and maintaining BuddyPress Themes is a big challenge

While Child Themes generally an easy way to develop themes, in the case of BuddyPress that is not so much the case. When you just mess around with the stylesheet and change a few things, it’s all good. But when you start modifying templates or actually want to create your own custom BuddyPress parent theme, you get in a lot of trouble.

Premium Themes

Because the learning curve is pretty high, and existing frameworks already have a base template structure set in stone, premiuum BuddyPress themes are sparse. For the most part it explains the lack of (commercial) themes available for BuddyPress. The importance of “Premium Themes” should not be underestimated and it was a huge part of the success of WordPress

Some efforts have been made by bigger players in the theming business (I worked with WooThemes on a BuddyPress theme based on their Canvas Framework theme) but these project have turned out to be troublesome. If you already have a great WordPress framework developed it’s simply a lot of work to offer BuddyPress compatibiliy, and the pay-off is currently very low. ThemeForest does not even except BuddyPress themes, just a ThemeGarden and practically all other theme shops.

If you already have a great WordPress framework developed it’s simply a lot of work to offer BuddyPress compatibiliy, and the pay-off is currently very low

3rd party plugins are based on the BP-Default template structure and this led to great difficulties in getting BuddyPress functional and compatible with other themes and frameworks. It’s pretty frustrating as a BuddyPress fanboy to see these projects fail and I’ve spent countless hours defending BuddyPress. But if I’m being honest and take off my “BuddyPress lover” purple sunglasses, I completely see the many difficulties around any “serious” BuddyPress theme and plugin development. And if it was just me, we would see more then a handful of themes appear right? Here’s a quote from Adii, founder of WooThemes that underlines the position BuddyPress is currently in:

“Our opinion on BuddyPress is divided: whilst we think it is a great platform, we honestly do not see widespread use for it and think that the functionality & features is overkill for 99% of websites. Just because it’s nifty to have your own little social network, doesn’t mean that every website should have this… [...]So our opinion before was that BuddyPress is thus a very niche market and as far as niches go on WooThemes, we’ve always been reluctant to over-commit our internal resources to these. [...]

We haven’t seen more requests for BuddyPress popping up since we introduced Canvas BuddyPress. This has generally been the case when we’ve introduced something new (like our tumblog themes, which has seen us release multiple popular themes since the first two themes in March 2010). [.....]“

It’s unlikely that our foray into BuddyPress will be expanded beyond the Canvas child theme. Never say never, so we’re not ruling this out completely, but this is highly unlikely.

I can’t really blame them. Here’s part of an email I sent to Adii just a few weeks before that post:

Themes in the Repo

There is a complete lack of new themes being released in the repository. It has taken months before actual BuddyPress child themes were accepted in the Theme Repository due to features missing in the BP-Default theme. This meant that all BP-Default Child Themes were rejected, which in turn led to no new free themes being released for almost a year. When I read this is was actually pretty pissed of at how that situation was handled. In the end this was solved by some great people of the community, mostly Tammie and Modemlooper. But this should have been something that would at least be addressed and handled by the WordPress Core team.

This situation has now been resolved but new themes are still not showing up in the repository. And to be honest I can’t name you five people who work on creating BuddyPress themes. Can you?

The BuddyPress.org Community Site

During the last couple of years I’ve seen a lot of BuddyPress websites, and I think the official BuddyPress one is one of the worst I’ve seen. There, I said it. The community is completely fractured into several streams of communication, and it’s impossible to completely keep track of what the hell is going on. I’ve actually spoken to people who simply stopped going to the BuddyPress site to help out others because they went bat shit crazy.

Using the BuddyPress.org website is like having 3 email accounts without any of them showing them if you have new messages. You visit the forums, browse to your profile and check your favorite threads RSS feeds. It’s a usability nightmare. In my opinion there’s a lot of stuff that needs to be changed, and I know that Boone was planning to do so.

The community is completely fractured into several streams of communication, and it’s impossible to keep track of what the heck is going on.

Maybe it’s time to pick that up again before 1.3 launches? I’d be very happy to work on it with a the rest of the community!

Coming up with solutions

I think writing these types of critical articles can only be ended with coming up with some solutions. In the upcoming weeks I will keep coming back to this article and write follow up posts about the problems that I addressed. I think most of these problems can be solved by some hard work, creative thinking and a combined effort from all BuddyPress communities out there. That is why I will be contacting a lot of the people that I know in my BuddyPress network, and work on something that I think will benefit BuddyPress.

I think most of these problems can be solved by some hard work, creative thinking and a combined effort from all BuddyPress communities out there.

Also I’d like to say that Marshall Sorenson and I have been working on a powerful WordPress/BuddyPress GPL platform called Infinity which has full BuddyPress support for (child)theme development. This should make BuddyPress Theme development a whole bunch easier, and it will hopefully give a boost to the available quality BuddyPress themes. BP-Tricks is completely built on this platform and in in the upcoming weeks the project will go into private beta. If you are a BuddyPress developer or designer, we would love to get you on board to give feedback and improve the product.

A word to AutoMattic itself

Over the last two years I’ve become really attached to the project and spent a lot of free time on contributing to it. Not nearly as much as others have done, and that is exactly why I felt the need to write his post. For me BuddyPress is not just a social networking plugin. It’s become a part of my life and helped me made new friends, realize some of my ambitions and helped me make a living. Lately I’ve been getting the feeling that somehow the importance and potential of this project is not realized at AutoMattic HQ. BuddyPress adds something to WordPress and can be used to set up great non-profit social networks. We simply can not ask the current core developers to keep the project evolving at a certain pace, when we know what these guys are already doing the best they can. There need to be new players added to the BuddyPress roster and I just hope that Automatic starts to realize this.

Final Words

Finally I’d like to ask everyone to think really hard about the possible solutions to the problems addressed in this article. Post your thoughts, ideas and suggestions in the comments. Share your thoughts on Twitter and tell everyone to chip in. I’m sure if we get the discussion going, we’ll come up with great ideas to improve BuddyPress. Maybe at a lot faster pace then we’re used to!

- - - - - - - - You've finished reading The current state of BuddyPress: A critical analysis on BP-Tricks.

Making BuddyPress compatible with the WordPress SEO plugin from Yoast

bowe — Mon, 04 Apr 2011 19:44:23 +0000

The WordPress SEO plugin from Yoast is pretty much the only SEO solution you need for your WordPress site. It has become a default plugin in all my WordPress and BuddyPress projects. The only issue is that the plugin hooks into the common wp_title template tag to rewrite your site URLs to a custom title (that you specify from the WordPress SEO settings). BuddyPress does not use this tag, and thus the URL rewriting does not work. Below is a quick snippet that will fix this problem for you.

Find the following code in header.php of your Child Theme (around line 9):

<?php bp_page_title() ?>

And replace it with the following snippet:


 <?php bp_page_title() ?>

 <?php wp_title('') ?>

WordPress SEO is now working as it should. Enjoy!

- - - - - - - - You've finished reading Making BuddyPress compatible with the WordPress SEO plugin from Yoast on BP-Tricks.

The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache

bowe — Mon, 28 Mar 2011 22:44:42 +0000

For the last year or so the term CDN has been thrown around in almost every single discussion about speeding up websites. It seems like all the cool kids use one, and for a good reason.

a CDN is a network of servers that delivers cached static content from websites and applications to an end user based on the geographic locations of: the user, the origin of the static content, and a content delivery edge server.

Stated a little more simply: the closer the CDN server is to where the user is, the faster the user gets the content.

- Quote taken from the MaxCDN website

Sounds pretty awesome right? A Content Distribution Network is a pretty cheap way to speed up your website, and it’s pretty darn easy to set up. This trick will tell you exactly how to do so, using the popular W3 Total Cache plugin.

It took me a while to find a good CDN which was cheap, easy to set up and works great out of the box with WordPress. I ended up with MaxCDN here on BP-Tricks and I’m very pleased with their services.

There’s another reason I’m being pretty specific about using MaxCDN in combination with W3 Total Cache. The two go really well together;

W3 Total Cache, created by Frederick Townes and a long time MaxCDN customer, created his popular WordPress plugin to allow direct content delivery into any WordPress installation without any special knowledge or programming required.

Enough with the background info, let’s do this!

Step 1: Sign up for a CDN account with MaxCDN

Go to the MaxCDN website and sign up for an account. Usually they have some pretty good sign up offers (1000 GB of traffic through the CDN for $39,95 currently) and this amount of data traffic takes a long time to reach (On BP-Tricks I’ve only used about 40 GB of my 1000GB in 4 months).

After you’ve signed up you’ll be able to access the control panel of MaxCDN, which brings us to our next step.

Step 2: Create a “pull zone” from your MaxCDN control panel

After you’ve logged in, go to “Manage Zones” and on your left click on “Create Pull Zone”. You’ll see a new screen where some basic info should be filled in. You’ll be guided every step, but here’s an example of how I use it here on BP-Tricks:

You do not need to enable Gzip compression, because that stuff can be handled by W3 Total Cache. Press the Create button and on the next screen you’ll be looking at your Push Zone details.

Copy the Temporary URL and save it somewhere, because you’ll be needing it soon. The temporary url does not look as fancy as your custom domain CDN url, but that stuff can be pimped out later and requires you to add a CNAME to your DNS settings with your host. Sounds complicated? No worries, you can skip that step and keep using the temporary url without any problems.

Step 3: Installing and Configuring W3 Total Cache for CDN usage

Use the plugin browser to install W3 Total Cache and activate it. In the near future I’ll be posting an extensive guide for a more complete setup of W3 Total Cache, but due to the nature of BuddyPress that is a pretty complicated process.

Advice: Set up your CDN first and make sure it’s working, before you mess around with the caching options. If I where you I would disable all the caching functions in W3 Total Cache and just follow the steps in this Trick first. When the CDN is working export your configuration settings (under general settings) and then mess around with the rest of the plugin

First go to General Settings and enable the CDN functionality with the following settings:

Now browse to the “CDN” page in W3 Total Cache. This is where it’s getting fun. The default settings are great for WordPress, but we are going to tweak some settings to make it really beneficial for BuddyPress specific stuff! But let’s start at the top:

General Settings: Tick all of the boxes except “Host Minified CSS/JS” (probably disabled) and “Import external media library attachments” is optional. It’s a matter of preference.

Configuration: It could not be easier.. Leave everything as is, and simply fill in the Temporary URL that you got when creating the pull zone:

Do the NetDNA test and see if the test is passed. I’m pretty sure it will

Advanced: This is where the real fun starts. Once again keep all the default settings intact, and move to the custom file list straight away. This is where we can do some great things that can greatly improve page loading speeds. Be sure to add the following lines to the custom files list:

wp-content/uploads/avatars/*
wp-content/uploads/group-avatars/*
wp-content/plugins/buddypress/bp-core/js/*
wp-content/plugins/buddypress/bp-themes/bp-default/_inc/*

Guess what? Now all your user avatars, group avatars and BuddyPress CSS/JS files will be loaded through the CDN!

The last line is assuming that you are using a Child Theme of BP-Default, and thus you need to specify these folders to be hosted by your CDN manually. If you’re using BP-Default you can remove this line, because Total Cache will handle the CDN setup of your currently active theme automatically.

Are you using a lot of plugins for BuddyPress? You can fill in the paths to the location of their CSS/JS files as well, to further speed up your site. Here’s a screenshot of all my CDN hosted files:

Step 4: Check out the results of all your efforts

Save your settings. Go to your homepage. Do a hard refresh of your browser. Witness the power of your awesome CDN. Check out the location of your CSS and JS files with FireBug. Or upload a new (group)avatar. Check out the url of the image. You did it. I’m proud of you! And your community and web host will love you for the increased performance, reduced traffic to your server and a better browsing experience. Be proud! Enjoy!

- - - - - - - - You've finished reading The perfect CDN setup for BuddyPress using MaxCDN and W3 Total Cache on BP-Tricks.

Displaying certain profile fields on your members profile page

bowe — Mon, 28 Mar 2011 14:01:04 +0000

This post is updated for BuddyPress 1.5!

Showing certain profile fields on a member profile has become really easy since 1.2. By adding a simple code snippet to your member-header.php file, you can display certain fields that are important in your community. With the help from Boone I’ve modified this snippet to only show when the field is actually populated with information. Here’s a quick guide on how to set this up:

Step 1: Move the file bp-default/members/single/member-header.php to your Child Theme folder

Like always you need to move over the template to your Child Theme first, to get this working. Make sure that you keep the folder structure intact when copying over the template (so the file stays in the members/single/ directory.

Step 2: Add the code snippets to the member header file.

Open up the file, and around line 28 (right after the closing “item buttons” div tag) add the following:


    Category: 
    Playing Age: 
    This Actor Is Currently:

In the example I’ve used a few profile fields and I’ve added some basic CSS styling. You can replace the profile fields name with your own fields to get everything working. Keep in mind that the field name is case sensitive and that it will only be shown when filled in.

Step 3 (optional): Add some CSS styling

If you keep the same structure as in the snippet, here’s some CSS you can add to your stylesheet.

div#member_profile {
	margin-bottom: 15px;
	margin-top: 15px;
}

.profile_fields {
	color: #777;
	font-weight: 500;
	padding-bottom: 2px;
	padding-top: 2px;
}

.profile_fields span {
	color: #444;
	font-weight: 700;
}

Result:

Update: Only show a field when it’s filled in

In the comments Onyx asked if it was possible to hide these fields when they are not filled in. This can be done by doing a conditional check to see if the profile field has a value. Here’s the code snippet with a simple example:



         Country:

That should to the trick! Props to Boone who helped me out with this a while back!

- - - - - - - - You've finished reading Displaying certain profile fields on your members profile page on BP-Tricks.