Sterling “hybrid” Child Theme

In version 2.6.2 of the Sterling theme we made some coding changes to the default theme and introduced an updated Child Theme to reflect these changes. If version 2.6.2 or above is your first version of Sterling than you can disregard this article. For the rest of us let’s, take a look at how we can hyrbid our old Child Theme with the new Child Theme.

Brief technical overview:

Feel free to skip to the next section if you’d just like the info about what changes you need to make in order to “hybrid” your Child Theme…

The Sterling parent theme used to “print” the theme’s CSS to the [head] of the page using the add_action( ‘wp_head’ ) wordpress hook. Over time we’ve learned that there is actually a better way to include CSS into the theme, and it’s done by using the add_action( ‘wp_enqueue_scripts’) wordpress hook instead. Sterling 2.6.2 now uses this new function and so the Child Theme has been updated to work seamlessly with this coding change.

How to “hybrid” your Child Theme:

Step 1: update style.css

Have a look at the screenshot below and make the 2 small edits to your Child Theme’s (style.css) file. You’ll be removing one line of code and altering another line of code. The value for “Template” in your new version should be “sterling” with a lowercase “s” as outlined below:

Sterling Child Theme Hyrbid


 

Step 2: update functions.php

The final step in the process is to update the Child Theme’s functions.php file. The new version of functions.php has a decent-sized function that taps into the new way that the parent theme is handling CSS. If you’ve made no custom changes to your current functions.php you can simply grab the new file and replace the old. Otherwise, grab the code below and paste it into your existing “functions.php”. That’s it! You are now fully migrated and you’ll be all good to go with updates in the future.

Please feel free to contact us if you have any questions or require our assistance.

 

The PHP code:

/*--------------------------------------------------------------
 * -------------------------------------------------------------
 * -------------------------------------------------------------
 *
 * DO NOT MODIFY THIS CODE - Theme will break
 *
 *
 * @import is no longer best practice for adding the Parent theme's CSS
 * All CSS is now added via wp_enqueue_style()
 * Child Theme's CSS now also loads adter all other CSS to ensure seamless override
 *
 * @since Sterling 2.2.6
 */
function sterling_child_theme_enqueue_styles() {

	$primary_style         =  get_option('st_main_scheme');
	$secondary_style       =  get_option('st_secondary_scheme');
	$mobile_style          =  get_option('st_responsive');

	//parent theme's style.css
	wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), NULL);

	//primary color css
	wp_enqueue_style( 'primary-color', TT_CSS . $primary_style .'.css', array(), NULL);

	//secondary color css
	if( 'default' != $secondary_style ) :
		wp_enqueue_style( 'secondary-color', TT_CSS . $secondary_style .'.css', array(), NULL);
	endif;

	//font-awesome
	wp_enqueue_style( 'font-awesome', TT_CSS .'_font-awesome.css', array(), NULL);

	//woocommerce
	if ( class_exists( 'woocommerce' ) ) :
		wp_enqueue_style( 'woocommerce', TT_CSS . '_woocommerce.css', array(), NULL);
	endif;

	//mobile stylesheet
	if( 'false' == $mobile_style ) :
		wp_enqueue_style( 'mobile', TT_CSS . '_mobile.css', array(), NULL);
	endif;

	//child theme css
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array(), NULL);

}

add_action( 'wp_enqueue_scripts', 'sterling_child_theme_enqueue_styles' );

 

Troubleshooting:

  • if the Child Theme is broken and the site is not loading correctly please check to ensure that the code in functions.php file is wrapped in only 1 set of opening and closing PHP Tags (outlined below)
<?php ...code goes here... ?>