Skip to content

Commit

Permalink
You may have noticed that activating your new child theme made the fr…
Browse files Browse the repository at this point in the history
…ont end of the site look broken. The TwentyFifteen theme uses a WordPress function called `get_stylesheet_uri()` to fetch the stylesheet from the current theme. When you activated the child theme, it became the current theme. As a result, WordPress started loading the empty stylesheet from your child theme instead of the original stylesheet from the TwentyFifteen parent theme. At this point, we could 1) just copy the styles from the original stylesheet into ours, 2) use an @import in our stylesheet to load the parent styles or 3) use the WordPress enqueueing system to load the parent stylesheet.  Option 1 would mean that we need to do some intricate copy-pasting whenever the theme has an update, so we don't want to do that.  Option 2 requires that you set the relative path to the parent theme stylesheet URL and given that the WordPress file system could have some different configurations, I decided against counting on that living in a particular location.  So, we are going with option 3.

We are using the `wp_enqueue_scripts` action hook (which is also meant to be used for styles as well) to add a custom callback function.  This callback function, `tfc_wp_enqueue_scripts()` is prefixed with `tfc_` which stands for 'Twenty Fifteen Child'.  Prefixing all of your functions is important to prevent function naming conflicts with WordPress core and any plugins you may be running.  A function naming conflict will cause a fatal error in PHP and prevent your site from loading.

Our callback function makes two calls to `wp_enqueue_style()`. The code on line 6 loads the stylesheet from the parent theme. The code on line 7 loads the stylesheet from our child theme.  It is important to be aware of the meaning behind the 'stylesheet directory' as opposed to the 'template directory'.  The stylesheet directory will always be the directory of the active theme (our child theme, in this case). The template directory will always point to the directory of the current theme's parent.  If you aren't running a child theme, then the template directory will be the same as the stylesheet directory.  That said, we are overriding the 'twentyfifteen-style' handle and telling it to actually load the parent theme's stylesheet.  We are then adding a new handle for our child theme's stylesheet and loading it.
  • Loading branch information
wpscholar committed Nov 12, 2015
1 parent 54a58fc commit aad0ed6
Showing 1 changed file with 8 additions and 0 deletions.
8 changes: 8 additions & 0 deletions functions.php
@@ -0,0 +1,8 @@
<?php

add_action( 'wp_enqueue_scripts', 'tfc_wp_enqueue_scripts' );

function tfc_wp_enqueue_scripts() {
wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentyfifteen-child-style', get_stylesheet_directory_uri() . '/style.css' );
}

0 comments on commit aad0ed6

Please sign in to comment.