Skip to content
NovaSpark Docs v1.0.0
Live Demo Support

Getting started

Child theme

Keep your own CSS, PHP and template changes safe from theme updates by putting them in a child theme.

A child theme is a small second theme that sits on top of NovaSpark. WordPress loads NovaSpark first, then lets the child override anything it wants. Your changes live in the child, so updating NovaSpark never overwrites them.

You may not need one. Adding CSS through Theme Options → Custom CSS / JS is update-safe on its own, and covers most styling changes. Reach for a child theme when you want to change a template file or add PHP.

Install the child theme #

One is included in your download, so there is nothing to build.

Appearance then Themes, showing NovaSpark active alongside NovaSpark Child ready to activate.
Both themes must be installed; only the child is activated.
  1. Install NovaSpark firstThe child theme cannot be activated on its own — it needs its parent present. See Installation.
  2. Upload the child themeGo to Appearance → Themes → Add New Theme → Upload Theme and choose novaspark-child.zip from your unzipped download.
  3. Activate itClick Activate. Your site will look exactly the same — a child theme changes nothing until you put something in it.

Your settings carry over. Theme Options, Global Blocks, menus and imported demo content all live in the database, not in the theme folder, so switching to the child theme keeps everything. Widgets are the one exception WordPress sometimes shuffles — check Appearance → Widgets afterwards.

Add your own CSS #

Write it in the child theme’s style.css. It loads after NovaSpark’s own stylesheet, so your rules win without needing !important.

Prefer NovaSpark’s design tokens over fixed values. A token follows whatever you set in Theme Options → Design, and keeps working when the site switches to dark mode — a hardcoded colour does neither:

novaspark-child/style.css 
/* Follows Theme Options, and adapts in dark mode. */
.my-banner {
    background: rgb(var(--nk-primary));
    color: rgb(var(--nk-primary-contrast));
    border-radius: var(--nk-radius-brand);
    padding: 1rem 1.5rem;
}

Useful ones to know: --nk-primary, --nk-secondary and --nk-accent for brand colours (each with a matching -contrast for readable text on top), --nk-heading-text and --nk-body-text for type, --nk-radius-brand for rounding, and --nk-section-spacing-sm through -xl for vertical rhythm between sections. The full list is on the Customization page.

Override a template #

To change the markup NovaSpark outputs, copy the file you want from the parent theme into the child theme, keeping the same folder path, and edit the copy. WordPress uses the child’s version automatically.

Copy, keeping the path 
novaspark/template-parts/content/single-modern.php        ← copy this
novaspark-child/template-parts/content/single-modern.php  ← to here, then edit

The files most people change:

FileControls
template-parts/content/content.phpHow a post appears in a blog listing.
template-parts/content/single-classic.php
single-modern.php
single-overlay.php		The three single-post styles. Which one is used comes from Theme Options → Blog Posts.
template-parts/content/single-meta.phpThe author, date and category line on a post.
template-parts/content/single-share.phpThe share buttons.
template-parts/fallback/header.php
template-parts/fallback/footer.php		What shows when no Global Block is assigned as your header or footer.
comments.phpThe comment list and form.
404.phpThe “page not found” page.

Copy only what you change. Every file you copy stops receiving updates and becomes yours to maintain. Copying a handful of templates is normal; copying the whole theme defeats the point of using a child theme at all.

Add PHP #

The child theme’s functions.php runs before NovaSpark’s. It is the right place for your own hooks. It already contains a few commented-out examples — delete them or use them as a starting point.

novaspark-child/functions.php 
// Put an announcement bar above the header on every page.
add_action( 'nk_before_header', function (): void {
    echo '<div class="my-topbar">'
        . esc_html__( 'Free shipping this week', 'novaspark-child' )
        . '</div>';
} );

NovaSpark provides hooks around the header, footer and page cover, plus filters for many of its own decisions. They are listed on the Customization page.

A PHP mistake takes the site down. A missing semicolon in functions.php produces a white screen, admin included. Edit it over FTP rather than in Appearance → Theme File Editor, so you can undo a bad save — and keep a copy of the working version before you change it.

What’s inside the child theme #

FilePurpose
style.cssIdentifies the theme to WordPress, and holds your CSS.
functions.phpLoads NovaSpark’s stylesheet before yours, and holds your PHP.
screenshot.pngThe thumbnail in Appearance → Themes.

That is the whole thing. A child theme is deliberately almost empty — everything it does not define, it inherits.

Do not rename either folder. The child finds its parent by the exact folder name novaspark. Renaming either one breaks the link, and WordPress will refuse to activate the child theme.

Esc