Tutorials – Using Dropbox as a CDN to host your BuddyPress or WordPress Theme!

bp-db

bp-dbSituation: Your BuddyPress website is currently hosted on a crappy shared server. Your site performs pretty badly and you would like to speed things up without paying for and configuring a CDN.
The solution: Use Dropbox to host your Theme files!

Situation: You are working on an extremely awesome project for a client. You are working on your own local server and would like your style changes to be reflected on your clients site quick and easy without having to reupload your stylesheet changes every time you change something.

Solution: Use Dropbox to host your clients Theme files!

Situation: You have a live demo of a Theme you want to showcase. But you keep on forgetting to upload your changes from your local server to your live demo. Wouldn’t it be nice if you could just overwrite your existing images and styles straight from Photoshop into a folder without having to reupload your images and stylesheet changes?

Solution: *insert drum roll* USE DROPBOX!!

I think it’s pretty clear by now that you should use Dropbox! If you do not want to use it for the usage I will describe below, it still is a great free back-up service, online collaboration tool, and free file hosting service. Picturing my life without Dropbox is as hard as picturing WordPress without Matt Mullenweg, BuddyPress without Andy Peatling or Prince without eye-liner. Dropbox really has become a much-needed aspect of almost everything I do, work related and for personal use! But enough about my love for Dropbox, let’s get it to host our BuddyPress Default Theme!

Step 1: Create a Dropbox account

Go to Dropbox.com and create an account. Activate your account, download the Dropbox Application and witness the awesomeness of Dropbox on your Mac or Windows machine.

Step 2: Moving your Theme’s stylesheets and images to your Dropbox public folder.

After you have installed Dropbox you now have two default folders in your Dropbox folder; Public and Photos. All the files in your public folder will be publicly available for everyone and will have a static URL linked to it. This means that just like any file on your server it will be reachable under a static, non-changing URL. Since your Public folder uses the same static URL for all the files, and keeps the file names intact, this means that the images linked in your stylesheet will just keep on working if you keep the same folder structure in your Dropbox folder as in your Theme!* So let’s create a new folder in the Dropbox Public folder and give it a name. You can keep it boring and let it continue to be BP-Default or you can name it after your favorite N*Sync member. It’s all good!

Now simply move the followings items from BP-Default to that public Dropbox folder:

  • The entire _inc folder (including it’s subfolders) located at wp-content/plugins/buddypress/bp-themes/bp-default/
  • Style.css located at wp-content/plugins/buddypress/bp-themes/bp-default/

You now have them hosted on Dropbox. Great! So now it’s time to modify them to let them play nice with Dropbox!

This is how your Dropbox folder should look

dropbox_theme_hosting_wordpress_buddypress-300x62

Dropbox does not mess with the file and folder names, so your theme images are in the exact same places as in your self-hosted theme folder, and thus they can be moved anywhere as long as you tell your Child Theme to find these files!

Step 3: Editing header.php to call the new Style.css file in your Dropbox folder.

So you might think you now need to all kinds of crazy complicated things to get this crazy idea to work. Well you are in for a treat; You only need to make two small changes to your Theme.

Open up header.php (after copying it to your child theme folder of course) and find the following line somewhere at the top of the file:

dropbox-public-link-300x246That tells WordPress to load the style.css file from the Theme folder. But we do not want this. So instead we are going to put in the link to our Dropbox hosted stylesheet. Finding out the link to that file is easy. Just select the file in your Dropbox and right-click on it. Then you’ll see a new menu called “Dropbox” and a button which  says “Copy Public Link”. After clicking it you have the link to the static URL on your clipboard.

You can now remove bloginfo(‘stylesheet_url’); ?> from the line in header.php and replace that with the link to your Dropbox hosted stylesheet. You should now have something like this in your style.css:

<link rel="stylesheet" href="http://dl.dropbox.com/u/1628201/bp-slick/style.css" type="text/css" media="screen" />

Save header.php and you’re done with this file. That was easy right?

Optional Step: Edit Style.css to change the @import lines (when using a Child Theme)

If you’re already using a Child Theme and followed the proper steps for creating a Child Theme your Style.css has the following @import rules at the top:

@import  url(../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css);
@import   url(../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css);

These rules tell the Stylesheet to look in the BuddyPress plugin folder, but that won’t work in this case, because that folder is not in your Dropbox. So we need to modify those lines and simply tell the stylesheet to look in the same folder as where are stylesheet is currently located (The Dropbox public folder). So change those lines to this:

@import  url(_inc/css/default.css);
@import   url(_inc/css/adminbar.css);

Step 5: View the results!

When you now visit your site you’ll should not notice anything different. Which is good! until you start to inspect your images and stylesheets and see that your images are being pulled from Dropbox!

Since Dropbox files are being hosted in a cloud you basically have a CDN running for your theme! To make it even more awesome you can now directly edit style.css or replace/modify the images in your Dropbox and your changes will be reflected on your site instantly. Thus allowing you to do all the awesome things I describe at the start of this post.

Pros
  • Cloud hosting of your Theme styles and images
  • Easy editing and modifying of your Theme without FTPing
  • Reduce server load and improve performance of your site
  • Dropbox servers are very fast and reliable
  • It’s Free!
Cons

– Just like with any Child Theme you need to keep an eye out for changes in header.php or updates or stylesheet changes. This problem can be easily solved by just reuploading the style.css and _inc folder again from the bp-default theme when a new version of BuddyPress is released.

– Dropbox does not compress static components like stylesheets/javascript etc. This is not a big deal though, and in most cases it will still be a LOT better than on a standard (shared) host.
It only hosts your styles and images, not your actual templates. So keep that in mind.

Do you know of any other ways to use Dropbox in combination with your Theme, leave a comment and let me know!

That basically concludes this Trick. I hope you’ve enjoyed it and if you’ve found this Trick useful please share it with your friends or Tweet it! You can also subscribe to the BP-Tricks feed to receive awesome Tricks from our community directly in your feed reader. Enjoy!

From bp-tricks.com