Site Templates

Using KickStarter on an Existing Site

Safely add KickStarter CSS variables and PHP helpers to an existing Kadence site by transferring styles and functions without installing the child theme.

Overview

Add KickStarter's typography, spacing, and helper functions to an existing Kadence site by copying its CSS and PHP instead of installing the Starter Template. This keeps your current content and design intact while adopting KickStarter's global system.

Never install the KickStarter child theme on a live, existing site. KickStarter is a Starter Template. Installing it directly would overwrite your current content, theme settings, and configurations. Always transfer the features manually.

For a full overview of what KickStarter includes, see the main KickStarter page and the feature guides such as Typography & Clamp Functions, Fluid Spacing, Border radius, Card Framework, Blog Post Styling, and Functions.php Features.

Before you start

Create a full backup of your existing site before making any changes. This should cover your database, active theme (and child theme) files, and Customizer settings.

If anything goes wrong while editing CSS or functions.php, restore your backup to bring the site back to its previous state.

Two ways to access KickStarter code

You need access to KickStarter's style.css and functions.php, and optionally the Styling Block preview. Use either a direct file unzip or a sandbox installation.

Download the KickStarter .zip file from your WP Templater Account. Unzip it on your computer and open style.css and functions.php in a code or text editor such as VS Code, Sublime Text, or Notepad++.

Copy the CSS and PHP from those files as you work through the steps below. This is the fastest approach if you only need the code and do not need a live Styling Block preview.

Prepare your existing site

Clean up conflicting styling before you paste any KickStarter CSS. This prevents old settings from overriding the new global variables.

Reset Kadence typography settings

Reset Kadence's built-in typography controls so they do not fight the KickStarter clamp functions.

Open typography settings

Go to Appearance → Customize → General → Typography on your existing site.

Reset all text types

Use the reset icon next to each setting for H1–H6, body text, and any other text types. Clear font sizes, line heights, and related values.

Reset responsive overrides

Check tablet and mobile tabs for each typography control and reset those overrides as well. Leave the fields empty so KickStarter's global clamp values can apply.

If you leave existing values in place, they override the clamp functions from the Typography & Clamp Functions system, and your typography will not scale as expected.

Remove existing custom CSS

Review and clean up custom CSS that duplicates or conflicts with KickStarter's global rules.

Review Additional CSS

Open Appearance → Customize → Additional CSS. Look for styling that controls typography, spacing, or layout that KickStarter will now handle globally.

Remove or comment conflicting rules

Delete or comment out (/* ... */) rules that set font sizes, line heights, colors, padding, margins, or layout properties that should move to KickStarter's system. When in doubt, comment out instead of deleting so you can restore if needed.

Before making changes, copy all existing Additional CSS to a text file. This gives you a safe reference if you need to bring specific rules back later.

Remove block-level styling in posts and pages

KickStarter relies on global styles. Block-level overrides prevent those globals from taking effect.

Check your key pages and posts for:

Custom font sizes, line heights, or colors set directly in block settings (for example, Paragraph or Advanced Heading).
Custom CSS classes added to blocks that apply their own typography or spacing.
Block-level Custom CSS under Advanced → Custom CSS on Row Layout and Section blocks that hardcodes typography, spacing, or layout.

Remove or neutralize these so the global KickStarter variables can control the design. If a block has a specific font size in its settings, it wins over any global clamp function.

On large sites, start with the most important pages first: home, services, about, contact. Then work through secondary pages over time.

Transfer KickStarter CSS in stages

KickStarter's styles live in Appearance → Customize → Additional CSS on the sandbox or inside style.css if you unzipped the files. Transfer them to your existing site's Customizer one logical section at a time.

Do not paste the entire KickStarter CSS file into your live site at once. Work in focused sections and test after each stage so you can quickly identify and fix conflicts.

Step 1: Typography base

Copy the typography section from KickStarter's CSS. This includes the clamp function variables and their application to H1–H6, body text, icon lists, and related elements.

Paste this section into Appearance → Customize → Additional CSS on your existing site.

After pasting:

Open Appearance → Customize → General → Typography.
Confirm you reset font size and line height values for H1–H6 and body text, including tablet and mobile overrides.
Browse several frontend pages to confirm headings, body text, and lists look coherent across the site.

If your previous designer used !important on font sizes or line heights in Additional CSS, page-level CSS, or block Custom CSS, those rules override KickStarter variables. Use the browser DevTools (F12) to inspect any element that looks wrong and trace which CSS rule wins.

Step 2: T-shirt sizes and line heights

Once the base typography looks stable, transfer the T-shirt size redefinitions (SM–3XL) and line height values from KickStarter.

Paste these into Additional CSS beneath the base typography section. After adding each logical chunk, reload the frontend and review headings, buttons, and text blocks that use these sizes.

Focus on pages where you use Kadence's T-shirt sizing controls to verify that they now align with the KickStarter Typography & Clamp Functions system.

Step 3: Border radius variables

