Bourboneat Wordpress Theme

PublishedJuly 4, 2015 UpdatedOctober 7, 2015

I have created a new Wordpress starter theme for building custom themes designed for Wordpress version 4.1 and later. The theme uses the Bourbon Sass library and it’s Neat semantic grid components for a lightweight and modular responsive design. The header and footer designs were taken from the Bourbon Refills collection. Also included are IcoMoon font icons which can be easily updated using the IcoMoon app. Gulp’s build system is used to compile and minify Sass and Javascript modules into optimized CSS and Javascript. Clone, fork or download this responsive starter theme at GitHub and modify it as you wish into the theme you want.

https://github.com/jimfrenette/bourboneat

Features

New functions and feature enhancements in Wordpress version 4.1 include:

Auto-generated title tags
Template tags
Post navigation
the_post_navigation(); get_the_post_navigation()
Posts navigation
the_posts_navigation(); get_the_posts_navigation()
Posts pagination
the_posts_pagination(); get_the_posts_pagination();
Archive title
the_archive_title(); get_the_archive_title()
Archive description
the_archive_description(); get_the_archive_description()
Screen reader text

Menus

The theme contains four wp_nav_menu’s, the main menu supports nested drop downs. Below are desktop previews of these responsive menus which collapse as needed on mobile screen sizes.

Main Menu preview (header.php)

The footer contains three of the four registered wp_nav menus. Social links and terms menus are shown below. Also shown here above the footer is the pagination nav courtesy of Wordpress - Twenty Fifteen. This is a new feature available in Wordpress 4.1 and later.

Social and Terms Menu preview (footer.php)

Populating the social links menu is easy. All that is needed is a menu that contains custom links to social networks. The href attribute of the link is selected to determine which icon is rendered. Here is a snippet of the Sass that shows how this works:

// snippet from _nav-social.scss

a[href*="codepen.io"]:before {
    @include icon-codepen;
}
a[href*="dribbble.com"]:before {
    @include icon-dribbble;
}
a[href*="dropbox.com"]:before {
    @include icon-dropbox;
}
a[href*="facebook.com"]:before {
    @include icon-facebook;
}
a[href*="plus.google.com"]:before {
    @include icon-google-plus;
}
a[href*="github.com"]:before {
    @include icon-github;
}
a[href*="instagram.com"]:before {
    @include icon-instagram;
}
a[href*="linkedin.com"]:before {
    @include icon-linkedin;
}

This figure shows the footer menu setup:

Footer menu edit screen

This figure shows the terms footer menu setup:

Terms footer menu edit screen

This figure shows the manage menu locations setup:

Manage menu locations screen

UPDATE - October 7, 2015

The bourboneat theme recently passed the WordPress.org code review and approval process and is now included in the WordPress.org Theme Directory at WordPress - bourboneat - Free WordPress Themes.