Creating a child theme is simple like creating a text file, let’s see how you can create child theme for ItalyStrap (you can apply the same things for creating child theme for your theme).

For working fine child theme needs at least only 2 files, style.css and functions.php, the first one is mandatory, without that the child theme will not read correctly, the second one is optional but is important for putting your php code, remember that the functions.php in your child theme will always load before the functions.php in the parent theme.

First of all you have to create a new directory in wp-content/themes/, the name is not important, I usually call it with the name of the project I work or the name of the client, but for this tutorial let’s call it italystrap-child.

For the second step create a new file inside italystrap-child directory and call it style.css.

Open the file in your text editor (I usually work with sublime text but you can use the editor you want).

Now you have to add file header with meta-information so WordPress can load the child theme correctly.

The basic setup is to add at least Theme Name and Template:

/**
 * Theme Name: ItalyStrap Child
 * Template: italystrap
 */

As you can se the Theme Name is the name of your child theme and Template refer to the name of the parent theme (to be more precise the name of the directory of the parent theme and remember that Template: is case sensitive, the directory name of ItalyStrap is lowercase).

It’s also a good idea to add a version number:

/**
 * Theme Name: ItalyStrap Child
 * Template: italystrap
 * Version: 1.0.0
 */

If you want to learn more about version number see the semver.org

Here there is an example of all meta-information you can add for the theme:

/**
 * Theme Name: ItalyStrap Child
 * Template: italystrap
 * Theme URI: http://italystrap.com
 * Author: Enea Overclokk
 * Author URI: http://italystrap.com
 * Description: This is my best child theme.
 * Version: 1.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
 * Text Domain: my-child-theme-name

 * This theme, like WordPress, is licensed under the GPL.
 * Use it to make something cool, have fun, and share what you've learned with others.
 */

Instead of create a child them from skratch you can download the zip file of ItalyStrap Child from here and use it for ItalyStrap parent theme.

Or clone with git:

git clone git://github.com/overclokk/ItalyStrap.git

Now if you use the ItalyStrap framework the next step is to load your own style and script to make it unique instead of use the parent one.

To do this you have to understand how the theme structure and the script hierarchy works.

This is the parent structure:

/
-- css
---- archive.css
---- custom.css
---- front-page.css
---- home.css
---- singular.css
---- visual_editor.css
-- js
---- archive.js
---- custom.js
---- front-page.js
---- home.js
---- singular.js
---- jquery.min.js

This structure let you load the file only when the page need it and only the file name of the template name used, this is made possible thanks to the WordPress template hierarchy system, for example if you are in the archive page then the framework will load only the archive.css and archive.js files, by default if no file match the template name will aloways load the custom.css and custom.js (the 'custom' name is the fallback in case no files are found in parent nor in child directories) then in your child theme you have to add the script that match the name of the template used in that url.

If you don’t like this system you can always override it with those filters:

'italystrap_config_enqueue_style'
'italystrap_config_enqueue_script'

This filters return an array of array with the information about the files that theme have to load, for example you want to load your single own css you can filter the array like this:

<?php
namespace Vendor\Dir;

/**
 * My custom function for loading my style
 *
 * @param  array $array The original array with theme style.
 *
 * @return array Return the new array with my style
 */
function my_custom_style( array $array ) {
    $new_array = array(
        array(
            'handle'  => 'my_custom_handle_name',
            'file'    => 'url/to/your/file.css',
            'deps'    => 'file_name_it_depends_of', // (optional)
            'version' => null,
            'media'   => null,
            'load_on' => 'is_single', // (optional) Conditional tag
        ),
    );
    return $array;
}
add_filter( 'italystrap_config_enqueue_style', '\Vendor\Dir\my_custom_style' );

The

Last edit:

Comments are closed.