Video Tutorials for How to work with a child Theme in WpResidence

In this document we will try to explain how you can work with child theme in order to customize your website.

The theme pack comes with an already made child theme – How to Install WpResidence Child theme

Css code

All the custom css code must be put in the child theme style.css. When WordPress will load the theme it would load the child theme style.css int he end and will over write the default one.

Template files

In this case we are talking about files like single-estate_property or agents_list.php files. To use these files in a child theme you just need to copy them in the child theme folder(and keep the folder structure). WordPress will then use the files in the child theme.

There are also files that are loaded via get_template_part. For ex property_unit.php. Same as before you have to copy the files in the child theme and also maintain the folder structure. Since property_unit.php is in a folder called templates. you need to create a folder with the same name in child theme folder, and after that copy the property_unit.php in the child theme /templates folder.

Function files

If you want to change how a function is working you need to know that the trick from the template files section will not work.
For example: You want to change how function wpestate_load_stats_property() works and you copy the ajax_functions.php in child theme folder. This will NOT work.

To change the functionality of the function in a child theme you need to copy the function declaration in child theme functions.php and change it there. Copy ONLY the code starting with function and not the if part. Like in the code below:
function wpestate_load_stats_property(){
$listing_id = intval($_POST['postid']);
$labels = wp_estate_return_traffic_labels($listing_id,30);
$array_values = wp_estate_return_traffic_data($listing_id,30);
echo json_encode( array('array_values'=>$array_values,'labels'=>$labels) );
die();
}
All the functions declared in the theme have an if code in front of them. Like
if( !function_exists('wpestate_load_stats_property') ):
That tells WordPress to initialize the function if the function does not exist.
When you put the function code in child theme functions.php this is what will happen. WP will first load the child theme functions.php. It would see the function declaration (the one you changed) and will load it. After that will move to the original theme files and will discover the original function. But since a function with that name is already declared is would not load it again.

Shortcodes

The simplest way to change the functionality of a shortcode is to clone it into a new one.

Otherwise, you would have to deregister the original one and register the one from the child theme. So is simple to just create a new one based on the original code.

Shortcodes are defined in shortcodes_install.php and their actual functions are defined in shortcodes.php
Start by doing a
add_action('init', 'wpestate_child_shortcodes');
function wpestate_child_shortcodes(){
wpestate_register_shortcodes_child();
wpestate_tiny_short_codes_register_child();
}
function wpestate_tiny_short_codes_register_child() {
if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) {
return;
}
if (get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', 'wpestate_add_plugin_child');
add_filter('mce_buttons_3', 'wpestate_register_button_child');
}
}
Then define wpestate_add_plugin_child()  and  wpestate_register_button_child()  like the originals are defined.
For wpestate_add_plugin_child() you would also need to define a js file (like the /js/shortcodes.js’ ). In the new js file just clone the functionality of the already made buttons.
If you want to add the shortcode into visual composer you just need to look hoo we did it on shortocdes_install.php at line 112.
if( function_exists('vc_map') ):
vc_map(
vc_map is the visual composer function that add a new shortcode. See this link https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332

In the end you would need to copy the shortcode original function from shortcodes.php and add it into your child theme functions.php .

Change the name to match the new name you have in wpestate_register_shortcodes_child and after that you are free to change its functionality.

See also this link for additional help https://codex.wordpress.org/Shortcode_API

Widgets

With widget we will follow the same logic as for shortcodes. We will clone and change an already made one.

Start with
add_action('widgets_init', 'register_wpestate_widgets_child' );
function register_wpestate_widgets_child() { register_widget('Your widget'); }
Copy the widget file you want to clone in child theme(the widget files are in libs/widgets folder). Make sure you include this file in child theme functions.php (see how is done with  original files : require(‘widgets/multiple_currency.php’); )
The all you need to do is to change the code in the file you copied. Start with class and function names who must be the same as widget name.  You can also look over this tutorial: http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/

How to work with js files in child themes

First of all you need to know that the js files will not get overwritten like the templates php files.

The technique in this case is to deregister the script and register a clone of the file that is present in child theme

All the js files are registered  in libs/css_js_include.php with wp_enqueue_script.

To deregister you need to use wp_dequeue_script :  https://codex.wordpress.org/Function_Reference/wp_dequeue_script

For example 

in parent theme we have control.js
wp_enqueue_script('control', trailingslashit( get_template_directory_uri() ).'js/control.js',array('jquery'), '1.0', true);
wp_localize_script('control', 'control_vars', .......................
add_action('wp_enqueue_scripts', 'wpestate_load_child_scripts', 100);
function wpestate_load_child_scripts()
{
wp_dequeue_script('wpestate_control');
wp_enqueue_script('wpestate_control_child', get_stylesheet_directory_uri().'/scripts/wpestate_control_child.js', array('jquery'));
wp_localize_script('wpestate_control_child', 'control_vars', .......................
}
Also you need to aware that the many variables are sent to javascript files via wp_localize_script and accessed in this format control_vars.path. Depending on how you enqueque your new scrips this can be changed into wpestate_control_child.path
Another way to do this.
In child theme enqueue a new javascript file but make the hook run after the original js files are added.

The if you have minor changes like change the function for a click event you can

1. unbind the original click event
2. bind again
For example you have

$('.mobile-trigger').click(function()
{........
you can do
$('.mobile-trigger').unbind('click');
$('.mobile-trigger').click(function() {........ new actions