• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Creating a Child Theme for WordPress Twenty Fifteen

Creating a Child Theme for WordPress Twenty Fifteen

Posted: February 12, 2015 Updated: November 11, 2022 by Claire Brotherton
20 Comments

WordPress key on a keyboard

This is Day 10 in the 30 Day Blogging Challenge. You can read Day 9’s post here.

I wrote previously about customizing a WordPress theme. If you like your theme layout but want to have make more changes to the way it displays, a child theme is the way to go.

What’s a Child Theme?

Father kissing a smiling baby
Image from Subscription Boxes For Men

A child theme inherits the code of a parent theme, but has its own characteristics. As you can’t have a child without a parent, you must also have a parent theme installed in order to make and use a child theme.

What Are the Advantages of a Child Theme?

  1. You can add new features that weren’t in the original theme, such as widget areas or page templates.
  2. Child themes are normally much quicker to develop than building a theme from scratch, as the code is already there – you just need to modify it.
  3. If you update the parent theme, the modifications you have made to your child theme remain intact afterwards.

What are the Disadvantages?

  1. Sometimes, it is difficult to override styles in a theme. If there are multiple CSS declarations, it can take some detective work to change the rule you want.
  2. Depending on which theme you choose as a parent, you may find that it takes a while to understand and modify the code.

How Do You Make One?

I am using Twenty Fifteen to make a child theme, as it is easy to customise. I’m assuming you already have it installed.

  • Start by creating a folder in your wp-content/themes/ directory and call it twentyfifteen-child.
  • Create a blank file called style.css and add the following:
