Last active
January 6, 2021 13:13
-
-
Save slavapas/3d17f2be44359d8d4d365a8e41c85d16 to your computer and use it in GitHub Desktop.
Wordpress Child Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
Theme Name: Twenty Fifteen Child | |
Theme URI: http://example.com/twenty-fifteen-child/ | |
Description: Twenty Fifteen Child Theme | |
Author: John Doe | |
Author URI: http://example.com | |
Template: twentyfifteen | |
Version: 1.0.0 | |
License: GNU General Public License v2 or later | |
License URI: http://www.gnu.org/licenses/gpl-2.0.html | |
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready | |
Text Domain: twenty-fifteen-child | |
*/ | |
/* The following information is required: | |
Theme Name – needs to be unique to your theme | |
Template – the name of the parent theme directory. | |
The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly. | |
The final step is to enqueue the parent and child theme stylesheets. | |
Note: In the past, the common method was to import the parent theme stylesheet using @import; this is no longer the recommended practice, as it increases the amount of time it takes style sheets to load. Plus it is possible for the parent stylesheet to get included twice | |
The recommended way of enqueuing the parent theme stylesheet currently is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. | |
You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies. | |
*/ | |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); | |
function my_theme_enqueue_styles() { | |
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); | |
} | |
?> | |
/* | |
If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. The complete (recommended) example becomes: | |
*/ | |
<?php | |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); | |
function my_theme_enqueue_styles() { | |
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. | |
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); | |
wp_enqueue_style( 'child-style', | |
get_stylesheet_directory_uri() . '/style.css', | |
array( $parent_style ), | |
wp_get_theme()->get('Version') | |
); | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment