Using Dropbox as a CDN to host your BuddyPress or WordPress Theme!
Situation: 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 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:
That 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:
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 to receive awesome Tricks from our community directly in your feed reader. Enjoy!
Looking for quality BuddyPress hosting? We will guide you through all the available hosting options and help you find the best webhost for your next BuddyPress project!
Something about bowe
BuddyPress fanatic, WordPress Theme designer and MultiSite community builder. Proud co-founder of PressCrew. Loves to use awesome in every sentence. Often described as a Dutch Treehugging Hippie.
Very creative use of Dropbox. I hadn’t thought of doing development on WordPress this way. This would work awesome for people developing static sites but I am not sure that people even do that anymore.
It has really helped me resolve CSS issues on client sites easily. I’ve added a “enable debug mode” option to my Themes which loads the stylesheet from my dropbox, so I can fix styling issues directly from my Dropbox. Since Dropbox also has online revision control, it’s even better. You can indeed host full static websites as well, Dropbox has no problem with that at all
Hi
great tip!!!
That is a good idea for test sites, but in my experience hosting things long term on dropbox is not a good idea. FIrst they tend to throttle or take down your public access if you are using your dropbox “different” ways like already happened to me once. Also from a optimization perspective, the idea of hosting on a cdn is good, but dropbox is not a true cdn and you might be losing the performance you were supposed to gain by hosting it on a separate domain and you need to make a lot of external requests
Great idea for test sites though!
Thanks Mohen!
@Leo: Mmmm Dropbox taking down your public folder access is pretty mean, what kind of experimental stuff where you doing there ?
Before I wrote this tutorial I looked at the Dropbox site to see how they felt about hosting of static files or using it as a host for your site. They seem to approve it and even have some guidelines added in the Wiki:
I do agree with you about the CDN part. I would not advise to use Dropbox on very high traffic sites. But especially if you’re using BuddyPress on a shared host, I think it speeds up your site a little. If you want to be sure that your site will become faster just use a CDN. I use MaxCDN which is great if you want to use a real (paid) CDN.
Currently working on a pretty extensive guide on using a CDN and W3Total Cache with BuddyPress that’s more suited for bigger BuddyPress sites
Wow, what a creative use for DropBox. Great guide.
Hello!
thanks,nice idea.. i will try to benschmark and compare loading time
ihave question , how i can find the id of the dropbox acount :
you are using this 1628201
thanks.
i get it from the forum of dropbox
http://forums.dropbox.com/profile.php?id=My_ID
hihi
again, great tip!
Glad you got it to work! You can also right-click on an file in your public folder to find your ID.
Awesome! I am building a huge Social Network using my localhost, and will try this out, so the clients can see the updates. Right on!
Excellent points altogether, you simply gained a new reader. What would you suggest in regards to your post that you just made a few days in the past? Any certain?
AleixMay 1, 2012i mean, for example, in your photo: next to the Win Soon it would be great if you put a link to the Buddypress Profile . I’m thiiknng about a page where there are more than one users who can writte posts. I think the page where you have the Buddypress Profile ends with /members/username , right?I would apreciate very much if you put a link to this Buddypress Profile Page but knowing that there can be more than one users . am i clear? sorry for my bad english
Great issues altogether, you just received a new reader. What could you recommend about your post that you just made some days ago? Any sure?
Hello,I have integrated this bfuatieul theme into a web site I am building. I have edited the child theme to take hold of buddymatic Everything seems to be in order, however the issue I am having is a bit complicated. Top level navigation for buddypress is showing up, however the links to the social pages are not working. It simply redirects back to the homepage each time any suggestions for this?Thanks for your help and thanks for the wonderful work you’ve put it on this theme.
Great tutorial and idea. But what happens if I want to use dropbox for BuddyPress? User will upload their photos and documents. Where do they upload when I change the static file location?
Thanks for help!