Roots has changed so much I need to re-work these tutorials. I hope to clear the space and start cranking them out soon. If you’d like, sign up for email notifications in the sidebar, so you’ll be notified when I’ve begun rolling them out again!
If you’ve not yet seen the excellent Roots Theme for WordPress, take a look. It brings to WordPress theme development the benefits of the HTML5 Boilerplate plus Twitter Bootstrap’s excellent CSS and JavaScript plugins. A WordPress developer’s dream in a tidy package.
This short video series introduces basic steps for installing and customizing the Roots Themes to suit your needs. By basic, I do mean basic. (Advanced users — you’ve been warned. Flee now. I’ll try to cook up something for you later.)
What these videos will cover:
- Downloading and installing the Roots Theme (very basic)
- Loading dummy content for theme development (from the WordPress theme unit test)
- Creating dropdown menu items (requires the creation of custom links)
- Creating a custom page template (introduces
inc/roots-config.php) - Creating a custom page loop
- Customizing the CSS by adding custom styles to
app.css(introducesinc/roots-actions.php)
These videos are more-or-less stand-alone. Choose the topic relevant to your needs and jump in.
One more disclaimer: Production quality is a little rough in spots. Rushed to get these out for my university students. My apologies.
1. Download and Install the Roots Theme
Roots WordPress Theme – Download and Install from David Cochran on Vimeo.
2. Need Dummy Content? Here’s How
WordPress Dummy Content from the Theme Unit Test from David Cochran on Vimeo.
3. Create Dropdown Menu Items
Roots Theme Customization – Dropdown Menu Items from David Cochran on Vimeo.
4. Create a Custom Page Template
Roots Theme Customization – Create a Custom Page Template from David Cochran on Vimeo.
5. Create a Custom Page Loop
Roots Theme Customization – Create a Custom Page Loop from David Cochran on Vimeo.
6. Add your Custom CSS
Roots Theme Customization – Customizing the CSS from David Cochran on Vimeo.
Don’t miss the full Roots Theme series
This is the first installment of a longer series I’m developing on Roots Theme customization.
Additional topics include:
- Use your custom page template for a static front page
- Reposition the Navbar
- More topics in the works …
If you’d like an introduction to Twitter Bootstrap …
Again this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.
Data Enhanced 
Thanks, great videos!
Excellent tutorials. Very helpful. I hope you explain how to integrate .less in your coming tutorials because I can’t seem to get a grasp of it. I look forward to seeing more……..
Great series, I’m looking forward to the next episodes as well. I was not sure about investing in learning Roots, but you’ve really made a great case for it.
Keep up the good work!
Great tutorials! Roots theme has been updated since these were made, so if you’re reviewing step 6, you’ll find the if bootstrap-responsive and other css include statements in /inc/scripts.php Also,all of the files in the /inc/ folder no longer have the roots- prefix.
Thanks Jeff I appreciate the catch! I’ll update and point to your comment. I hope to get a start at a fresh series before too long …
Hey David,
excellent work! You could write the wiki of rootstheme on github (: Roots would be used by much more developers if rootsteam explain how their project is working in a few more words. Tutorials like this will help a lot. Hold on writing tutorials for roots-users, they will accept and be grateful. As for myself, I dont know how to use less framework in rootstheme (:
Best regards
This was a great hep David. I downloaded roots to my sandbox and it will be my first step towards building a custom theme for my blog as I have never tried it myself before.
I was searching something like a bare theme to get started with a found roots. Once setting it up with my local wordpress I found it quite a bit different from other frameworks and themes I got used to from past two years. How the internal links are converted and how the uploaded content works is simply amazing, but this is quite a heck for me to understand the coding bits and just to gave it a shot, I came on Google to search for some developing guides. Yay! I found your site and now the journey has become way to easy.
Thanks for all the hard-work you put into these tutorials.
Hi Dave,
Thanks for the series. It’s good to see how bootstrap and wordpress work together. When do you think you’ll be posting more tutorials?
Hi – I love twitter bootstrap, used it on non-wordpress sites, then discovered this ‘roots’ theme when trying to find something simpler than Genesis.
Have to say, I’m loving it so far – very clean, very straightforward, nice and fast and light.
Hi David, nice tutorials. I am trying to install Roots myself, everything seems to be straightforward but theme just fails to load the css and js. And it happens only when permalink structure is changed to anything else than default. Have you encountered this problem before?
I need help with root theme. do you think it takes a long time. because I should start to make a website with wordpress and I like to do it myself.
hope you can help me.
Thanks
Would love to see this updated soon!
When’s the update coming? Any chance of putting the old videos back up? I know they are outdated now but still some useful stuff in there!
Thanks
Thanks Scott and Bobby. I’m preparing to get rolling with updated Roots and Bootstrap tutorials in mid-May. Not long now. Thanks for the notes and prods.
Hi David, just wondering if you’re going to update the tutorial. Roots is a bit different than what I’m used to with WordPress.
Hi Jonas! I’m having to recruit help. I’ve now got two developers working for me and we intend to use part of our time to start producing these tuts again — by mid-June or bust!! Terribly sorry for the continued delay. I’m really looking forward to getting these rolling. Not just Roots but also Bootstrap’s LESS files, icon font options, complex custom page templates, etc. Exciting days for web development.
Hi David, thanks for the reply. Excellent news.
*Rubs hands in anticipation*
Cheers
Hi folks — I’ve hooked up the old original videos again. They’re out of date and a lot of theme files have changed — but some are requesting these still. Until we start posting updated versions, here they are!
All the best,
David
Thumbs up David, thanks for the warning and I’m sure people will like to see them anyway. Can’t wait for the updated versions.
Thanks David, looking forward to the new tuts!
I’m new in Roots Theme and would like to venture on it. Although the videos re-posted are old but still those are informative. I’m still gaining clues from it. Thanks for reposting it.
…and of course waiting for the updated versions.
I was wondering if there was a place to download this version of roots? I want to start messing with it and like you said the new version is way different with no tutorials to be found (which sucks right now since when activated it immediately causes a 500 error on my server). Thanks and good job on these.
Thank you very much for this tutorial. It really helps to quickly understand the framework.
Roots has changes so much, and there are videos that are not up to date as of today (Aug 31, 2013). Starting with video # 4 . But anyway they are of great help. Many thanks for taking time for this.
The main roots site is “http://roots.io/” (version 6.5.0).
thanks for a few roots video tutorial, I feel better to customize it because now I want to create my custom wordpress theme with roots and for my clients. I see this is old post and today roots have many changes in structure and code inside it. Hope I can get update video tutorial.. 🙂 thanks for all
Thanks,
I would love to view all the series so that i could learn more.