BuddyX
Get BuddyX Pro

Create a BuddyX child theme

Free theme

The safe, upgrade-proof home for every customization you make to BuddyX.

Why a child theme

BuddyX ships updates. If you edit the theme's own files - functions.php, a template part, style.css - your next update overwrites every change you made. A child theme solves this permanently: it is a separate, tiny theme that inherits everything from BuddyX (the "parent") and lets you override only the pieces you want. Updates to the parent never touch your child theme.

Use a child theme for all of the following:

Customization Goes in the child theme
Custom CSS style.css (or a separate enqueued stylesheet)
Custom PHP - hooks, filters, functions functions.php
Template overrides a copy of the parent's template file at the same relative path
Extra assets - images, fonts, scripts any folder inside the child theme

Requirements: PHP 8.0 or newer (same floor as the parent theme) and BuddyX installed and present. The child does not replace the parent - both must stay installed, and the parent stays inactive-but-present while the child is the active theme.

Option A: Download the ready-made child theme

The fastest start. Wbcom maintains a blank BuddyX child theme with the header and enqueue already wired:

github.com/wbcomdesigns/buddyx-child

  1. Download the ZIP from the repository.
  2. Go to Appearance -> Themes -> Add New -> Upload Theme and upload it.
  3. Make sure the BuddyX parent theme is also installed (do not delete it).
  4. Activate BuddyX Child.

Your site looks identical to before - the child inherits everything. Now add your CSS and PHP into style.css and functions.php.

Option B: Build the minimal child theme by hand

A working BuddyX child theme is exactly two files in a new folder under wp-content/themes/.

wp-content/themes/
├── buddyx/            <- the parent (do not edit)
└── buddyx-child/      <- your child theme
    ├── style.css
    └── functions.php

1. style.css - the header that binds child to parent

The Template: line is the one that matters. It must be the folder name of the parent theme, exactly buddyx. Without it WordPress treats this as a standalone theme, not a child.

/*
Theme Name:   BuddyX Child
Theme URI:    https://github.com/wbcomdesigns/buddyx-child
Description:  Child theme for BuddyX. All customizations live here.
Author:       Your Name
Author URI:   https://example.com
Template:     buddyx
Version:      1.0.0
Requires PHP: 8.0
Text Domain:  buddyx-child
*/

/* Your custom CSS goes below this line. */

2. functions.php - load the parent styles, then yours

BuddyX serves its compiled CSS through a manifest (see Assets and the manifest); its always-on global stylesheet is registered under the handle buddyx-global. Enqueue your child stylesheet with that handle as a dependency so your rules load after the parent's and win the cascade.

<?php
/**
 * BuddyX Child - functions and definitions.
 *
 * @package buddyx-child
 */

// Prevent direct access.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Enqueue the child theme stylesheet after the parent's global styles.
 */
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'buddyx-child-style',
		get_stylesheet_uri(),                       // the child's own style.css
		array( 'buddyx-global' ),                   // load after the parent global stylesheet
		wp_get_theme()->get( 'Version' )            // cache-bust on child version bump
	);
}, 20 ); // priority 20 = after the parent enqueues at the default 10.

Notes:

  • get_stylesheet_uri() always resolves to the child style.css. get_stylesheet_directory() is the child folder; get_template_directory() is the parent folder. Use the right one for the file you mean.
  • If the buddyx-global handle is ever missing on a page (for example a stripped template), the dependency is simply skipped - your stylesheet still loads. You do not need to enqueue the parent style.css itself; the parent's root style.css holds only the theme header, not the compiled CSS.
  • Priority 20 guarantees your enqueue runs after BuddyX's own enqueue, which registers at the default priority 10.

3. Activate

Appearance -> Themes, hover BuddyX Child, click Activate. Done - you now have a safe place for every change.

Where each kind of customization goes

Custom CSS

Put small overrides directly in the child style.css. For anything larger, enqueue a dedicated file so your style.css stays a clean entry point:

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'buddyx-child-extras',
		get_stylesheet_directory_uri() . '/assets/css/extras.css',
		array( 'buddyx-global' ),
		wp_get_theme()->get( 'Version' )
	);
}, 20 );

Style with the theme's CSS custom properties rather than hard-coded colors so your overrides track the active color preset and dark mode automatically:

.my-callout {
	background: var(--bx-color-bg-elevated);
	color: var(--bx-color-fg);
	border: 1px solid var(--bx-color-accent);
	border-radius: var(--bx-radius-md);
}

The full variable contract is in Design tokens.

Custom PHP - hooks and filters

The child functions.php loads before the parent's, and both run. Add your add_action() / add_filter() calls here. BuddyX exposes named action and filter hooks throughout its templates - for example, replace the footer copyright:

add_filter( 'buddyx_footer_copyright_text', function ( $text ) {
	return '&copy; ' . date( 'Y' ) . ' My Company. All rights reserved.';
} );

Or inject markup after the site header using a theme action hook:

add_action( 'buddyx_header_after', function () {
	echo '<div class="site-announcement">Free shipping this week.</div>';
} );

See Action hooks and Filter hooks for the full inventory of hooks and where each one fires.

Template overrides

BuddyX loads its markup with standard WordPress get_template_part() and the normal template hierarchy, so overrides work the ordinary WordPress way: copy the parent template file into your child theme at the same relative path, then edit the copy. WordPress loads the child copy instead of the parent's.

For example, to customize the footer info template part:

Parent: wp-content/themes/buddyx/template-parts/footer/info.php
Child:  wp-content/themes/buddyx-child/template-parts/footer/info.php

Copy the file, keep the folder structure identical, and change only what you need. Template structure and overrides covers the rules, the safe files to copy, and how to keep overrides maintainable across parent updates.

Extra assets

Images, fonts, and scripts can live anywhere inside the child folder. Reference them with get_stylesheet_directory_uri():

$logo = get_stylesheet_directory_uri() . '/assets/img/my-logo.svg';

Ground rules

  1. Never edit the parent theme. Every change belongs in the child. If you find yourself editing wp-content/themes/buddyx/..., stop and move it to the child.
  2. Keep the parent installed. A child cannot render without its parent present.
  3. Match relative paths exactly when overriding templates - template-parts/footer/info.php in the parent must be template-parts/footer/info.php in the child.
  4. Prefer hooks and filters over template copies. A filter callback survives parent template rewrites; a copied template can silently go stale when the parent's version changes. Copy a template only when no hook exposes the point you need.
  5. Use tokens, not raw colors, so your CSS respects presets and dark mode.

Related