Child Theme Guide

A child theme lets you customize BuddyX Pro safely. Your changes survive theme updates, ensuring your customizations remain intact through all future updates.

Why Use a Child Theme?

Without Child Theme:

1. You customize colors in theme files
2. Theme gets updated
3. Your customizations disappear
4. You redo everything

With Child Theme:

1. You customize in child theme
2. Parent theme updates
3. Your customizations stay
4. All good

Do You Need One?

Your Plan	Need Child Theme?
Only using Customizer settings	No
Adding custom CSS	Maybe (can use Customizer)
Editing template files	Yes
Adding custom PHP functions	Yes
Modifying theme behavior	Yes
Overriding BuddyPress templates	Yes

Creating a Child Theme

Step 1: Create the Folder

1. Access your site via FTP or File Manager
2. Navigate to /wp-content/themes/
3. Create a new folder: buddyx-pro-child

Step 2: Create style.css

Create a file named style.css in your child theme folder:

/*
 Theme Name:   BuddyX Pro Child
 Theme URI:    https://wbcomdesigns.com/downloads/buddyx-pro-theme/
 Description:  BuddyX Pro Child Theme
 Author:       Your Name
 Template:     buddyx-pro
 Version:      1.0.0
*/

/* Add your custom CSS below this line */

Important: The Template: buddyx-pro line must match the parent theme folder name exactly.

Step 3: Create functions.php

Create functions.php in your child theme folder:

<?php
/**
 * BuddyX Pro Child Theme functions
 */

function buddyx_pro_child_enqueue_styles() {
    wp_enqueue_style(
        'buddyx-pro-parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'buddyx-pro-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'buddyx-pro-parent-style' )
    );
}
add_action( 'wp_enqueue_scripts', 'buddyx_pro_child_enqueue_styles' );

Step 4: Activate Child Theme

1. Go to Appearance → Themes
2. Find BuddyX Pro Child
3. Click Activate

Adding Custom CSS

Add CSS to your child theme’s style.css:

/* Custom header background */
.site-header {
    background-color: #1a1a2e;
}

/* Custom button color */
.btn-primary {
    background-color: #e94560;
}

---

Overriding Templates

Template overrides allow you to customize any template file without modifying the parent theme. WordPress automatically uses child theme templates when they exist.

How Template Overrides Work

1. Find the template file in the parent theme (/buddyx-pro/)
2. Copy the file to your child theme, maintaining the same folder structure
3. Edit the child theme copy
4. WordPress automatically uses your child theme version

Example: Overriding header.php

Parent theme location:

/wp-content/themes/buddyx-pro/header.php

Copy to child theme:

/wp-content/themes/buddyx-pro-child/header.php

Now edit the child theme copy. WordPress will use your version instead of the parent’s.

Common Templates to Override

Template	Purpose	Location
header.php	Site header, navigation	Root
footer.php	Site footer, widgets	Root
single.php	Single blog post	Root
page.php	Static pages	Root
archive.php	Archive listings	Root
sidebar.php	Sidebar content	Root
index.php	Main fallback template	Root
comments.php	Comment display/form	Root
search.php	Search results	Root
404.php	Not found page	Root
searchform.php	Search form	Root

Template Parts

BuddyX Pro uses template parts for modular components. These are located in the template-parts/ directory:

buddyx-pro/
├── template-parts/
│   ├── content/
│   │   ├── content.php
│   │   ├── content-page.php
│   │   ├── content-single.php
│   │   └── content-none.php
│   ├── header/
│   │   ├── site-branding.php
│   │   └── navigation.php
│   ├── footer/
│   │   └── footer-widgets.php
│   └── sidebar/
│       └── sidebar.php

To override a template part:

Parent: /buddyx-pro/template-parts/content/content-single.php
Child:  /buddyx-pro-child/template-parts/content/content-single.php

BuddyPress Template Overrides

BuddyX Pro includes BuddyPress templates that you can override:

buddyx-pro/
├── buddypress/
│   ├── members/
│   │   ├── single/
│   │   └── index.php
│   ├── groups/
│   │   ├── single/
│   │   └── index.php
│   └── activity/
│       └── index.php

Override Example - Member Profile Header:

Parent: /buddyx-pro/buddypress/members/single/member-header.php
Child:  /buddyx-pro-child/buddypress/members/single/member-header.php

