Create a Custom Homepage with the Roots Theme for WordPress

Feb 21, 2013Hi everyone —

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!

In previous videos, I have walked through the process of creating a custom page template with a custom loop. In this short video, I’ll walk you through setting a custom page as your site homepage (or front-page).

Roots Theme Customization – Custom Front Page from David Cochran on Vimeo.

Covered in this video:

  1. Select a custom page template for a page named “Home.”
  2. In the WordPress admin panel, under Settings > Reading, select this page as the “Static Front Page.”
  3. Remove the template file, front-page.php from the main theme directory, enabling the selected page template to control the page’s markup and layout.

Relevant Previous Videos

If you’ve missed them, here are video introductions to prior steps, for your convenience. (Pick what’s relevant and helpful!)

Create a Custom Page Template

Create a Custom Page Loop

Add your Custom CSS

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:

  • Getting Started
  • Reposition the Navbar
  • More topics in the works …

Check out the full series here.

If you’d like an introduction to Twitter Bootstrap …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain 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.

4 thoughts on “Create a Custom Homepage with the Roots Theme for WordPress

  1. Just started with using roots theme. Great tutorials, altho some of them are old, for example the one where you explain css file. New css is included in roots-script instead of roots-action.

  2. Hi David – great tutorials!
    I am a familiar with bootstrap – but new to the roots theme.
    I have quite a hard to to figure out a “grid layout” with roots.
    how do create additional “row-fluid” elements?

    I uploaded a picture to show you my problem:
    http://tinypic.com/r/2drbf5i/6

    after the second post i would new a new “row-fluid” element – how do I do this with the roots wordpress theme

    Thanks for your help
    Matt

  3. this unfortunately becomes obsolete with the theme-wrapper “base.php” introduced in a little while ago … =(

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s