/*
Theme Name: Twenty Fifteen Child
Theme URI: https://wordpress.org/themes/twentyfifteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.0
Template:     twentyfifteen
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen-child

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
  • The important lines here are your Theme Name and Template.
  • Then, underneath, add this:
@import url("../twentyfifteen/style.css");
  • Save this file in the twentyfifteen-child folder.
  • Go to Appearance > Themes and switch to your new theme.
  • There, you’re done. Except that the child theme doesn’t actually do anything different yet from the parent.

Colour the left hand side, including the sidebar

Part of liceblue colour sidebar

This is easy. Add the following to style.css to add a subtle pale blue:

body:before {
	background: aliceblue;
}

Change the font

Headlings 1 to 6 in Montserrat font

Let’s change the font of the headings from Noto Serif to Montserrat. But how? I hear you ask.

  • Go to Google Fonts website and find the Montserrat font.
  • Tick the checkboxes for both styles and select Use.
  • Google will give you a line of code to use. We’ll use the link in a moment.
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  • Create a file called functions.php in your child theme folder, add the following code and save it:
<?php

// Add Montserrat font
function load_montserrat_font() {
            wp_register_style('montserrat', 'http://fonts.googleapis.com/css?family=Montserrat:400,700');
            wp_enqueue_style( 'montserrat');
        }
    
    add_action('init', 'load_montserrat_font');

?>
  • Then add the following to your style.css, below what’s already there:
h1.page-title, h2.widget-title, p.site-title, h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
}
  • Save style.css and reload your site in your browser. This will change all the headings to Montserrat font, and also header links and the page title.

Add a footer widget area to Twenty Fifteen

Poor Twenty Fifteen. It only has one widget area. Let’s add another.

  • Add the following code to functions.php below the first function, but before the final ?>.
// Add footer widget 
function footer_widgets_init() { 
register_sidebar( array( 'name' => 'Footer widget area', 
'id' => 'footer_sidebar', 
'before_widget' => '<div>', 
'after_widget' => '</div>', 
'before_title' => '<h2 class="widget-title">', 
'after_title' => '</h2>', ) ); 
} 
add_action( 'widgets_init', 'footer_widgets_init' ); 
  • Now you can try adding a widget to this area in Appearance > Widgets – but it won’t display yet.
  • Copy the file footer.php from your Twenty Fifteen parent theme into your child theme directory. Add the following code, just after this line:
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( is_active_sidebar( 'footer_sidebar' ) ) : ?> 
<div id="footer-sidebar" class="footer-sidebar widget-area" role="complementary"> 
<?php dynamic_sidebar( 'footer_sidebar' ); ?>
  • Save. Add a little bit more padding to the widget area with this line in style.css:
#footer-sidebar {
	padding: 2em;
}

You should now have a functioning widget area in your Twenty Fifteen theme with widget.

Calendar widget in footer

Create a custom 404 error page

Let’s have some fun. The original Twenty Fifteen 404 page is boring, so let’s modify it.

Twenty Fifteen 404 psgr
  • Copy the 404.php file into your child theme.
  • Find a suitable photo to use on the page – I got one from Crestock for $1.
  • Create an /images/ folder within your child theme. Add the photo to it. Note the filename.
  • Modify the content of the 404.php file:
<div class="page-content"> 
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/404-error.jpg" alt="number 404 on dead green guy - 3d illustration" width="400" height="325" class="aligncenter" />
<p><?php _e( 'Your adventure is over. Do you want to try again?', 'twentyfifteen' ); ?></p>
<?php get_search_form(); ?> 
  • Change the width, height and alt attributes to match what you are using.
  • Add a dash of style to style.css to finish the job:
.page-header {
	border-left-color: #952323;
}

.error-404.not-found h1, .error-404.not-found p {
	color: #952323;
} 

.error-404.not-found img {
	margin-top: -20px;
}

.error-404.not-found p {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
  • Save and voila. Test by going to an invalid URL for your site, e,.g. https://www.example.com/404.
  • The end result:
Page not found: Image of number 404 on dead green guy - 3d illustration
Modified 404 page in Twenty Fifteen

I hope this has helped you to understand the concept of a child theme and what it can do. If you found it helpful, please leave me a comment.

Related

Category: WordPress Tags: 30 day blogging challenge, 404, child theme, sidebar, theme, twenty fifteen, widget area

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Mark Pridham says

    February 13, 2015 at 8:02 pm

    Great tutorial Claire. Very well written and easy to follow.

    Reply
  2. Susan Wilkinson says

    February 13, 2015 at 9:05 pm

    Love the 404 man!

    Reply
  3. Johanna van Doorn says

    March 27, 2015 at 3:15 pm

    Thanks! Helped me a lot 🙂

    Reply
  4. Ginger says

    March 31, 2015 at 3:46 am

    Great information. I’m going to try it.

    Reply
  5. iThemify says

    April 2, 2015 at 1:16 am

    Real nice tutorial! I have a bunch of WP Twenty Fifteen child theme skins if anyone’s interested. Some real nice colors available at iThemify.com.

    Reply
  6. reinhard says

    May 29, 2015 at 8:19 am

    Thank’s a lot for this tutorial !

    Reply
  7. Marcos Gabler says

    August 19, 2015 at 11:27 am

    Great tutorial, but a have a problem to implement. I’m Not an expert and the widget not work.
    Then i see this part is missing after “”

    But that was a very small problem with the valuable contribution. This tutorial this tutorial helped me a lot

    Reply
    • Claire Brotherton says

      August 26, 2015 at 7:09 pm

      Thanks Marcos – what was the part you were stuck with? I hope you managed to work it out.

      Reply
      • Paige says

        October 15, 2015 at 5:36 pm

        The footer widget isn’t working for me. something to do with the closing of if statement?

        Reply
  8. Jesus says

    August 19, 2015 at 9:08 pm

    great tutorial. Sometimes I must create a child theme and I miss something… the 50%…

    Reply
    • Claire Brotherton says

      August 26, 2015 at 7:10 pm

      Thank you!

      Reply
  9. Tom says

    October 17, 2015 at 6:55 pm

    How do you remove the footer “Proudly powered by WordPress” in this theme in child theme?

    Reply
  10. Martin Vollenweider says

    November 17, 2015 at 7:55 pm

    Well written and useful tutorial

    Reply
  11. Thames South Shopping Portail says

    November 19, 2015 at 12:53 am

    I was going through wordpress website to create one, I think you have the best guide to follow. Recommend to others.

    Reply
  12. Lydia says

    November 29, 2015 at 4:44 pm

    Hi I loved this tutorial I’m just learning and found this to be excellent and clear through. I did encounter two issues one with the footer the addition of the widget is not appearing for me. I followed the example above but have not been able to get it to display. And I tried the 404 error code but an another image on the site keeps showing up. I’ve check to ensure I have the right name and where it points to but no luck. Any additional tips for the footer and 404error?

    Reply
  13. Soni Sitez says

    March 2, 2016 at 5:50 am

    Wow its wonderful tutorials, currently i find tutorial like this for my blog. Do you have any idea how to make two sidebar or pagination post with number? Thanks.

    Reply
  14. Horses says

    May 28, 2016 at 12:51 pm

    Do ʏoᥙ mind if I qote a couple ߋf your articles ɑs
    long as I provide credit and sources back
    to your website? My blog site іs in tthe exact sɑme niche as yοurs аnd my users
    wߋuld definitely benefitt frօm ѕome of tҺe infοrmation you provide һere.
    Plеase let mе қnow іf thіs ok աith уou.
    Thanks!

    Reply
  15. Meridies says

    November 11, 2016 at 1:48 pm

    To add a footer widget, I noticed a small mistake in code. Instead of colon, put semicolon.

    After:
    footer id=”colophon” class=”site-footer” role=”contentinfo”

    Instead of:
    if ( is_active_sidebar( ‘footer_sidebar’ ) ) :

    Goes this:
    if ( is_active_sidebar( ‘footer_sidebar’ ) );

    Reply
  16. christina a says

    November 17, 2016 at 6:46 am

    Thank you. Your writing is to the point, and I made it through 🙂

    Reply

Trackbacks

  1. Choosing A WordPress Theme says:
    December 17, 2015 at 10:20 am

    […] If you would like to know how to customise WordPress 2015 theme, check out this great tutorial by Claire […]

    Reply

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map