WooCommerce Template Overrides

If using WooCommerce, override templates in a woocommerce/ folder:

Parent: /buddyx-pro/woocommerce/single-product.php
Child:  /buddyx-pro-child/woocommerce/single-product.php

FluentCart Template Overrides

For FluentCart templates:

Parent: /buddyx-pro/archive-fluent-products.php
Child:  /buddyx-pro-child/archive-fluent-products.php

Parent: /buddyx-pro/taxonomy-product-categories.php
Child:  /buddyx-pro-child/taxonomy-product-categories.php

---

Practical Override Examples

Example 1: Custom Single Post Layout

Override single.php to change blog post layout:

Create: /buddyx-pro-child/single.php

<?php
/**
 * Custom single post template
 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while ( have_posts() ) :
            the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                <!-- Custom featured image placement -->
                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="custom-featured-image">
                        <?php the_post_thumbnail( 'full' ); ?>
                    </div>
                <?php endif; ?>

                <header class="entry-header">
                    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

                    <!-- Custom meta display -->
                    <div class="custom-post-meta">
                        <span class="author">By <?php the_author(); ?></span>
                        <span class="date"><?php echo get_the_date(); ?></span>
                        <?php if ( function_exists( 'buddyxpro_get_reading_time_minutes' ) ) : ?>
                            <span class="reading-time"><?php printf( esc_html__( '%d min read', 'buddyxpro' ), (int) buddyxpro_get_reading_time_minutes() ); ?></span>
                        <?php endif; ?>
                    </div>
                </header>

                <div class="entry-content">
                    <?php the_content(); ?>
                </div>

                <!-- Custom author box -->
                <div class="custom-author-box">
                    <?php echo get_avatar( get_the_author_meta( 'ID' ), 100 ); ?>
                    <div class="author-info">
                        <h4><?php the_author(); ?></h4>
                        <p><?php the_author_meta( 'description' ); ?></p>
                    </div>
                </div>

            </article>
            <?php

            // Custom related posts
            get_template_part( 'template-parts/content/related-posts' );

            // Comments
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        endwhile;
        ?>
    </main>
</div>

<?php
get_sidebar();
get_footer();

Example 2: Custom Header with Top Bar

Override header.php to add a top bar:

Create: /buddyx-pro-child/header.php

<?php
/**
 * Custom header with top bar
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<div id="page" class="site">

    <!-- Custom Top Bar -->
    <div class="custom-top-bar">
        <div class="container">
            <div class="top-bar-left">
                <span class="phone">📞 <?php echo get_theme_mod( 'phone_number', '1-800-555-1234' ); ?></span>
                <span class="email">✉️ <?php echo get_theme_mod( 'email_address', 'info@example.com' ); ?></span>
            </div>
            <div class="top-bar-right">
                <?php
                // Social icons
                if ( function_exists( 'buddyx_social_icons' ) ) {
                    buddyx_social_icons();
                }
                ?>
            </div>
        </div>
    </div>

    <!-- Original header content -->
    <header id="masthead" class="site-header">
        <?php get_template_part( 'template-parts/header-settings/site-branding' ); ?>
        <?php get_template_part( 'template-parts/header-settings/navigation' ); ?>
    </header>

Add CSS in style.css:

.custom-top-bar {
    background: #1a1a2e;
    color: #ffffff;
    padding: 10px 0;
    font-size: 14px;
}

.custom-top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-top-bar .phone,
.custom-top-bar .email {
    margin-right: 20px;
}

Example 3: Custom Archive Template

Override archive.php for a grid layout:

Create: /buddyx-pro-child/archive.php

<?php
/**
 * Custom archive with grid layout
 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <header class="archive-header">
            <?php
            the_archive_title( '<h1 class="archive-title">', '</h1>' );
            the_archive_description( '<div class="archive-description">', '</div>' );
            ?>
        </header>

        <?php if ( have_posts() ) : ?>

            <div class="posts-grid">
                <?php
                while ( have_posts() ) :
                    the_post();
                    ?>
                    <article class="grid-item">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <a href="<?php the_permalink(); ?>" class="grid-thumbnail">
                                <?php the_post_thumbnail( 'medium_large' ); ?>
                            </a>
                        <?php endif; ?>

                        <div class="grid-content">
                            <h2 class="grid-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h2>
                            <div class="grid-excerpt">
                                <?php the_excerpt(); ?>
                            </div>
                            <a href="<?php the_permalink(); ?>" class="read-more">Read More →</a>
                        </div>
                    </article>
                    <?php
                endwhile;
                ?>
            </div>

            <?php the_posts_pagination(); ?>

        <?php else : ?>
            <?php get_template_part( 'template-parts/content/content-none' ); ?>
        <?php endif; ?>

    </main>
</div>

<?php
get_sidebar();
get_footer();

Add CSS:

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.grid-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
}

.grid-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.grid-content {
    padding: 20px;
}

.grid-title a {
    color: #1a1a2e;
    text-decoration: none;
}

.read-more {
    color: #e94560;
    font-weight: 600;
}

---

Using Theme Hooks Instead of Overrides

Before overriding a template, check if you can use hooks instead. Hooks are cleaner and less likely to cause issues after theme updates.

Adding Content via Hooks

<?php
/**
 * Add content using hooks (in child theme functions.php)
 */

