August 2, 2014

  • 2.3.0

You asked for it and we're incredibly excited to announce that it's finally here: X officially offers integrated BuddyPress styling and support with the latest release of the theme! This has been a long requested feature from some of our users and we couldn't be more thrilled to finally release it out into the wild. Without further ado, let's dive a little deeper into the X BuddyPress integration.

Taming the Monster

BuddyPress is a very cool plugin that allows users setup a social network of sorts on their WordPress installation. It offers up a host of functionality that can be enabled/disabled to suit your needs such as extended user profiles, friend connections, private messaging, activity streams (think Twitter feed), notifications, user groups, and more! As you can imagine, all of this functionality means that BuddyPress is a beast of a plugin to work with and integrate (not a scary beast, more of a noble, majestic beast).

Those are a lot of considerations to take into account when structuring and styling the various elements utilized throughout the plugin. Add in the fact that X is not only responsive, but features numerous options to alter site width, content width, et cetera, and things can get very tricky very fast. However, we really wanted to take some time to properly assess all that BuddyPress had to offer and do our best to modernize it in a fresh and stylish way. After days of workshopping and wire-framing various ideas we ended up with a simple, elegant, and engaging approach to building out a community on your website.

One of the biggest challenges we faced when working with BuddyPress was how to address all of the navigation on various pages. Practically every page features a top-level navigation and a sub-navigation that can oftentimes include numerous links. Figuring out the best way to handle all of this data in a simple, streamlined manner was a difficult task, but we've come up with a great way to manage it all in a clean, responsive fashion. Below are some screenshots of how this would look and function on a user profile page:

Example 1Example 2Example 3

Another area that took a lot of time to think through properly was the activity streams on the site and how those modules would be represented. Ultimately, we worked through a simple, classic styling that worked great for handling these particular modules:

Example 4

Private messaging has also been optimized for readability and ease of use:

Example 5

We have also included an optional navigation item that can be activated via the Customizer, similar to how the navbar search feature is activated. Upon enabling this in the Customizer, this item will automatically populate a list of links for you that are BuddyPress specific based on the settings you've implemented in the plugin. For example, if you don't want to have user groups implemented as a part of your website, then leaving that option deselected in the WordPress admin will ensure that a link to the groups directory doesn't show up. It will also dynamically populate registration and activation links if your site is open to public signups, and it will show a login link for signed out users and a profile link for logged in users. Below is a screenshot of what this menu might look like depending on your settings on the site.

Example 6

We could go on and on as there are literally dozens and dozens of pages, sub-pages, directories, et cetera with BuddyPress, but the biggest thing to glean from all of this is that no stone was left unturned in this integration. We really took time to go over every detail with a fine-toothed comb to ensure that things not only looked great, but performed great as well. This meant implementing some fairly extensive markup updates to the BuddyPress template files to ensure that elements were targeted as uniformly as possible. Out of the box BuddyPress has quite a few inconsistencies with how they apply class names and markup various elements, so a lot of our work entailed refactoring this from the ground up for greater consistency. Additionally, like our other plugin integrations, styling for BuddyPress is only loaded if BuddyPress is active and will not affect performance for users who aren't taking advantage of the plugin. And with regards to the styling for BuddyPress, we managed to style the entirety of the plugin in only 22K of CSS, a very small amount considering the great deal of complexity that BuddyPress offers up.

Please note, we will only be supporting the versions of BuddyPress that are listed here in the member area (more detailed information on this can be found in the BuddyPress Integrated Plugin article in the Knowledge Base). This is because out of the box, BuddyPress includes a great deal of invasive JavaScript that quite simply did things that we didn't want it to do from a functionality standpoint. We tried everything we could with regards to this, but ultimately the only thing we could do to get around this was to dequeue the main BuddyPress JavaScript file, then copy it over to X and make our edits there. The reason why it is important that you only utilize the versions outlined here is that this file contains lots of important functionality regarding AJAX posting, et cetera, and updating to a new version could mean that an update might not get distributed properly. We will make sure to be constantly testing new versions of BuddyPress when they come out as part of our release cycle. At the time of this writing, the only supported version of BuddyPress with X is v2.0.1.

Compatibility for the Coming WordPress v4.0 Release

Along with the extensive BuddyPress updates outlined above, we also took some time to prepare X for the coming changes in WordPress' v4.0 release. One of the biggest ones here is the moving of the Customizer and Customizer import/export functionality. In WordPress v4.0, some new updates have been made with how the Customizer link functions, so instead of using our custom admin menu item like we had before, we've moved it back under the Appearance menu, which is where it normally is in a stock WordPress installation. This ultimately provides greater consistency across themes, ensuring that users are comfortable finding the Customizer link where it should be:

Example 7

Because we had to move the Customizer link back to the Appearance menu, this also meant that we needed to find a new home for the import/export functionality of the Customizer (along with our new reset feature). To keep things nice and clean (as we like to do around here), we placed these features in the Tools section of the WordPress admin menu. Once you click on the Tools link, you will see the following boxes:

Example 8

Here you can easily import and export your Customizer settings just as you have always done with the added benefit of everything being on one page. Additionally, as noted above we've added a new Reset box in this space that will allow you to delete all of your Customizer settings, essentially making everything start over from scratch as noted in the box.

Also, we've revamped the way that widgets are registered within X so that our users can now take advantage of widget management via the Customizer. Previously, we used to dynamically register/deregister widget areas based on settings in the Customizer. We have changed this so that all header and footer widget areas are registered at all times, but the ones that are not active will be given a disabled styling in the admin area to indicate that they are not able to be used:

Example 9

If you are still using WordPress v3.9.X, you should see all of your widget areas available to you at the bottom of all the sections listed out in the Customizer. If you happen to be using a public beta of WordPress v4.0, you will notice a section at the top of your Customizer sections labeled Widgets. This is a Panel, and it is a new Customizer API control given to developers allowing them to group together similar components in the Customizer. At this time, it appears that panels cannot be moved beneath normal Customizer sections, but we are waiting to see if this will be changed in the public release of v4.0.

We've also included numerous updates to the way that styles and scripts are enqueued throughout the WordPress admin area to ensure that they're only loaded when needed.

Miscellaneous Updates

A few minor bugs that were brought to our attention with the last release have been fixed, including Flash videos not loading properly in Firefox and rounded/circle images not having their proper styling applied. There were updated almost immediately and fixes were provided in the forum if users needed them, but they are now being released into production. We have also included Revolution Slider v4.5.95 with this latest release of X.


  • X 2.3.0 - August 2, 2014
    • Feature: BuddyPress integration.
    • Updated: Preparations for upcoming WordPress v4.0 release.
    • Updated: Customizer import/export/reset functionality moved to the "Tools" menu.
    • Updated: Widget management is now available via the Customizer.
    • Bugfix: Self-hosted video not playing properly in Firefox as a Flash object when native format is not available.
    • Bugfix: Rounded and circle image styles not being applied properly.
  • Shortcodes 2.3.4 - August 2, 2014
    • Bugfix: Old option being called incorrectly for [recent_posts] shortcode.