Child Themes

Creating a Child Theme is the best way to create a unique theme of your own while preserving the integrity of Inti Foundation if you’d like to keep your theme up to date with any new features that are added or bugs that are fixed.

There are two types of child theme you can create. A basic one, where you’re really just interested in overriding a couple of templates or styles, and a full-on one, where you replace the entire library with a local one, recompiling Foundation 6 Sass files, Inti’s Sass files, your own Sass files, and adding new vendor files.

Blank Child Theme

The blank child theme, available to download here, is the most basic child theme you can use. The settings found in functions.php are all overwritten (see ‘Turn on/off Features‘ below). The library still comes from the parent theme. All the templates and framework files come from the parent and are overwritten one by one by recreating the directory structure and creating a file with the same name.

Kitchen Sink Child Theme

The kitchen sink theme recreates the entirely library locally in the child theme. The scripts and styles from the parent theme are not longer applied to the website, which now uses those from the local library. This allows you to add entirely customized Foundation 6 base settings, rework any Inti Foundation base styles, and use and add to the vendor scripts as you require, all while maintaining and being able to expand upon all of Inti Foundations WordPress functionality.

Turn on/off Features

In functions.php, a number of calls to add_theme_support() exist that can turn features on and off throughout the theme and pass values to set some of these features up.

add_theme_support(
'inti-menus',
array('dropdown-menu', 'off-canvas-menu', 'footer-menu')
);

add_theme_support(
'inti-sidebars',
array('primary', 'frontpage', 'footer')
);

add_theme_support(
'inti-layouts',
array('1c', '2c-l', '2c-r', '1c-thin')
);

You may want to overwrite the above, or rework it, but at it’s simplest, you can just remove one and that feature will stop working throughout the theme.

 

Overriding Functionality

There are multiple ways to do this, with varying levels of extremity.

Completely vaporize a file with locate_template()

require_if_theme_supports('inti-menus', locate_template('/framework/extensions/menus.php'));

Adding a file in your child theme called menus.php, while placing it in a recreated structure of FRAMEWORK/EXTENSIONS will completely replace the file and absolutely everything inside it. You might want to copy and paste its contents into your own menus.php

What to expand on that file without replacing it? Create a new file called child-menus.php and add a new require_if_theme_supports() for it in your functions file.

 

Remove actions from hooks

Inti Foundation template files and functions are full of hooks and filters. The hooks allow you to output some form of content to one or multiple places, usually after having molded what this would be with complex conditional statements or formatting. For example, in FRAMEWORK/CONTENT/content-footer.php we have a function that gets the Google Analytics ID from theme options and outputs the completed javascript in the footer of the page.

function inti_do_footer_analytics() {
$analytics_id = stripslashes(get_inti_option('analytics_id', 'inti_footer_options'));
if ( $analytics_id ) { ?>
<!-- Google Analytics -->
<script>
...
</script>
<!-- End Google Analytics -->
<?php
}
}
add_action('inti_hook_footer', 'inti_do_footer_analytics', 2);

Don’t want this here? Do you use a plugin for the same purpose? Then remove it…

function child_remove_actions(){
remove_action('inti_hook_footer', 'inti_do_footer_analytics');
}
add_action( 'after_setup_theme', 'child_remove_actions', 0 );

What to remove it so you can write it again differently, perhaps with different conditions? Then create a new function and re-add it.

function my_own_much_better_do_footer_analytics() {
$analytics_id = stripslashes(get_inti_option('analytics_id', 'inti_footer_options'));
if ( $analytics_id && $someothercondition ) { ?>
<!-- Google Analytics -->
<script>
...
</script>
<!-- End Google Analytics -->
<?php
}
}
add_action('inti_hook_footer', 'my_own_much_better_do_footer_analytics', 2);

Google recommends adding its Analytics code in the header. Inti Foundation prefers it in the footer so it loads at the end. Is Google right? Then remove the action as above, then re-add it on a hook you prefer…

function child_remove_actions(){
remove_action('inti_hook_footer', 'inti_do_footer_analytics');
add_action('inti_hook_head', 'inti_do_footer_analytics');
}
add_action( 'after_setup_theme', 'child_remove_actions', 0 );

 

Pluggable functions

Some of the functions in the parent theme that do things that don’t lend well to filters have been made plugable.

if ( !function_exists( 'inti_get_dropdown_social_links' ) ) {
function inti_get_dropdown_social_links() {

...

    }

}

In your own code, you can simply recreate this function with the same name. Since the child theme is initialize first, your function will be the one that runs, while the parent theme function will be prevented from running by the function_exists() condition.

 

Overriding Templates

We’ve covered how to overwrite framework files, or just parts of them, above. But we also have to deal with templates the structure how the content is outputted.

Files such as page.php, single.php, archive.php, header.php etc are pretty standard WordPress fare. As with any child theme, by simple adding a version of these files with the same name into your child theme, you overwrite them completely.

The same is true of all the template parts, loops and custom page templates organized into directories such as LOOPS, PAGE-TEMPLATES, POST-FORMATS, TEMPLATE-PARTS etc. Just create your own versions in the child theme and adapt them as needed.