Child theme

A child theme is a small theme that sits on top of Kinetra. It holds your own CSS and PHP, and Kinetra updates never touch it. Kinetra comes with one ready to install, kinetra-child.zip, in your download.

Do you need one?

If everything you need is in the first three rows, skip the child theme. Customizer settings and Custom Code survive updates already.

Your settings come with you

WordPress normally keeps Customizer settings separately for each theme, so a new child theme would start with default settings. Kinetra copies them for you: the first time you activate a Kinetra child theme, it gets everything from Kinetra.

The copy happens once. After that, the child theme’s settings are its own: changes you make while it is active don’t change Kinetra’s settings, and switching back and forth never overwrites them. If the child theme already had Kinetra settings of its own, nothing is copied.

Back up the site before switching themes anyway. An export from Kinetra → Dashboard → Settings backup → Export settings is a handy extra copy of your design.

Install the ready-made child theme

1. Make sure Kinetra is installed in Appearance → Themes. Don’t delete it: the child theme needs it.
2. Go to Appearance → Themes → Add New Theme → Upload Theme.
3. Choose kinetra-child.zip from your download, click Install Now, then Activate.
4. Open your site in a private window. It should look exactly as before: your settings, logo, menus and Additional CSS were copied across.
5. Optional: move your Additional CSS into the child theme’s style.css, so it lives in one place.

The ready-made child theme contains three files:

Make one by hand

If you don’t have the zip, create the child theme yourself with your host’s file manager or an FTP program.

1. Open wp-content/themes/. You will see a kinetra folder there.
2. Create a new folder next to it called kinetra-child.
3. Inside it, create style.css with the text below.
4. Inside it, create functions.php with the text below.
5. Go to Appearance → Themes, find Kinetra Child and click Activate. Your settings are copied across in the same way.

style.css:

/*
Theme Name:   Kinetra Child
Template:     kinetra
Version:      1.0.0
Text Domain:  kinetra-child
*/

/* Your CSS goes below this line. */

functions.php:

<?php
defined( 'ABSPATH' ) || exit;

// Load this theme's style.css after Kinetra's styles.
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'kinetra-child', get_stylesheet_uri(), array( 'kinetra-vars' ), '1.0.0' );
}, 20 );

Template: kinetra must match the name of Kinetra’s folder exactly, in lower case. If you renamed that folder, use the new name. functions.php must start with <?php and have nothing before it, not even a space.

Adding CSS

Write your CSS at the bottom of style.css. Use Kinetra’s variables instead of fixed colours and sizes, so your styles follow the Customizer and the light/dark switch automatically:

/* A highlighted box that works in light and dark mode. */
.my-note {
	background: var(--nx-surface);
	color: var(--nx-text);
	border: 1px solid var(--nx-border);
	border-left: 4px solid var(--nx-accent);
	border-radius: var(--nx-radius);
	padding: 20px 24px;
}

/* Only in dark mode. */
:root[data-scheme="dark"] .my-note {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Only for one design preset. */
.kinetra-style-atelier .my-note {
	font-family: var(--nx-font-heading);
}

Add the class to any block in the Block Editor under Advanced → Additional CSS class(es), or to an Elementor widget under Advanced → CSS Classes. The full list of variables is in Developers.

After saving the file, clear your cache plugin. Browsers keep the old stylesheet until the version changes, so raise Version in style.css (for example to 1.0.1) when you change it. The ready-made functions.php uses that number.

Adding PHP

Add filters, actions and functions to functions.php, below what is already there. The child theme’s functions.php loads before Kinetra’s, so your filters are ready in time. Some examples:

Add a colour combination to the Customizer

add_filter( 'kinetra_palettes', function ( $palettes ) {
	$palettes['brand'] = array(
		'label'  => 'Our brand',
		'colors' => array(
			'accent'          => '#0B5FFF',
			'accent_text'     => '#FFFFFF',
			'light_highlight' => '#0B5FFF',
			'dark_highlight'  => '#8DB2FF',
		),
	);
	return $palettes;
} );

Add a font

add_filter( 'kinetra_fonts', function ( $fonts ) {
	$fonts['Lexend'] = array( 'spec' => 'wght@400;500;600;700', 'fallback' => 'sans-serif' );
	return $fonts;
} );

Send contact messages to Slack

add_action( 'kinetra_contact_submitted', function ( $fields ) {
	wp_remote_post( 'https://hooks.slack.com/services/XXX/YYY/ZZZ', array(
		'headers' => array( 'Content-Type' => 'application/json' ),
		'body'    => wp_json_encode( array( 'text' => 'New message from ' . $fields['name'] . ' (' . $fields['email'] . '): ' . $fields['message'] ) ),
	) );
} );

Load a page normally because of a booking widget

add_filter( 'kinetra_needs_full_load', function ( $needs, $post ) {
	return $needs || has_shortcode( $post->post_content, 'my_booking_widget' );
}, 10, 2 );

Add a shortcode

add_shortcode( 'opening_hours', function () {
	return '<p class="my-note">Mon–Fri, 9:00–17:30</p>';
} );

Every filter and action is listed, with examples, in Developers.

A mistake in functions.php can stop the whole site loading. Edit it with FTP or your host’s file manager rather than Appearance → Theme File Editor, so you can undo a mistake even when WordPress is down. Test changes on a staging site first if you can.

What you can and can’t override

Updating

• Kinetra updates work exactly as before, from Dashboard → Updates. Only the parent theme is replaced; your child theme is untouched.
• After a big Kinetra update, read the release notes for changed filters, and check the pages your code affects.
• Keep your child theme folder in version control (Git) or at least keep a copy on your computer.

Going back to Kinetra

Kinetra still has the settings it had before you switched; changes made while the child theme was active stay with the child theme. To take those changes with you, export them first from Kinetra → Dashboard → Settings backup → Export settings. Then activate Kinetra in Appearance → Themes, import the file, and move any PHP you still need into a small plugin.

Troubleshooting

“The parent theme is missing. Please install the kinetra parent theme.”

Kinetra isn’t installed, or its folder has another name. Install Kinetra, or change Template: in the child’s style.css to the folder name.

My site looks like a fresh install

Settings are copied only when Kinetra 1.3.0 or newer is installed, and only into a child theme that had no Kinetra settings yet. Import an export from Kinetra → Dashboard → Settings backup, then check the logo and menus.

The menus are gone

They still exist. Assign them in Appearance → Menus → Manage Locations.

My CSS in style.css does nothing

Check that functions.php loads it (the wp_enqueue_style line above). Then clear your cache plugin, raise the version number, and reload. A more specific selector may be needed to beat Kinetra’s own styles.

A white screen or “There has been a critical error”

Usually a typo in functions.php. Undo your last change by FTP or the file manager. WordPress also emails the admin a link to recovery mode.

Some pages show plain text without the design

A template file such as page.php or single.php is in the child theme. Delete it.

The Setup Wizard opened when I activated the child theme

It opens only if setup was never finished. Close it, or use it to import your settings again.