// Add content before the header
add_action( 'buddyx_before_header', function() {
    echo '<div class="announcement-bar">Free shipping on orders over $50!</div>';
} );

// Add content after the main content
add_action( 'buddyx_after_main_content', function() {
    echo '<div class="newsletter-cta">Subscribe to our newsletter!</div>';
} );

// Add content to footer
add_action( 'buddyx_footer_bottom', function() {
    echo '<p class="custom-copyright">Custom copyright text here</p>';
} );

When to Use Hooks vs Template Overrides

Use Hooks When…	Use Template Override When…
Adding content before/after sections	Changing HTML structure
Inserting widgets or shortcodes	Reordering major sections
Adding simple text or elements	Removing default elements
Minor additions to pages	Complete layout redesign

See the Hooks and Filters documentation for a complete list of available hooks.

---

Template Override Best Practices

1. Copy Complete Files

Always copy the entire template file, not just parts. This ensures all required code is present.

2. Check After Theme Updates

After BuddyX Pro updates, compare your overridden templates with the new parent versions. Important changes may need to be incorporated.

3. Comment Your Changes

Add comments to document your customizations:

<?php
/**
 * Custom single post template
 *
 * Modifications from parent:
 * - Added custom author box (line 45-55)
 * - Changed featured image size (line 20)
 * - Added reading time display (line 30)
 *
 * @modified 2024-01-15
 */

4. Use Template Parts for Reusable Code

Create custom template parts for code you’ll use in multiple places:

Create: /buddyx-pro-child/template-parts/custom/author-box.php

<?php
/**
 * Custom author box template part
 */
$author_id = get_the_author_meta( 'ID' );
?>
<div class="custom-author-box">
    <?php echo get_avatar( $author_id, 100 ); ?>
    <div class="author-info">
        <h4><?php the_author(); ?></h4>
        <p><?php the_author_meta( 'description' ); ?></p>
    </div>
</div>

Use in templates:

<?php get_template_part( 'template-parts/custom/author-box' ); ?>

5. Test on Staging First

Always test template overrides on a staging site before deploying to production.

---

Troubleshooting

Child theme not appearing:

• Check Template: buddyx-pro matches parent folder name exactly
• Ensure style.css has proper header format
• Verify the child theme folder is in /wp-content/themes/

Styles not loading:

• Check functions.php enqueue code is correct
• Clear browser cache and site cache
• Verify parent style dependency in enqueue function

Template override not working:

• Confirm file path matches exactly (including subfolder structure)
• Clear any caching plugins
• Check for PHP errors in the template file
• Verify file permissions (644 for files)

BuddyPress templates not overriding:

• Ensure folder structure is buddyx-pro-child/buddypress/
• Check BuddyPress template compatibility
• Clear BuddyPress template cache

White screen after override:

• Enable WP_DEBUG to see errors
• Check for PHP syntax errors
• Verify all required functions exist
• Restore original template and override incrementally

---

Related Documentation

• Hooks and Filters - Complete list of theme hooks
• Template Hierarchy - WordPress template loading order
• CSS Customization - Styling without template overrides

---

Got a question? We’re a friendly team - happy to help.

• Visit our Documentation Portal
• Email us at support@wbcomdesigns.com