Creating a Child Theme

Child Theme is a way to customize original theme without editing main theme files. When you need to change design, modify existing functionality or add new options it’s not recommended to make modifications directly to the main theme files because all of these changes will be lost after theme update. To avoid this, we can simply create a child theme which is separate from main theme and will not be affected by theme updates.

Child Theme needs to have at least 2 files, style.css and functions.php.

style.css file should contain something like following code on top of the file:

/*
 Theme Name:   New Child Theme
 Theme URI:    http://videoboardtheme.com
 Template:     videoboard
 Version:      1.0.0
*/

These are some basic lines that style.css can have, you can further add/remove/edit lines to fit your needs. Under these lines you can also add new CSS which you would like to be applied on website. Just by adding this file alone you will be able to see new child theme in Appearance > Themes menu and child theme can be activated.

Now we have CSS file ready but it won’t be included during site load until we specify so in functions.php. To include it, you can add following code in functions.php file:

function new_childtheme_styles() { 
	
	wp_enqueue_style('newchildtheme', get_stylesheet_directory_uri().'/style.css');
	
}
add_action('wp_enqueue_scripts', 'new_childtheme_styles');

This is all what’s needed to create a basic child theme. Besides this, we can customize all template files just by adding new file with the same filename like in parent theme. For example, if you would like to modify appearance of video page you can just copy original single-vbvideo.php from parent theme to child theme directory and than make necessary changes. All of the existing files can be customized the same way. When file is present in child theme it will automatically override the same file in parent theme.

Additional template files which don’t already exist in parent theme can also be added in child theme according to template hierarchy. This is a great way for adding new page templates as well.

Core theme functionality can also be modified by making use of available hooks and filters or by overriding existing functions. For example, if you would like add code for changing appearance of price on packages from registration page you can simply create function with the same name which will override core function:

function vb_price($price) { 
		
	global $vboptions;
	
	$options = array(
		'currency_symbol' => $vboptions['vb_generalsetup']['currency_symbol'],
		'currency_position' => $vboptions['vb_generalsetup']['currency_position'],
	);
	
	if($options['currency_position'] == 'left') { 
		$price = $options['currency_symbol'].$price;
	} else { 
		$price = $price.$options['currency_symbol'];
	}
	
	return 'For ONLY '.$price;
}

Code above will attach “For ONLY” text in front of the price on all packages.

Finally, you may want to add child theme preview picture for aesthetic purposes so that theme looks nicer from admin panel. This is done by putting image with screenshot.png filename into child theme directory.

Creating a Child Theme - VideoBoard Theme

This child theme code and file samples from article are available for download as a starter child theme which you can use as a base for your own development purposes.

Download Child Theme example file

Copyright © 2024 | VideoBoard WordPress Theme