envato free trialCreative Assets & Unlimited Downloads on Envato Elements Get 7 Days Free

Making Advanced Customizations to the WordPress Roots Theme

on WordPress

WordPress is well-known for having the single largest and most active development community of any content management platform, and that large development community has created some of the most powerful pre-made themes available anywhere. Lately, most developers have been focusing their efforts on migrating their designs to new technologies, including HTML5 and CSS3, which are more able to scale with differing screen sizes. HTML5 is the chief way to combat this transition toward varying screen sizes and devices, but it’s not a well-known entity for most WordPress administrators.

That’s where the WordPress Roots theme comes in. The theme is constructed using the HTML5 boilerplate, making it one of the most strict and standards-focused HTML5 themes currently available for any content management platform. True to its name, the Roots theme is basically a stripped down, no-frills WordPress theme that is specifically designed to serve as a launchpad toward greater HTML5 adoption, knowledge, and customization. The theme is shipped using ample white space, basic design elements, and a simple stylesheet that includes only the most basic classes needed to create the designs columns and headers. Beyond that included styling information, WordPress administrators will have to add and edit their own CSS classes and ID elements in order to make the appearance of the Roots theme unique to their own blog and individual needs.

While customizing the theme’s included stylesheet file is not really difficult, there are some more advanced customizations that can be enacted on the Roots theme that will require significantly more knowledge of WordPress itself, as well as PHP and XHTML code.

Those things might be well-known by the most seasoned WordPress administrators and web designs, but most users will find themselves completely eluded when it comes time to make customizations to the Roots theme’s actual construction and layout. For those users, this tutorial seeks to spotlight some key customizations and how to perform them with the current version of the Roots theme available for WordPress installations using version 3.0 and higher.

Understanding How to Execute These Customizations and Why They’re More Challenging

The Roots theme for WordPress is not a conventional theme. Indeed, instead of using direct coding and static HTML5 elements, it relies heavily on both the HTML5 boilerplate and the Bootstrap responsive design framework. That framework itself is included with the theme, including several library files and default design elements that have been produced by the people at Twitter. Most people might recall that Twitter uses some of its own unique design elements, including its static header and its “perpetual content flow” that loads older tweets upon reaching the end of the current content.

Bootstrap is highly advanced, and it needs to be: It powers the world’s second-most popular social networking website. Many of the design elements found within the Roots theme’s template files are not directly coded in; instead, those design elements are pulled from the included Bootstrap framework and are only included if the design element in question is supported. One such case is the website’s header, which is pulled directly from the Bootstrap responsive design framework. Most people enjoy this simple, static header, but a large number of others would prefer to customize its design and make it blend more seamlessly with the website’s other design elements. So, how is this done?

Step 1: Locate the Code that Pulls the Bootstrap Header Into the Header.php Template

The Roots theme doesn’t behave like a conventional WordPress theme, and it doesn’t organize its files in a conventional way, either. To that end, the theme makes extensive use of template “parts” in its main template files. In the case of the header, that means the Roots theme actually pulls in a default header from a template in another directory. This header is placed directly below the page’s <HEAD> and <BODY> tags; the developers of the theme argue that creating files in this manner allows for easier and more straightforward customization.

In order to pull a template “part” into a larger template file, WordPress needs to use several conditional variables that check for compatibilities and template file locations. In the case of the Roots theme, the code that pulls the header “part” into the larger header.php file, looks like this:

