Use a child theme

  • advanced
  • child-theme
  • theme-setup
  • php

A child theme sits on top of Dirigible Studio. Parent theme updates replace the parent's files. They don't replace the child's, so PHP and template copies you put there survive.

Most sites already have one. Theme Setup creates and activates it on the Install step. Check Appearance → Themes: the active theme is named after your site, with Child Theme in the name, and Dirigible Studio listed as the parent.

Dirigible Customizer settings (palette, header, scripts, and the rest) stay with the site when you switch child themes. Additional CSS does not. Export it before you switch.

When you need a child theme

You want Use
Spacing, hide on phones, a scroll animation A magic class
A look the Customizer and magic classes don't cover Additional CSS, or Section block CSS for one section
A short PHP snippet, easy to turn off Code Snippets
PHP that should last, or a copied theme template A child theme

Don't edit the parent Dirigible Studio theme. The next update overwrites it.

Get a child theme from Theme Setup

If Appearance → Themes doesn't show a child as active:

  1. Go to Appearance → Theme Setup.
  2. Open the Install step (Install & Activate).
  3. Click Install if the Child theme row still says No child theme.
  4. When it's ready, the row shows the child theme's name with Active.

Theme Setup names the child after your site title, for example Acme Bakery Child Theme.

If the wizard says it can't create a child theme because file modifications are disabled, your host is blocking WordPress from writing theme files. Ask them to allow it, or have someone with file access create the child.

Confirm it's active

  1. Go to Appearance → Themes.
  2. The active theme should be the child. Dirigible Studio is the parent underneath.

Activate the child if it exists but isn't current. Leave the parent installed; the child needs it.

Add PHP to the child

Put PHP in the child's functions.php. The hooks and filters guide has copy-paste examples for adding content around the header, posts, and pop-up.

Test on a staging copy first. A PHP error can take the site down. Keep SFTP or your host's file manager handy so you can undo the change.

Things to know

  • You don't need a child theme for colors, fonts, the header, or Additional CSS.
  • Switching from one child to another keeps Dirigible settings. Export Additional CSS first, then paste it into the new child's Additional CSS.
  • Don't copy the whole parent into the child. Only add the PHP or template files you're changing.

Related guides