> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Child themes

> When you need one, and how to set one up without breaking updates.

> [!WARNING]
>
> **This section assumes you can edit PHP and use FTP or a file manager.** If you are not editing files on a server, you probably do not need a child theme yet.

## Do I need one?

> **You need a child theme if you want to**
>
> * Add custom PHP — functions, filters, hooks
> * Add custom CSS or JavaScript
> * Change how a template renders
> * Add a page template
> * Register a custom sidebar or post type
> * Ship a customised theme to a client
> * Change `theme.json` palette or type values

> **You do not need one if you want to**
>
> * Change colors, fonts, layout, or footer content → the Customizer
> * Add menu icons → the Customizer
> * Change logo or favicon → Site Identity
> * Add widgets → Appearance → Widgets
> * Add a one-off CSS rule → Appearance → Customize → Additional CSS

> [!WARNING]
>
> **Never edit files in `wp-content/themes/vara-saas/` directly.** They are overwritten on every theme update, without warning. Anything you change there will be lost.

## Setting one up

**1. Create the folder**

`wp-content/themes/vara-saas-child/`

**2. Create style.css**

With the header below. Nothing else in this file is required.

**3. Create functions.php**

Optional but conventional. Use it for any PHP you need.

**4. Activate it**

**Appearance → Themes**. Vara SaaS Child appears alongside the parent.

### style.css

```css theme={null}
/*
Theme Name: Vara SaaS Child
Theme URI:  https://example.com/your-site
Description: Customisations for Vara SaaS.
Author:     Your Name
Author URI: https://example.com
Template:   vara-saas
Version:    1.0.0
Text Domain: vara-saas-child
*/

/* Your styles go below this line. */
```

> [!WARNING]
>
> **`Template: vara-saas` is the critical line.** Without it, WordPress treats this as a standalone theme with no parent, and your site breaks immediately. Spell the parent theme's *folder name* exactly — `vara-saas`, not `Vara SaaS`.

### functions.php

```php theme={null}
<?php
/**
 * Vara SaaS Child functions.
 */

defined( 'ABSPATH' ) || exit;

// Enqueue your own styles, after the parent's.
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'vara-saas-child',
        get_stylesheet_uri(),
        array( 'vara-saas-screen' ),
        '1.0.0'
    );
}, 20 );
```

> [!WARNING]
>
> **`defined( 'ABSPATH' ) || exit;` is not optional.** It stops the file running if it is requested directly over HTTP. Every file in a WordPress theme should start with it.

The third argument in `wp_enqueue_style` declares a dependency on the parent's stylesheet, so your CSS always loads after it.

## Overriding template files

Copy the parent file to your child theme at the **same relative path** and edit your copy.

```text theme={null}
wp-content/themes/vara-saas/single.php
        ↓ copy and edit
wp-content/themes/vara-saas-child/single.php
```

WordPress loads the child version and ignores the parent one. See [Template files](/developers/template-files.md) for what each template renders.

> [!WARNING]
>
> **Templates override completely — there is no merge.** Your copy must include everything the original had, or the missing pieces disappear. If you only need a small change, prefer a filter over a full template override.

### Prefer filters where they exist

The theme exposes filters for most of what you might want to change.

```php theme={null}
// Change the estimated reading time divisor (default 200 words per minute).
add_filter( 'vara_saas_estimated_reading_time', function ( $words_per_minute ) {
    return 250;
}, 10, 1 );
```

Full reference: [Hooks and filters](/developers/hooks-and-filters.md).

> [!WARNING]
>
> **Defining `color.palette` in your child theme replaces the parent's palette rather than appending to it.** List every color you want, not just the new ones.

## Enqueueing assets properly

```php theme={null}
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri() . '/css/my-styles.css', array(), '1.0.0' );
    wp_enqueue_script( 'my-scripts', get_stylesheet_directory_uri() . '/js/my-scripts.js', array(), '1.0.0', true );
}, 20 );

// Load in the admin too, if needed.
add_action( 'admin_enqueue_scripts', function () {
    wp_enqueue_style( 'my-admin', get_stylesheet_directory_uri() . '/css/my-admin.css', array(), '1.0.0' );
} );
```

## Common mistakes

| Mistake | Consequence |
| - | - |
| Missing `Template: vara-saas` | The child theme has no parent; the site breaks |
| Missing `ABSPATH` guard | File is executable directly over HTTP |
| Editing the parent theme | Lost on the next update |
| Forgetting `array( 'vara-saas-screen' )` | Your CSS loads before the parent's and is overridden |
| Overriding a template with a partial copy | Everything you removed disappears, with no warning |
| Adding PHP without testing | A fatal error takes down the whole site |

> [!WARNING]
>
> **Add code in small increments and test after each one.** The single most common cause of a child theme taking a site down is a large block of code added in one edit with a typo somewhere in the middle.

## Shipping to a client

> **Document what you changed**
>
> A short README covering the Customizer setup and any custom templates the client should know about.

## Related

> **[Hooks and filters](/developers/hooks-and-filters.md)**
>
> Prefer these over template overrides where they exist.

> **[Template files](/developers/template-files.md)**
>
> What to copy when you do need to override.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.