if (current_theme_supports(‘bootstrap-top-navbar’)) {
get_template_part(‘templates/header’, ‘top-navbar’);
} else {
get_template_part(‘templates/header’, ‘default’);

Astute WordPress administrators and developers will notice that the get_template_part code actually refers to a file in the “templates” folder. Looking at the Roots theme’s directory structure, it’s easy to see that the “templates” folder lies within the theme’s own root folder. Navigating into that file will reveal the header.php file that is pulled into the theme’s larger header template. That file can be edited to the user’s desires and moved away from the Bootstrap framework, or it can be replaced entirely with a new header (or a new header “part” file).

For the purposes of this tutorial, the header itself is not going to change its basic design very much. Instead, its position will be altered to better accommodate the unique content presentation needs of the site’s overall theme and purpose. That’s done by editing some HTML5 code and making stylesheet adjustments. Just for reference, the file edited from this point forward is located at the following server path:


Step 2: Repositioning the Header as a Fluid Element within the Design

Go ahead and open this partial header.php file. Within this file, a specific <DIV> tag must be removed so that the header stops “sticking” to the top of the page and instead scrolls with the content. This is desirable in a number of situations, including that it can excessively reduce the amount of viewable website content. The tag to be removed will be located directly at the top of the partial header file, and it looks like this:

<div class="navbar-fixed-top">

Remove that tag, and replace it with a “container” <DIV> tag. This should be pretty easy but, for reference, the replaced tag will look like the following example:

<div id="container">

This step is optional, but it makes good semantic sense when crafting an HTML5 design. Users who prefer not to have a container <DIV> tag can simply leave out the “container” ID element and then remove the now-invalid closing </DIV> tag that lies at the end of the partial header.php file.

Step 3: Changing Styles for the Header

Next, find the app.css file that is also located in the Roots theme’s “template” directory and edit the class named navbar-inner. For those WordPress administrators who are not familiar with CSS code, that will look like this example:

.navbar-inner {

Things to be removed, added, or changed, include images, text, border radius, drop-shadows, and margins or padding. Customize the header to meet the site’s design and content requirements, and then save the app.css file. Also save the header.php file at this point. Proceed to upload both files to the server via FTP and, if prompted, overwrite the old versions of those files already on the server.

After the upload has completed, the Roots theme will stop “sticking” the navigation bar to the top of the website as if it’s a part of the browser window. It will now scroll with the website which, while considered old-fashioned, is still a highly desirable functionality for this key element of the design.

A Teachable Moment: Working with Template Parts in the Roots Theme

Customization of the Roots theme’s header is a great time to discuss how templates are generated using the Roots theme itself. The header is far from the only design element contained within the Roots theme that uses a template part. Indeed, template parts are used for things from header to footer, and all the loops or sidebars in between. This is why virtually every template file contained in WordPress Roots looks almost too short to be real. These template files are, in fact, mere PHP inclusion documents that pull template parts from the appropriately-named “templates” subdirectory.

Whenever a theme references a template part, modifications should be made in the desired partial template located in the above-referenced subdirectory. While modifications could be made in the template file itself, it’s good to work with the structure of the theme and keep every template part valid and well-developed. This is actually a highly efficient way to create and maintain WordPress themes, and most site administrators will come to prefer the easy customization of multiple pages using an edit to just one partial, included PHP template file.

Getting Rid of the Default Roots Homepage and Replacing it with Something Else

The Roots theme ships with its own homepage design, obviously, but many designers have expressed a desire to use a different homepage for their own content. This can be done pretty easily, even despite the complex nature of the WordPress Roots theme itself. In fact, it’s done in virtually the same way that it’s done with every other WordPress theme currently on the market.

Step 1: Create a Custom Homepage Template

As with any other customization of templates or homepages, everything begins with a new, custom template, designed by the WordPress website’s web designer or administrator. This template should have the trademark “heading” above the content, including a commented line of PHP code that identifies the template using a Template Name: Homepage line. After that line of PHP code, the template can be designed any way the administrator requires. It can even make use of existing template “parts” within the installed Roots theme at the designer’s discretion, though it is certainly not required to do so. When the template is finished, name it new-homepage.php and upload it to the Roots theme’s main directory.

Step 2: Delete the Current Homepage Template Provided by the Roots Theme

The template that powers the Roots theme’s default homepage is named front-page.php. This should either be deleted or renamed to a different name, like ,code>old-homepage.php. This will cause the Roots theme to stop displaying the default homepage to anyone at all, and it will pave the way for a new homepage design to be displayed to end users.

Step 3: Tell WordPress to Use the New Homepage Template as its Actual Homepage

Despite the removal of the default Roots homepage template, WordPress will not display the new homepage design until it has been given specific instructions to do so. This is done by clicking the “Settings” heading in the Dashboard sidebar and then clicking the link to the “Reading” settings page. There, WordPress will present a drop-down box of templates that can be used as a “static” homepage. Select the template named “Homepage” in the first step of this tutorial and save the new settings. WordPress will now display the new homepage design instead of the Roots theme’s standard front-page.php template file full of content.

Challenging to Customize, but Not Necessarily a Bad Thing

The Roots theme is probably one of the hardest themes to customize, even though it markets itself as a basic theme that is welcoming of any kind of alteration. This difficulty is not because the developers are trying to prevent changes to their theme, obviously; instead, the difficulty of customization is due to the fact that the Roots developers believe it is easier and more efficient to customize partial templates, and use them site-wide, rather than developing separate templates for each function that are virtually identical to each other.

Once users understand how template “parts” work, and how a basic theme can be customized more by altering CSS3 code than HTML5 design elements, they’ll find that the Roots theme is one of the easiest and most efficient themes they’ve ever employed.