New Sliding AJAX Login Panel Plugin for BuddyPress

This is a fun new plugin that delivers a fancy, smooth AJAX login experience for BuddyPress users. It also includes an account center with a full user menu. I put this plugin together based on the iRedlof Ajax Login by Rohit LalChandani but have completely re-worked it for use with BuddyPress. The plugin adds a tab to the top of the page to pull down a panel where the user can login. I wrote in a BuddyPress profile and account preview center for logged in users where they’ll be able to check out a teaser of their new messages and friend requests as well as navigate to other areas of the site.

The panel as it appears for Logged Out users:

The panel for Logged In Users with No Messages/Requests:

The panel for Logged in Users with Messages/Requests:

BuddyPress Sliding Login Panel Plugin Features:

  • Logged Out Users: The panel displays a welcome message, link to registration, password retrieval, and an AJAX login form.
  • Logged In Users: The panel displays a total of two new messages with links to the inbox, the user’s current avatar and option to change it, a list of links to the most commonly-used BuddyPress components, and a preview of the user’s friend requests.

How to Install:

  1. Upload the plugin to the plugins directory.
  2. Activate the plugin.
  3. Add the this tag right after your tag in the header.php file of your BuddyPress child theme:
    1
    
    <?php if(function_exists(updateHeader)) updateHeader(); ?>
  4. Disable the BuddyPress Admin Bar by adding this to your wp-config.php file:
    1
    
    define( 'BP_DISABLE_ADMIN_BAR', true );

This plugin has no options after you install it, which is simply because I haven’t yet learned to add in option pages for plugins. As soon as I have the time to figure that out, I hope to make it much easier for users to customize without having to edit php files. For now, if you want to change the welcome paragraph or any of the links, most everything can be found in the update-content.php file. You can also edit the CSS file included to make the plugin fit your site’s design better. More than likely you will want to update the logo. The easiest way to do that would be to name your file logo.png and overwrite the the same file in the images folder.

Download BuddyPress Sliding Login Panel:

You can download this plugin for free at the WordPress repository: http://wordpress.org/extend/plugins/buddypress-sliding-login-panel/ It has some updated installation instructions and several fixed from the first time it was released.

If you catch any bugs or notice any issues with the plugin, please let me know. Also, if you find more efficient ways to do what I’ve written, feel free to make suggestions. Any tips from other plugin devs are much appreciated. I hope you enjoy this plugin and let me know where you’re using it and how you’ve customized it further!

