In this article I will you through complete steps on how to develop a theme using Underscores. I will explain what files comes with underscores and the code in them. By the end of the tutorial you will learn enough to use underscores for creating a WordPress theme.
Starter Theme vs Theme Framework
Before we get started with Underscores its important to know the difference between a WordPress starter theme and WordPress theme framework.
First of all both are WordPress Themes which can be installed and used like any other theme. Their sole purpose is to provide a foundation for creating a complete theme.
Starter themes aren’t made to be used in production sites as they lack styles and advanced functionality. They just provide the WordPress core theme functionality. They contain nothing more than the basic code that every theme must contain. To develop a theme using starter theme you need to edit/add code and files in the starter theme. Underscores is a starter theme. Therefore it provides only the core WordPress functionality and outputs basic markup for a theme.
Whereas a theme framework is a stand alone theme which can be used in a production site. There are more advanced as they expose functionality other just that WordPress core functionality. For example they have built in SEO, Social Sharing, Social Meta Tags, Theme Options page etc. To create a WordPress theme using theme framework you need to create a child theme which uses the theme framework as a parent theme. And then write/edit code of the child theme with out touching the parent theme(or theme framework). Genesis framework is a theme framework.
Generating a Underscore Starter Theme
To generate a underscores starter theme visit underscores.me and in the input box type a theme name for your theme and click generate button.
You need to provide a theme name while generating the starter theme so that underscores can prefix all the custom functions with the theme name. This is required according to WordPress coding standards.
Creating a Development Environment
You shouldn’t use your production site for theme development. You need to use localhost or an another public server. Make you have installed WordPress and activated the generated underscores theme.
You can also make your theme development environment more advanced by installing Theme Check plugin.
Template Hierarchy and Template Tags
Every post, page, attachment have an unique id assigned by WordPress when they are created. Make you make an HTTP request to WordPress, it resolves the URL slug to an id to find the resource type. And then it uses template hierarchy to execute appropriate PHP file to produce response.
Template tags are functions used in theme files to prevent code duplication(for including other PHP files or functions output in the current file) and generate dynamic information.
For example: if you make a request to a post with id 1288 then WordPress executes single.php file. single.php file uses template tags to display output response.
Before you begin with theme development make sure you have good understanding of template hierarchy and all types of template tags.
You need to change theme information such as theme URI, author, description, text domain and tags in the style.css file.
After you have completed theme development take a screenshot your theme and save it as screenshot.png in the theme folder.
Tags directive needs to contains comma separated list of tags which are predefined as Tag Filters in WordPress.org.
When index.php, archive.php or search.php cannot find any post then they include content-none.php file. This file has PHP conditions to display different message in different scenarios.
To provide multiple language versions of your theme provide translations of static strings in the already existing “languages” directory. In functions.php file underscores already provides code to load the translations i.e., load_theme_textdomain.
Most of the time you just don’t want to translate the theme and leave it to the theme users to translate it if they want.
In either case you need to wrap the theme’s static strings in __() so that translators can find the static strings in an theme. And if the theme is already translated then this function returns the WordPress locale strings.
functions.php file provides information about your theme to WordPress installations And defines and loads theme functionality.
Almost everything in this file is wrapped with
if(!isset(function_name)) so that you can later use this theme as a parent theme for creating a child theme. For example: This can be used to creating a PRO and FREE version of your theme. This condition checks if child theme doesn’t define this function they use parent’s.
Here are some of the functionalities provided by functions.php file.
- It provides the
$content_widthwhich is used by WordPress and Plugins while inserting images in an post/page.
- Registers a navigation menu named “primary” and user understandable name “Primary Menu”. You can add me more navigation menu if you want.
- Adds HTML5 theme support which is used by WordPress core to decide weather to output HTML5 markup or not while generating markup for search form, comment form, gallery, caption etc.
- Adds support for post format. You can extend the supported formats or remove from the list. To design different post formats differently in index.php file create files with name content-post_format_name.php. In index.php underscores loads them appropriately using
get_template_part( 'content', get_post_format() );template tag. But to design them separately in single.php file you need to find post format using
get_post_formatfunction and change output accordingly. Underscores adds page format specific classes to posts container element.
- Registers a widget area named “Sidebar” widget. It also wraps the individual widgets and their titles with custom markup for making designing easier. You can register more widget areas if you like.
- It provides hook for enqueuing scripts and stylesheets. By default it enqueues style.css file and scripts for comments and navigation.
- WordPress has a built in feature called as custom header. Enable this if your theme header supports a background image. Activation, custom style, template tag and callback code for this feature needs to be placed in the custom-header.php file. uncomment require/include code of this file. Enabling this will bring up a new control on theme customizer.
- It includes “inc/template-tags.php” file which provides template tags for posts navigation, post date, post meta data, title for archives, description for archives and many others. While developing a theme if you are creating custom template tags then place them in this file.
- It includes “inc/extras.php” file which contains code that’s not much important or not required for theme to work but adds extra value. If you are planning to create a theme options page or widgets then place code for it here.
- It includes “inc/jetpack.php” file which contains code for making the theme compatible with jetpack plugin. I often not include this file. Making a theme compatible with jetpack is a complete different story.
- By default it comments out code for post thumbnail support. But every theme should display post thumbnails therefore uncomment support for post thumbnails.
These two css files are not enqueued by default. If you enqueue content-sidebar.css file then it creates two column layout with content on left and widget area on right similarly sidebar-content.css places widget area on left and content area on right.
These files contain non-responsive CSS for layout styling. Place your layout styles inside them and enqueue accordingly. Add/edit code in these files for making the layout more of what you want.
Here is an image which shows the classes embedded by underscores for styling site layout. There are many other classes too but these are the basic ones and enough to style site layout.
style.css File provides basic CSS for typography, forms, navigation, widgets, content(content of posts, pages, comments and asides), media elements and other HTML elements.
WordPress text editor adds some classes to user generated markup and style.css contains styles for them too such as
Here are some of the things you need to know to add/edit styles to this file
- It contains styles for styling all kinds of text formatting tags. It uses px unit for sizing
font-size. Typography is not responsive by default but you can make it responsive.
- Site title, tagline and primary navigation menu are stacked vertically inside
<header>tag with class
.site-header. Primary navigation menu is responsive by default. On mobile and small screen tablets the navigation menu hides and can be expanded using the toggle element which has class
- This file doesn’t contain and CSS to style WordPress default widgets such as search widget, category widget etc. You need to style them too. It also doesn’t contain any code to style widget titles. It just contains basic style for
.widgetclass which wraps individual widgets. By default it hides the WordPress search widget but you can unhide it if you aren’t providing a search box anywhere in your theme.
- Blockquote selectors
blockquote emare not provided in the file therefore you need to add them and style them too.
- It provides CSS selectors for styling image captions.
- WordPress editor can also add gallery of images in an post. These are user generated galleries. This file has basic CSS code to style them. You can add more CSS attributes to make them look even better for your theme. Remember that some images in gallery also come with captions so style accordingly as this file’s gallery selectors ignore them.
- It contains CSS for styling basic HTML form elements.
- It contains CSS for styling media elements such as iframe, embed and object.
- It contains a set of CSS for styling anchor tags of a theme.
- It contains CSS selectors for styling other HTML elements such as lists, tables etc.
- It contains CSS selectors for styling sticky posts, post entry meta, post title, post anchors, comment anchors, author comments.
This file is basically divided into three parts: normalize CSS, HTML tags selectors and WordPress/Theme specific selectors. But its still missing not obvious HTML tags and WordPress/Theme selectors.
Underscores doesn’t embed post thumbnails by default to index, post or page. You need to add PHP and HTML markup to generated and display featured images.
It doesn’t have author.php file. It default to archive.php file. You need to add author.php file and display author information in it.
Underscores starter theme’s features and code changes very often. Everything I mentioned is correct for the starter theme which was available by the time I was writing this post. I will often edit this article if I will see major changes in underscores.