Oscar Olotu

Oscar Olotu

A Freelance Developer and Sys Admin

Developing a WordPress theme with Roots Sage starter theme.

Roots Sage is the new kid in town, it’s a starter theme that was previously known as roots. Which is known for it’s awesome feature’s such as

Clean markup

Sage uses html5 broilerplate markup instead of the default WordPress markup. Sage does this by cleaning the header which has some unnecessary Wp tags also cleans the Wp nav menu.

Clean URL rewrites

Sage also does clean url for static theme and plugin assets to make your paths cleaner:


/wp-content/themes/themename/assets/css/ 

to

/assets/css/
/wp-content/themes/themename/assets/js/

to

/assets/js/
/wp-content/themes/themename/assets/img/

to

/assets/img/
/wp-content/plugins/

to

 /plugins/

Cleaner Navigation Menu Walker

Sage cleans up the navigation menu markup. Walker_Nav_Menu (WordPress default) example output:

<ul>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="/" shape="rect">Home</a></li>
</ul>
<ul>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="/sample-page/" shape="rect">Sample Page</a></li>
</ul>

Roots_Nav_Walker example output:

<ul>
<li class="menu-home"><a href="/" shape="rect">Home</a></li>
</ul>
<ul>
<li class="menu-sample-page"><a href="/sample-page/" shape="rect">Sample Page</a></li>
</ul>

Instead of the many different active class varieties that WordPress usually uses, only active is returned on active items.

These are just few advantages of using sage starter theme to develop you next project you can read more feature of sage in the documentation.

What’s needed throughout this tutorial

Text editor
We will be using this to edit our various theme files. Any text editor of your choice will do you good( Am using sublime text 3)

Browser
The browser is to be used to test our theme after making some changes to the theme files. I would recommend to have at least three browser(Chrome, Firefox and Internet Explorer) to see how you theme would look like in those browsers.

Local development environment
As we all know (If you don’t then your in the wrong place) WordPress is developed on php and MySql, so we need to set up an environment to execute those stuffs(definitely Apache/Nginx for php and MySql for the database) for this I’ll recommend xampp if your on windows and linux and for my friends with Mac I’ve never used one so you can just drop one on the comments below.

Internet connection
Obviously we will also need an internet connection. There is bunch of stuff that you gone download.

To start I assume that you have the basic WordPress, php HTML, css and JavaScript knowledge. Let’s get things crackin

There are 3 comments

Leave a Reply

%d bloggers like this: