Live Examples


Here is the latest site I built with Roots. Also featuring Soliloquy Slider, Types, Migrate DB Pro and Custom Post Template plugins.


Nice site and fast loading, especially considering it’s on GoDaddy. What are you doing to get that load time?


Hi cfx. Were you asking about the site? If so, it is hosted on WP Engine. I am not doing anything specific except using SVGs where I can and optimizing my files. Roots does all the minifying so I have to thank the Roots team for that.


Ok good to know—the whois nameservers still say GoDaddy.


Thanks for the compliments by the way. One another thing is that WP Engine does their part in making sure the site loads as fast as possible on their end as well.


NU Graduate Admissions site


Launched a new site for my tattoo artist last night —


Launched a few others - me and someone I’m working with (he’s loving roots) just launched these 2 sites for Project 13 (the designers):

#142 - I’ve built a couple of sites with roots, but this is definitely my favorite.


Julien! I love how you have integrated some beautiful design in your work. Do you design as well or do you work with a designer?


Hey @shaimoom, thanks!
Yes, I absolutely work with designers. I’m actually just a coder/technical director, so I do some of the harder coding, get the theme setup, and I also do information architecture and some wire-framing depending on the designer I’m working with (I work closer with some than others). Some of the more recent projects I’ve actually passed the bulk of the development work onto some people that I’ve trained up to use roots, so I don’t have to turn down so much work. It works out well for everyone!


Very happy with our first try with Roots 7.0:


@JeffChambers it looks like the jacobtyler project uses MediaElement.js for the fullscreen video on the homepage.

What did you use for whatsinmybaggie? Can you pinpoint the differences and your preference?


That’s probably because I implemented the video on and tried to keep it Wordpress-centric :smiley: I think it echos out the WP video shortcode for the homepage slider. I actually didn’t want to deal with updates for it in the future and figured the WP shortcode would be continually updated.


Ok Kalen, I’m now officially confused.


Por que mon freir???


I was asking about the difference between the two, why you/he chose different methods for the same effect, and which you/he prefer?


Eh, I don’t know how he implemented it on whatsinmybaggie, but I was pointing out how it was done for, if @JeffChambers knows the differences I’m sure he can chime in :slight_smile:


I don’t think he’s been active here. Maybe a ping would help…


Hey @cfx, sorry for the delay!

@KalenJohnson did the primary coding for, so he can definitely provide you the benefits for his method. We heavily use Advanced Custom Fields to customize WP Themes for clients & make every element on the site easy to update in the future.

For, I was initially trying a YouTube method I found on Bootsnipp, but I was having a terrible loading issue, even when the video was at low quality. Instead, I just used the HTML5 tag, no extra JS required & created 2 relatively low file sized versions of the video with Handbrake (webm is for FF):

<video preload="auto" autoplay="autoplay" style="width:100%;height:100%;" loop="loop">
     <source src="" type="video/webm;codecs=&quot;vp8, vorbis&quot;">
     <source src="" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">

You can easily get away with making the videos 480p & make it look fine on larger monitors by dumbing down the opacity over a black background.

I know this isn’t the most technically proficient method, and probably isn’t the best for load time, but it’s a really easy way to get a clean video background.

Hope this helps!