Guides by Pixelgrade

About Child Theme Guides

In order to allow our beloved clients to have their own customizations based on our themes, we make them compatible with child themes. On top of that, we highly encourage everyone to use a child theme to keep a better track of what is custom made and what is theme based.

Here is our Child Theme Example.

An honest promise

This is a promise from our side that we're keeping our themes aligned to WordPress standards, and we will always give our best to create products that work smoothly with the child theme version.

The importance of a child theme

Even if the WordPress documentation about child themes covers up pretty much everything we want to explain, let's check the big points as follows:

• Assets Management –– always imagine that a user may want to remove or change assets (like styles or scripts), so try to not make them interdependent.
• Template Files –– we try to break our templates as much as we can in order to simplify and facilitate the template overwrite process.
• Functions overloading –– allow PHP functions to be overloaded by the child theme's `functions.php` file.
• Internationalization –– the user can always have his strings, and he should always be able to translate them.

Some proof examples

Template overwriting

The most common usage of a child theme is to override template parts. For example, a sidebar. If we have a theme with the following file at: /themes/template/sidebar.php

<?php
/**
 * The sidebar containing the main widget area.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}?>
<div id="sidebar" class="widget-area">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div>

we can definitely add our own file in child theme (with the specifications from the first example) with the following file: /themes/child-theme/sidebar.php

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
/**
 * The sidebar containing the main widget area.
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}?>
<div id="my-sidebar" class="my-own-awesome-class widget-area">
	<div class="my-wrapper">
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div>
</div>

Now my-own-awesome-class is safe in child theme and it won’t be removed at any theme update and WordPress will always choose a template from child themes when it does find one on the same path.

Assets replacement

Even if it is not a best practice, sometimes you need to replace assets like CSS or JS files or libraries.

Note that the template overwriting doesn’t work with anything else than .php files so when we talk about assets WordPress is saving them as a queue and we can modify that.

One example could be the replacement of jQuery library with your desired version. In our child theme functions.php file we need to add a function that removes the current jQuery version and add our own from CDN(remember, this is just an example).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
/**
* Dequeue the jQuery script and add our own version.
*
* Hooked to the wp_print_scripts action, with a late priority (100),
* so that it is after the script was enqueued.
*/
function my_own_theme_scripts() {
	// remove the current version
	wp_dequeue_script( 'jquery' );
	// register my desired version
	wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.1.0.min.js', false, '3.1.0' );
	// load my version, here or somewhere else
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_print_scripts', 'my_own_theme_scripts' );