Copy the global border radius section from KickStarter (the CSS variables for SM, MD, and LG radii) and paste it into Additional CSS after the typography sections.

Check the frontend for:

Buttons and form fields.
Cards and feature boxes.
Images and other rounded elements.

Confirm they use the expected radii and still align with your brand, while benefiting from the Border radius system.

Step 4: Spacing tokens

Transfer the global spacing tokens from KickStarter, including:

Content edge padding.
Section padding.
Container gaps.
The Kadence spacing scale that drives fluid spacing.

Paste this section below the border radius variables. Then browse your main pages and check that:

Sections do not become too cramped or overly spaced.
Stacks of blocks respect the Fluid Spacing rules.
There are no surprising layout shifts.

If you see unexpected changes, look for hardcoded padding or margin values on specific blocks and clean them up so the spacing tokens can do their job.

Step 5: Remaining styles and utilities

Finally, transfer the remaining CSS sections one at a time, such as:

Eyebrow heading styles and helper classes.
Card styling tied to the Card Framework.
Blog post spacing and Blog Post Styling refinements.
Utility classes and any additional layout helpers.

After each subsection:

Paste it into Additional CSS.
Reload a representative set of pages (blog posts, service pages, archives).
Confirm there are no regressions or obvious clashes with legacy layouts.

Working in small chunks keeps troubleshooting manageable and lets you stop and adjust if a specific subsection conflicts heavily with prior customizations.

Transfer KickStarter PHP functions

KickStarter's functions.php includes helper functions such as loading Customizer CSS into the block editor and disabling auto-update email notifications. Copy these into your existing site's code via a child theme or a snippets plugin.

Choose where to paste the functions

Option A: Use a child theme

If your site already uses a child theme, open Appearance → Theme File Editor and select the child theme. Edit the functions.php file and scroll to the bottom.

From KickStarter's functions.php, locate the KickStarter section marker (present in all versions after 1.4) and copy everything below that marker. Paste this block at the end of your child theme functions.php.

Option B: Use a code snippets plugin

If you do not have a child theme, avoid editing the parent theme files directly. Instead, install a snippets plugin such as Fluent Snippets, WPCode, or Code Snippets.

Create a new snippet, paste the KickStarter functions.php content starting from the section marker, and enable it site-wide. This approach survives theme updates and keeps logic separate from theme files.

For a breakdown of what each helper does, refer to Functions.php Features.

Always back up before editing or adding PHP. A syntax error in functions.php or a snippets plugin can take your site offline. If that happens, restore from backup or disable the faulty snippet via FTP or your hosting file manager.

Troubleshooting

Even with careful prep, existing sites often contain legacy workarounds and overrides. Use these checks to diagnose issues.

Styles not applying as expected

If KickStarter variables do not seem to take effect, check for higher-priority CSS in three places:

Customizer → Additional CSS under Appearance → Customize → Additional CSS for rules that set typography, spacing, or layout and may still conflict.
Row Layout / Section blocks → Custom CSS under Advanced → Custom CSS on the blocks used in affected sections.
Page Scripts → Custom CSS and JS (Kadence Blocks Pro only) for page-level rules that override global styles.

Use the browser DevTools (F12) to inspect an element that looks wrong and follow the cascade to find the winning rule, especially ones using !important.

Typography looks wrong on mobile

If headings or body text look off on tablet or mobile:

Revisit Appearance → Customize → General → Typography and confirm you reset all tablet and mobile overrides.
Look for mobile-specific CSS classes or media queries in Additional CSS, Page Scripts, or block-level Custom CSS that target smaller viewports.

Once you remove those overrides, the responsive clamp values from Typography & Clamp Functions can control scaling.

Sections look broken after adding CSS

On older builds, designers often used spacer blocks, hardcoded padding, or hidden blocks to force layouts into place. When you introduce global spacing and card styles, those workarounds can surface as odd gaps or misalignments.

As you find problem sections:

Remove unnecessary spacer blocks and replace fixed values with KickStarter spacing tokens.
Strip out hardcoded padding or margins when a global token covers the same role.
Adjust legacy content to align with the Fluid Spacing and Card Framework systems.

Expect to refine a few pages as you go; the payoff is a cleaner, more maintainable design that responds well to future changes.

Summary of key principles

Keep these rules in mind while applying KickStarter to an existing site:

Never install the KickStarter child theme on a live site; transfer features manually.
Always create and verify a full backup before you start.
Prepare your site by resetting typography and cleaning up conflicting CSS and block-level overrides.
Transfer CSS in stages: base typography, T-shirt sizes and line heights, border radius, spacing tokens, then the remaining styling.
After each stage, browse multiple frontend pages to confirm that styles apply as intended.
Track down and remove !important overrides wherever they conflict with KickStarter's global variables.
Add PHP helpers via a child theme functions.php or a code snippets plugin, never by editing a parent theme directly.

Once these steps are complete, your existing Kadence site benefits from KickStarter's global typography, spacing, and helper functions without losing your current structure or content.

Was this page helpful?

Last updated 6 days ago

Built with Documentation.AI