Custom Theme Creation with underscores.me

Custom Theme Creation with underscores.me

Create a base theme with underscores.me

I started using WordPress with the Genesis framework and themes. I had no big complaints with it at first. There are some great themes built on the genesis framework, and they’re easy enough to tweak and make your own. But, after a while, I wanted to create my own fully custom themes, and fighting with a pre-written theme got tiring.

That’s when I started looking for something more bare-bones, and a little less bloated size-wise, and found underscores.me. It quickly generates a light-weight theme with minimal styling that you can easily build on to create a completely custom theme.

If you are looking for something similar, I highly recommend checking them out.

Creating a child-theme from an underscore.me theme

I would recommend always creating a child-theme and using that to make your customizations. If ever there might be an update to the core theme from underscores.me—or whichever other theme you might be using—applying the update would overwrite all you customizations, unless you are using a child-theme. Here’s how you can do it.

Head to underscores.me and generate a new theme. Call it whatever you like. In my case, I called it “Test Blog”.

underscores.me theme generator

Install the downloaded theme as you normally would in WordPress.

Install the theme

Then, in your themes folder, create a new folder and call it whatever your parent theme is plus “-child”. In my case, the parent theme’s folder is “test-blog”, so my child theme’s folder is named “test-blog-child”.

Child theme folder for your custom theme

Inside that folder, create two files. A “style.css” file and a “functions.php” file.

Child theme files for your custom theme

In the “styles.css” file, write the following in a comment block at the top:

/** Theme Name:     test-blog-child Theme URI:       Description:    Child theme for Test Blog Author:         your name here     Author URI:     your website here Template:       test-blog Version:        1.0.0 Text Domain:    test-blog-child */

Your theme name and text domain should be whatever you named your child-theme folder from above, and your template should be whatever your parent-theme’s folder name is.

Inside the functions.php file, write the following code:

<?php  // Enqueue scripts and tyle from parent theme  add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); function my_theme_enqueue_styles() {     $parenthandle = 'test-blog-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.     $theme = wp_get_theme();     wp_enqueue_style(         $parenthandle,         get_template_directory_uri() . '/style.css',         array(),  // if the parent theme code has a dependency, copy it to here         $theme->parent()->get('Version')     );     wp_enqueue_style(         'child-style',         get_stylesheet_uri(),         array($parenthandle),         $theme->get('Version') // this only works if you have Version in the style header     ); }  

Change $parenthandle variable accordingly in this file, as well—mine is “test-blog-style”.

That should be all you need to get started! Activate you child theme in WordPress and get to customizing.

Leave a Reply

Your email address will not be published. Required fields are marked *