# Child theme

> How to customize Wovie with a child theme, so your changes survive updates: creating it, changing colors and styles, replacing templates, and what carries over when you activate it.

Source: https://doothemes.com/docs/wovie/customization/child-theme

---

## Overview

Updates of Wovie replace all its files. Any change you make inside the folder of Wovie is lost with the next update.

A **child theme** keeps your changes apart: it loads Wovie and adds your styles and templates on top. Wovie keeps receiving its updates, and your changes stay.

Use a child theme to:

- change colors and styles with your own CSS;
- replace a template or a part of a page with your own version;
- add your own PHP with the hooks of Wovie. See [Hooks](https://doothemes.com/docs/wovie/customization/hooks).

For a few lines of CSS, **Additional CSS** in **Appearance › Customize** is enough, and it also survives updates.

## Creating the child theme

1. In `wp-content/themes/`, create a folder named `wovie-child`.
2. Inside it, create `style.css`:

```css
/*
Theme Name: Wovie Child
Template: wovie
*/

/* Your styles go here. */
```

`Template: wovie` must match the folder name of Wovie, in lowercase.

3. Create `functions.php` to load your `style.css` after the styles of Wovie:

```php
<?php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'wovie-child',
        get_stylesheet_uri(),
        ['wovie-webapp'],
        wp_get_theme()->get('Version')
    );
}, 20);
```

4. Go to **Appearance › Themes** and activate **Wovie Child**.

Wovie must stay installed: the child theme needs it.

## What carries over

When you activate the child theme:

- **The options of Wovie** in the Customizer, such as your logos and genres, stay as they were.
- **Dbmovies** keeps all its settings, and its required pages keep working.
- **Updates** keep arriving for Wovie in **Dbmovies › Updates**, and your license stays active. See [License activation](https://doothemes.com/docs/wovie/license-activation).
- **Menus**: WordPress usually keeps them in their locations. If a location is empty, assign the menu again in **Appearance › Menus › Manage Locations**.

## Changing colors and styles

Wovie defines its colors as CSS variables. To change the accent color of buttons, links and highlights, set `--wovie-main-color` in the `style.css` of your child theme:

```css
:root {
    --wovie-main-color: #e50914;
}
```

Its lighter and darker shades follow on their own. Other variables set the backgrounds, from `--wovie-bg00` (the darkest) to `--wovie-bg04`, and the texts, from `--wovie-txt00` (white) to `--wovie-txt04`. Use the inspector of your browser to find the class of an element and change it in your `style.css`.

## Replacing a template

Copy the file from Wovie to the same path inside your child theme, and edit the copy. WordPress loads the copy instead of the original. For example, to change the sign in form:

```text
wp-content/themes/wovie/templates/auth/section-login.php
→ wp-content/themes/wovie-child/templates/auth/section-login.php
```

You can replace:

- the templates of the root folder, such as `header.php`, `footer.php` or `404.php`;
- the files of `templates/`, `parts/` and `pages/`.

:::info
A copied file does not receive the updates of Wovie. Copy as few files as you can, and after each update, compare your copies with the new originals.
:::

## What you cannot replace

- **The files of `includes/`**, with the functions and classes of Wovie. Change their behavior with filters and actions instead. See [Hooks](https://doothemes.com/docs/wovie/customization/hooks).
- **The scripts and styles of `assets/`**. Add your own CSS and JavaScript from the child theme.

To translate or change the texts of Wovie, you do not need a child theme. See [Translations](https://doothemes.com/docs/wovie/customization/translations).

## Troubleshooting

| Problem | What to do |
|---|---|
| WordPress says *The parent theme is missing* | `Template:` in the `style.css` of the child must be `wovie`, and Wovie must be installed in `wp-content/themes/wovie` |
| My styles do not apply | Check that `functions.php` loads your `style.css`, with `wovie-webapp` as a dependency so it loads after Wovie |
| My copy of a template is ignored | It must have the same path and name as the original, inside the child theme |
| A menu disappeared after activating the child theme | Assign it again in **Appearance › Menus › Manage Locations** |
| A page looks broken after an update of Wovie | One of your copied templates is out of date. Compare it with the new original, or delete the copy |