Web 2.0, Php, MySQL, HTML, CSS, Wordpress, Javascript, iTouch iPod, iPhone, Adobe…
If you experience anything below, you might need to take a break from BuddyPress/WPMU development:
1. Taking off work, school, or all (personal) human contact when WP 3.0 is out (BP devs understand!)
2. Attempt to use the word “buddypress” in your scrabble game.
3. You lock yourself in the bathroom for privacy… wife knocks on door, you say “You have not been invited to this private group”.
4. You think picture frames you buy at the store should come with those butt-ugly gravatar default images rather than images of a family that isn’t yours.
5. Change your outfit, call it “checking out a new theme”…
6. Ask your kids for an RSS feed for the “Site Wide Activity” of what they did at school today.
7. You bake cookies in the shape of those tiny menu icons in the BuddyPress default theme.
8. You paint your house BuddyPress-orange.
9. You wake up, turn to your wife, and say “last active: 7 hours, 21 minutes”
10. More than curious to see if you are related to Andy Peatling.
WP Super Cache is great, but a pain in the butt if you have plugins that don’t work with it (or in my case, PHP functions in the templates that can’t be cached). Bookmarking this for future reading, it appears to be holding some interesting tidbits. HOWTO: Make WordPress plugins work with WP Super Cache.
10 Mar
Stumbled on this JQuery Corner Demo which shows a really nice and flexible way to create rounded corners (or not even rounded) for boxes. The only potential problem here is: is this more CPU cycles than using the image/CSS tricks? Probably worth a very good try if you are already using jQuery on your sites. Regardless, worthy of a bookmark - especially if you need rounded corners at 2am in the morning.
On February 22, I gave a presentation at BarCamp Miami entitled “Introduction To Buddypress: Social Networking With Wordpress”. Here’s a photo:
http://flickr.com/photos/gsiteam/3301184428/in/photostream/
Here’s the slides at slideshare.net. This was my first public presentation, and the audience was varied, so the presentation was aimed mostly at the light (or even no) coding community to get the word about BuddyPress out there. From the talks I had AFTER the presentation (and also at FOWA 2 days later), it looks like I managed to reach some.
Let me know how you like the slides - I would like to improve this presentation and deliver it at future Barcamps and Wordcamps.
22 Feb
(wordcamp room)
Disc project - 11:30am
K2 issues - 12:30pm
BuddyPress/Social Networking - 1:30pm
Showcasing the showcase - 2pm
Wordpress framework - 2:30pm
Friend Connect - 3:00pm
wordpress SEO - 3:30pm
One big travel - 4:00pm
Services widget - 4:30pm
(barcamp room)
Desiging apps/sites for teens - 1:00pm
Make any website social (friend connect) - 1:30pm
turn your social media addiction into an asset - 2pm
Strategy and innovation - 2:30
open discussion - leverage social pages - 3pm
twitter performance - 3:30pm
ten advanced strategies for social networking for biz - 4pm
how to get your next job - 4:30pm
Some of my fellow followers on Twitter a few days back were requesting people contribute with any tips or helpful hints to get the most out of BarCampMiami and FOWA next week. I managed to get a few tips together (mostly reminders). If you want to add any, please leave a comment. Thanks!
1. Social Events - Get the most out of the experience by attending these (some require tickets to be purchased ASAP):
UPDATE: Unofficial FOWA Beer Lovers Meetup
Geek Dinner - Sunday, February 22, 2009 from 7:00 PM - 9:30 PM (ET)
Social Media Club South Florida Meetup - Feb. 23rd 6:30pm to 9pm
FOWA After Party - Feb. 24th at Nikki Beach Club
2. Bring lots of business cards. Exchange of cards seems to be still a time honored part of a meet/greet.
3. At FOWA, there are going to be FREE uni sessions - mini conferences in “break out rooms”. 50 spaces per session, first come first served. Facebook, Sun, etc.
4. Obvious, but if you don’t have extra iphone, laptop, or batteries start ordering them (or actually buying them locally) now. Don’t count on outlets although FOWA says there will be placed to “plug in your laptop”.
5. At FOWA, according to sources, wireless internet will be in the lobby ONLY. Should be able to get a 3G signal inside though. At BarCamp, there is Wifi in the restaurant but when I spoke to @alexdc, he was thinking it might be limited to due demand.
6. UPDATE: Follow the FriendFeed Room FOWA Miami & WordCamp/BarCamp/NewsInnovation. It monitors tweets and flickr feeds in one easy place. There’s also a RSS feed of the room in case you can’t follow FriendFeed directly.
30 Jan
Emenu is designed to create a fixed-width, fixed-height drop down menu contained within a header image.
This is more of a bookmark then anything else, since I have yet to try this. But this Wordpress Plugin Template seems very interesting and useful for those who want to learn to create Wordpress plugins. Not sure if this covers everything, but if you ever wanted to dip your toe in the pool of Wordpress plugin development, this might help you out.
James Padolsey has a nice imgPreview jQuery plugin, which i kinda like the look of. It shows a preview of an image when you hover over a link, similar to a tooltip.
13 Jan
This plugin allows any developer to recreate a “page slide” interaction on their own website… pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
This is something i’ve been working on for about a week off and on. The holidays has given me some rare time to devote to this. Once the new year starts, i’m going to be toast.
I have adapted the WP AutoSuggest plugin to work within certain search boxes within the BuddyPress main template. See screenshots below. I’m doing a little beta testing (right now the plugin does not have controllable options in the admin, but i’m considering adding a few just to get it out the door). Bringing this up now in case there are any big “must have” requests.
FYI: I wanted to make this work with the search box in the upper left. And someday I (or someone else) might. But it’s difficult because (1) the box is everywhere - even on BP profile templates and (2) it’s difficult to get the right filtered results with the html dropdown box there. Some fancy javascript might be required, but i’m just not into trying to figure that out at the moment.
Anyways, hopefully I can throw this out to the BuddyPress community soon.
I’ve come up with three versions of starting points or “building blocks” for those who want to build their own BuddyPress components. For those impatient, here are the links:
www.davidbisset.com/wp-content/uploads/2008/12/bp-testv0-1-0.zip
www.davidbisset.com/wp-content/uploads/2008/12/bp-testv0-1-1.zip
www.davidbisset.com/wp-content/uploads/2008/12/bp-testv0-1-2.zip
All three versions are “drop and play” solutions. Just put the files in the right folders (see the included README in each zip) and these should work on a basic install with the BuddyPress beta components (your WPMU and BuddyPress must be working 100% first).
Version 0.1.0
www.davidbisset.com/wp-content/uploads/2008/12/bp-testv0-1-0.zip
This version is very close to the proof of concept screenshots for Twitter and Friendfeed. Very basic - it just adds a menu and two submenus to that menu. It should automatically also add the menu to the “BuddyPress Bar” that appears at the top and (by default) is grey.
Version 0.1.1
www.davidbisset.com/wp-content/uploads/2008/12/bp-testv0-1-1.zip
This version adds the “header tab” navigation you see in the above screenshot. This requires a few additional PHP functions, and therefore increases the complexity a little bit. I also added a few BuddyPress PHP functions in the sample page that you should become familiar with but are very straightforward. This version rounds out how to create major navigational elements in BuddyPress.
Version 0.1.2
www.davidbisset.com/wp-content/uploads/2008/12/bp-testv0-1-2.zip
This (final?) version changes the “Second Page” into an example of showing rowed results (similar to what you see on the wire page). This bumps up the complexity a bit since we use alot more PHP functions, mostly stored in the bp-test-templatetags.php file. We also use several classes seen in bp-test-classes.php and bp-test-templatetags.php. Also add a “standard” (of sorts) filter file (bp-test-filters.php). If you are planning on displaying anything in a table/row format like in the screenshot above, then you will want to examine this version. I have removed AJAX references to make it easier. Honestly this is all very close to the WIRE BuddyPress component so if you want to look at that as well, especially if you have the hang of this and just need to add in AJAX, that would be a wise move.
These three versions support potential BuddyPress components ranging from the very simple to more-or-less the level of some of the current BuddyPress beta components. These building blocks will hopefully be a learning tool first (if you don’t understand what they do, then you won’t get very far) and a time saver second.
As always check out the BuddyPress forums for the latest. I would like for discussions about these building blocks to take place there or here on my blog. These aren’t plugins technically and would prefer if these are polished before redistributed to any plugin sites outside of buddypress.org. But you are open to translate these, just provide a link here in my blog when you are done. Thanks!
Since i started playing with expanding the settings menu in Buddypress, I have been on a role lately (could have done this much earlier, but i am catching up on a ton of work before the end of the year).
I am going to write a more detailed post soon, but i wanted to share the two screenshots.
This screen shows I have taken a common twitter library, and with the knowledge i talked about in my last post, is showing a twitter stream from STORED username/password variables. That means no hardcoding. The user on this site (via BuddyPress) was able to setup their account information in “settings” and now his/her twitter stream is visible to the public.
I have done the same thing with Friendfeed. With Friendfeed, this looks more like a lifestream.
This is all rough, proof of concept stuff but I can how easily this can turn into a powerful lifestream plugin for BuddyPress. I could probably code this faster than adapting an existing plugin completely. My next proof of concept might be Flickr. I don’t use it much personally, but apparently it’s been a big request (FriendFeed handles Flickr streams too). Perhaps also Twitpics, if there’s an API for that.
Comments are open for discussion, i’ll also be around in the Buddypress forums and also Twitter (@dimensionmedia).
Update: Andy has suggested to make these modifications a separate file to drop into the mu-plugins folder. This works like a charm, and perfect because you do NOT have touch ANY core files. I have attached the file called bp-social here. So drop this into the mu-plugins folder and you should see a new submenu appear in settings on a profile (just like my dropdown). Read the comments below this post.
I have been playing with the BuddyPress beta recently, and planning on focusing on it’s impact to Social Networking in 2009 on my socialnetworking.com blog.
In the meantime, i’m more focused on my personal blog on expanding on the code. First, you must have played already with BuddyPress to understand this. And if you want to try this, you must already have a good foundation in PHP. This is not a “drop a plugin and it works” deal.
From what i’ve discovered, you need to modify one file for basic settings but unfort. it’s a core file. bp-core-settings.php. I have made my own modified version here: bp-core-settings.php (You may download, but use it at your own risk… this should work if you replace the core file, but do this with care and backing up any files. Remember this is for learning only).
Notice that adding a submenu within settings is simple enough at the top of the file itself.
bp_core_add_subnav_item( 'settings', 'social', __('Social', 'buddypress'), $bp['loggedin_domain'] . 'settings/', 'bp_core_screen_social_settings', false, bp_is_home() );
If this is new to you, then you will probably have to take some time learning what the parameters mean and where BuddyPress is grabbing them. The important thing to note here is the displayed name (”Social”) and the php function it goes along with (”bp_core_screen_social_settings”).
Next, later in the same file, I simply duplicated the general settings, renamed the php functions (I kept the same naming convention but replaced “general settings” with “social” since I was attempting to create a social settings panel). Make sure the first function below matches the function you stated in the bp_core_add_subnav_item that we just talked about it, or it isn’t going to work. (Mine is “bp_core_screen_social_settings”). Here is my code:
/**** SOCIAL NETWORKING SETTINGS ****/
function bp_core_screen_social_settings() {
global $current_user, $bp_settings_updated, $pass_error;
$bp_settings_updated = false;
$pass_error = false;
if ( isset($_POST['submit']) && check_admin_referer('bp_settings_social') ) {
// Form has been submitted and nonce checks out, lets do it.
if ( $_POST['twitterusername'] != '' ) {
update_usermeta( (int)$current_user->id, 'twitterusername', $_POST['twitterusername'] );
$bp_settings_updated = true;
//$current_user->user_twitterusername = wp_specialchars( trim( $_POST['twitterusername'] ));
}
if ( $_POST['twitterpassword'] != '' && !strpos( " " . $_POST['twitterpassword'], "\\\" ) ) {
update_usermeta( (int)$current_user->id, 'twitterpassword', $_POST['twitterpassword'] );
$bp_settings_updated = true;
// $current_user->user_twitterpassword = $_POST['twitterpassword'];
}
}
add_action( 'bp_template_title', 'bp_core_screen_social_settings_title' );
add_action( 'bp_template_content', 'bp_core_screen_social_settings_content' );
bp_catch_uri('plugin-template');
}
function bp_core_screen_social_settings_title() {
_e( 'Social Networking Settings', 'buddypress' );
}
function bp_core_screen_social_settings_content() {
global $bp, $current_user, $bp_settings_updated, $pass_error; ?>
<?php if ( $bp_settings_updated && !$pass_error ) { ?>
<div id="message" class="updated fade">
<p><?php _e( 'Changes Saved.', 'buddypress' ) ?></p>
</div>
<?php } ?>
<?php if ( $pass_error && !$bp_settings_updated ) { ?>
<div id="message" class="error fade">
<p><?php _e( 'Your passwords did not match', 'buddypress' ) ?></p>
</div>
<?php } ?>
<form action="<?php echo $bp['loggedin_domain'] . 'settings/social' ?>" method="post" id="settings-form">
<label for="email">Twitter Username</label>
<input type="text" name="twitterusername" id="twitterusername" value="<?php echo $current_user->twitterusername ?>" class="settings-input small" />
<label for="pass1">Twitter Password (leave blank for no change)</label>
<input type="password" name="twitterpassword" id="twitterpassword" size="16" value="" class="settings-input small" />
<p><input type="submit" name="submit" value="Save Changes" id="submit" class="auto"/></p>
<?php wp_nonce_field('bp_settings_social') ?>
</form>
<?php
}
What is neat about this is that you can create basically any field for any settings you want to store with the update_usermeta() function. If the setting isn’t stored in the wp_usermeta table already, it gets created. If it’s already there, it gets overwritten.
This is not a complete tutorial, and it’s more or less my own personal notes in how i made this happen. But it does show that it is possible to expand BuddyPress to hold custom “settings” values for use elsewhere on the site. For example, I am trying to create a settings panel to hold social networking username/passwords (like for Twitter) and be able to use these elswhere on the user’s profile section. Perhaps the beginning of a custom BuddyPress livestream or social networking plugin.
Please make sure you know about the BuddyPress forums.
This WordPress “Art Direction” Plugin apparently allows you to style each post differently (or as you choose). Interesting, in case you need it. Bookmarking because you never know.
How To Fix WordPress 2.5.1 “Invalid Activation Key” Bug (Occurs When Resetting Password)
This was useful to me today, and actually worked with a client site.
Most of these are repeats, but i like to keep a fresh collection of css tab scripts - update at least once a year.
The official title of the post is 20 jQuery Plugins for Unforgettable User Experience. Some items on this list were actually new to me, which is a nice and refreshing change. Here’s the list.
1. seekAttention
2. prettyPhoto a jQuery lightbox clone
3. ThemeRoller
4. The Silky Smooth Marquee
5. Auto-populate multiple select
6. jQuery Feed Menus
7. jQuery iPod-style Drilldown Menu
8. Convert a Select Box Into an Accessible jQuery UI Slider
9. Setting Equal Heights with jQuery
10. Increase the size of click targets and get more call-to-action conversions
11. Using jQuery for Background Image Animations
12. CrossSlide
13. Fading Links Using jQuery: dwFadingLinks
14. Agile Carousel: JQuery Carousel Plugin
15. Image Cross Fade Transition
16. Stylesheet switcher using jQuery
17. jQuery File Tree
18. jQuery Context Menu Plugin
19. jScroller
20. Jcrop
Using Javascript to Fix 12 Common Browser Headaches
Most are jquery fixes. Some things covered include:
$("#col1, #col2").equalizeCols();)$('html').addClass($.browser);)More photoshop brushes. I seem to be on a kick lately. Whatever, as long as i keep my blog updated.
I’m not a floral person - really - but these photoshop floral brushes can save one from purchasing several stock photos and then trying to be more creative once you get them. Might also come in handy for a quick email newsletter or invite (digital or physical).
10 Aug
Wow this tiled backgrounds designer is very nice. Only wish there was an image uploader.
7 Jul
Great slider/tab effect for jQuery.
How To Make An IP-To-Country Tool With PHP and MySQL - Very handy tutorial for those who need to display (or not display) certain information depending on where the user is located.
More Fields Wordpress Plugin - Works with Wordpress 2.5+
Really nice collection of usable plugins here - wp-pools, wp-ban, wp-email, etc. If you do moderate work in Wordpress, bookmark this. Seriously.
Perfect multi-column CSS liquid layouts - but wouldn’t they be iPhone compatible by default since the iPhone uses MobileSafari?
19 Jun
Sourcebench has got what seems to be a nice Wordpress Review Plugin. Users can leave comments with multiple star ratings. Potentially very useful.
This is a good technique that the big blogs do, and it’s helpful to see how you can apply this for your projects. Display a particular post and try to show related (by topic or author) posts or information to keep the user on the site.
Usually I don’t posts with titles like this, but this is actually a good article that doesn’t cover many of the really common newbie stuff. Using CSS to Fix Anything: 20+ Common Bugs and Fixes
15 useful, free tools to help you create and sustain high-performance web applications.
FancyBox is another lightbox but according to it’s author it’s “something fresh and Mac-like”. Uses jQuery.
Features:
* Automatically scales large images to fit in window
* Adds a nice drop shadow under the zoomed item
* Groups related items and adds navigation through them (uses preloading)
* Can display images, inline and iframed content
* Customizable through settings and CSS
John Resig’s port of John Gruber’s Perl script: Title Capitalization in JavaScript. The script, as the oringial, is capable of providing pretty capitalization of titles generally most useful for posting links or blog posts.
wptouch: wordpress iphonified is a complimentary theme installed as a plugin on your WordPress blog or website that will format your content with this Apple-inspired, full-featured theme when your visitors are using an iPhone or iPod touch.
23 Apr
If you need quick access to html/css for pagination then check out this good tutorial at woork. Digg and Flickr styles provided.