Comments (99)

  1. wow, that is very nice!

    one code suggestion (or one less theme edit)

    add

    function bp_slide_login_panel() {
    updateHeader();
    }
    add_action( 'bp_before_header', 'bp_slide_login_panel' );

  2. Hi! I’m using WP and BP (VERY NEW TO BUDDYPRESS) and i’m trying to activate this but i get this error: “The plugin does not have a valid header.” …I don’t have a “Child Theme” and have no idea where to begin to make one.

    My site in progress is: http://www.jchambo.com/populationpowder

    I’m trying to build a snowboard community…any help would be greatly appreciated.

    I need to figure out a very sleek and advanced user system. PLEASE HELP!

  3. and also if there is a better user panel or “user page” section i can add to my site without that admin-bar (at the top) of my site, can you PLEASE show me where / how to get that?

    i’m advanced at HTML and editing code, but can always use help. Especially with WP / BP. Thanks again!

  4. I got the panel to work but I have a few problems:

    1. my search feature gets blocked by the panel height at the top
    2. the “register” feature doesn’t work (as a new user)
    3. how do i edit the “Logo” in the panel, do i just use the “Edit Plugin” CSS?

  5. love this as a design element and the approach to grouping the most used BuddyPress components (structured in more user-oriented way than the technically driven default BP menu structures).

    Did you have to write your own API calls / template tags to ‘break in to’ the bp_nav_menu calls, and just pull out the links you wanted, where you wanted them?

  6. ignore my last comment about API calls, etc. … I’ve taken a look in the code!

    One thought: would it be better to use the slugs (e.g. BP_ACTIVITY_SLUG) to generate the path names in the links, rather than hard literals.

    Keep up the great work.

  7. I like your plugin and am gald that I found your post to change the look of admin bar. I have been looking to change the look of that black admin bar for while had managed to change color but this plugin changes the whole look of website.

    Thank you very much Sarah.

  8. Nice plugin. I used it in on my buddypress test site and it worked fine but only after I disabled javascript minification of wp-minify plugin. The interface is nice and makes the site look better but I can’t find all the options of default admin header. Links to blogs and its dashboard is missing from this plugin. It would be nice if you can include all of the default admin bar functionality in this plugin.

  9. Hi
    @Sara , I like this plugin and have two suggestions about it :

    1. Please use ” _e( ‘ Title or Word ‘ , ‘ buddypress ‘ ) ” for your plugin title and words , this make plugin translatable by WPML Multilingual CMS .

    2.In update-content.php file : find bp_loggedin_user_avatar(‘width=117&height=117′) on line 53 and replace it by bp_loggedin_user_avatar(‘type=full&width=117&height=117′) .
    ” type=full ” help the plugin use a Better Quality Avatar.

  10. This is great! I recommend also using the defined groups and members slugs in your links to those pages – for those people who have changed these slugs in their wp-config.

  11. This is what my header.php looks like:

    <body id=”bp-default”>

    I added the function after body, but my site ended up showing blank page. Any suggestion?

  12. Hello,

    Just installed this on my local dev site and it is really lovely.

    After logging in, the only thing that seems to be not working is the link to “Sitewide Activity.”

    I get a 404 error “Object not Found”

    Is this perhaps to do with using my local machine rather than a proper server?

    Thanks for the help. If I can get it working properly, I just might use it with the live launch of buddypress next week!

  13. Get the following error:

    Fatal error: Call to undefined function bp_has_message_threads()

    If I remove the code related to the messages it seems to work fine (obviously without the message bit!)

  14. Is it by design this header doesn’t show up while in the dashboard? I am using a custom theme with Buddypress hacked in, so that may be to blame just wanted to check before I started digging. I am also having some padding issues but I believe thats more on my end than the plugin. Thanks for developing this!

  15. Sorry for not being clear. I am using my old wordpress theme with Buddypress hacked in via includes. The drop down shows on all my pages on the frontend but anytime I go to the dashboard (wp-admin) the drop down doesn’t show up. I vaugely remember others having this problem with the early versions of buddypress. For some reason the admin bar needed something extra to work with custom themes. But I didn’t know if that was the case here or just an error on my end.

  16. Ok thats cool. One last thing, have you noticed that even though the original buddypress admin bar is disabled there is still padding being added to the top of the dashboard? I still get the 25px of padding to the top of the dashboard even though the bar is not there.

  17. LOL Who are you going to believe my poor coding or your expertise? I did find a typo but for some reason it still worked. In the WP repository you say:
    define( ‘BP_DISABLE_ADMIN_BAR’, false ); above you say define( ‘BP_DISABLE_ADMIN_BAR’, true ); for some reason they both disable the bar. Again I thank you for your hard work over here. And your response time is better than some paid support systems :)

  18. The plugin is great. I am confused though. In this article it says you have to add define( ‘BP_DISABLE_ADMIN_BAR’, true ); in the wpconfig. In the wordpress repo it says define( ‘BP_DISABLE_ADMIN_BAR’, false ); Which is which really? Is it set to true or false?

    Second, I have the same problem as the others my own profile keeps showing up under friend requests. After clicking, it will go away for a while, then it shows up again. It seems that it is not updating at all. Even the message that has been read alreay won’t go away.

    I tried adding the php code to the header, but after adding, the tab won’t pull down. What am I missing here? Any fix on this?

  19. Ooops, seems my first got answered already. Just the same, the panel is not updating. When I place the update header code after body ta, the panel won’t slide.

    What seems to be the problem?

  20. Thanks a lot Sarah.
    The plugin is excellent but as Dimitris says I also have the same problem i.e Friend Requests are not updating.Its even showing accepted requests.
    And one more thing when I go to dashboard the panel is not being shown and a white space is being shown instead of the panel.
    Also how can I add blogs and create blogs to this panel.

    Thanks
    Prashant

  21. Prshant, yes the friends issue is a bug that I need to fix. The panel doesn’t appear when you’re in the dashboard. I have no plans to add blogs to the menu, as not all sites use them but you can easily customize the plugin in the update-content.php file. Just add in any links you want.

  22. The panel doesn’t appear when you’re in the dashboard.

    Sarah,Is it possible to set the default admin bar when we are in the dashboard and buddypress sliding panel when we are in the frontend.
    If so,could you please tell me how to do it.

    Thanks
    Prashant

  23. Hello,
    I have a problem.
    When I activate the plugin, I get this error:

    “Fatal error: Cannot redeclare string_limit_words() (previously declared in /homez.194/madcapki/www/wp-content/plugins/buddypress-sliding-login-panel/bp-sliding-login-panel.php:6) in /homez.194/madcapki/www/wp-content/themes/transcript/functions.php on line 193″

    And when I delete this function everything works except “google Chrome” … An idea to solve this problem?

    Thank you

  24. I like your plugin and I use it on my website but am having an error showing up.
    When I tried to login after registering and activating the link in my email, I got this message “There was an error activating your account, please try again” Though I was able to view/edit my profile.
    I do not get the error when I login using the wordpress widget meta option and also when I deactivate the plugin.
    The error only occur when I try using the slide panel login.
    How can i fix this?
    Thanks

  25. Hi Sarah,

    im running this plugin with buddypress + wp3.01 (mu enabled).
    this plugin works great with the home website, which is the buddypress.

    my question is, how do i enable the sliding panel to be displayed on all other user created wpmu blogs?

    thanks!

  26. Great Plugin! I love it! But there’s a but: i run a multisite blog network with over 400 users and 110 blogs. I would like to add link to logged in user’s dashboard as well as manage posts, comments or pages.

    What lines of code can i use in update-content.php to add the links?

    The matter is quite urgent, my users are complaining….

    Thanks!

      • No, I have not. So solve this I would need to be a programmer and since I am not, well, the problem just kinda sits there. I would have an idea on how to solve the problem, but I have no idea on how to implement it.

        Worst, the links in the menu are buddypress are bp_profil slugs. I don’T know how to use pb profile slugs to link to the current user’s dashboard.

        Here ans extract from my update-content.php:

        ————

        <a id="avtext" href="blogs”>Liste de mes blogues
        Tableau de bord
        <a alt="Un maximum de 3 blogues par membre" id="avtext" href="/blogs/create”>Créer un blogue
        <a alt="Gérer les articles de mon blogue" id="avtext" href="/wp-admin/edit.php”>Gérer les articles
        <a alt="Gérer les commentaires" id="avtext" href="/wp-admin/edit-comments.php”>Gérer les commentaires

        ————

        How should I code the links to the current user’s dashboard , blog creation, comments moderation, new Post and mnage posts?

        Furthermore, I would like all my subblogs to display the buddypress sliding menu but, since they are Wordpresws blogs, I don’t know how to force the blogs to display the menu.

        Hmmm…

  27. Hi ! This looks great but unfortunately I’m not able to use it on my site. If the Friends component is disabled, the plugin will exit with errors of calling unregistered functions (which is logic). I tried to add some validations myself:“ but the site didn’t load, only the background. Could you take a look at this ?

    Thanks !

  28. Hi Sarah,

    The (How to Install) instructions (steps 1 – 4) are missing on the buddypress.org page: http://buddypress.org/community/groups/buddypress-sliding-login-panel/installation/

    I had to research and luckily found this page to get the rest of the instructions so the plugin would work on my site.

    After getting it to work, I am very pleased with the results. I figured I would let you know just in case someone else is trying to figure out why it’s not working.

    Best,

    Crystal Watts

  29. Hey Sarah.. Awesome plugin.. I am wondering if there is a way to see the new member requests for private groups in the sliding login so that it makes it easier to find these new requests. Thanks J

  30. thanks for awesome plugin

    one issue Im having – every time I logout it takes me to latest blog post instead of home page – any ideas how to fix that ?

  31. Is it possible to add an edit post/page button to the bar? I was able to add an admin panel but I am unsure how to create a button for current post/page.

    Any idea how I can accomplish this or a good place to start?

    Thank you.

  32. This plugin is nice the only thing is I use buddypress but not for social network. I use it for guest posting and so people can have their own account.
    This plugin don’t allow me to get to my dashboard it locks me out of the admin. area and it don’t allow any of my pages to work, it allow me to add post.
    This would be nice if you could submit post from the frontend like quick widget and if the admin. could get to his dasboard.
    Thanks.
    Dedah

  33. Sarah,

    This plugin looks like the exact thing I want to use. However, it will not show up at all. Is this an issue with my configuration. I am using WP3.4.2 and BuddyPress 1.6.1.

    Any help will be appreciated.

Participate