How to Customize Child Themes and Custom Styling Overrides in Multi-Language Site Networks

Understanding WordPress Multisite and Child Themes

When developing for WordPress Multisite, especially with a focus on internationalization, understanding how themes and child themes interact across different sites within the network is paramount. A common misconception is that a single child theme can seamlessly apply its customizations to all sites in a network. This is generally not the case. Each site in a WordPress Multisite network can, and often should, have its own independent theme configuration, including the choice of a parent theme and the activation of a specific child theme.

This means that if you want to apply custom styling or modifications to a parent theme across multiple sites, you’ll typically need to create and activate a separate child theme for each site that requires those customizations. While this might seem redundant, it offers granular control and prevents unintended style bleeding between sites with different language requirements or branding. We’ll explore how to manage this effectively, focusing on the practical aspects of creating and deploying these child themes.

Setting Up a Basic Child Theme for a Single Site

Before diving into multisite specifics, let’s establish the foundation: a standard WordPress child theme. This will serve as our template for creating site-specific variations.

1. Create the Child Theme Directory:

Navigate to your WordPress installation’s wp-content/themes/ directory. Inside, create a new folder for your child theme. The folder name should be descriptive and unique, for example, twentytwentyone-child-fr for a French version of the Twenty Twenty-One theme.

style.css – The Child Theme’s Header

Every child theme requires a style.css file. This file contains essential header information that WordPress uses to identify the theme. Crucially, it must include the Template line, which points to the parent theme’s directory name.

Create a style.css file within your child theme directory (e.g., wp-content/themes/twentytwentyone-child-fr/style.css) with the following content:

/*
 Theme Name:   Twenty Twenty-One Child (French)
 Theme URI:    http://example.com/twenty-twenty-one-child/
 Description:  A child theme for Twenty Twenty-One, customized for French content.
 Author:       Your Name
 Author URI:   http://yourwebsite.com
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         child-theme, twenty-twenty-one, french
 Text Domain:  twentytwentyone-child-fr
*/

/* Add your custom CSS below this line */

functions.php – Enqueuing Styles

The functions.php file is where you’ll enqueue your child theme’s stylesheet, ensuring it loads correctly and overrides the parent theme’s styles. It’s also crucial to enqueue the parent theme’s stylesheet first.

Create a functions.php file in your child theme directory (e.g., wp-content/themes/twentytwentyone-child-fr/functions.php) with the following code:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function twentytwentyone_child_enqueue_styles() {
    $parent_style = 'twentytwentyone-style'; // This is 'twentytwentyone-style' for the Twenty Twenty-One theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_child_enqueue_styles' );
?>

Note: The handle 'twentytwentyone-style' is specific to the Twenty Twenty-One theme. You’ll need to identify the correct stylesheet handle for your chosen parent theme. You can often find this by inspecting the parent theme’s functions.php file or by using browser developer tools to see which stylesheets are loaded.

Implementing Site-Specific Customizations

Now that we have a basic child theme structure, let’s consider how to apply distinct customizations for different sites within your multisite network. The strategy involves creating a unique child theme for each site that requires specific styling.

Example: French vs. German Site Styling

Suppose you have a multisite network with two primary language sites: one for France (Site ID 2) and one for Germany (Site ID 3). Both sites use the “Astra” theme as their parent.

1. Child Theme for the French Site:

Create a directory named astra-child-fr in wp-content/themes/. Populate it with:

style.css:

/*
 Theme Name:   Astra Child (French)
 Theme URI:    http://example.com/astra-child-fr/
 Description:  A child theme for Astra, customized for French content.
 Author:       Your Name
 Author URI:   http://yourwebsite.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         child-theme, astra, french
 Text Domain:  astra-child-fr
*/

/* French specific styles */
body {
    font-family: 'Merriweather Sans', sans-serif; /* Example: Using a different font */
}
.site-title a {
    color: #0055a4; /* Example: French flag-inspired color */
}

functions.php:

<?php
/**
 * Enqueue parent and child theme stylesheets for French site.
 */
function astra_child_fr_enqueue_styles() {
    $parent_style = 'astra-theme-css'; // Astra's main stylesheet handle

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style-fr',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'astra_child_fr_enqueue_styles' );
?>

2. Child Theme for the German Site:

Create a directory named astra-child-de in wp-content/themes/. Populate it with:

style.css:

/*
 Theme Name:   Astra Child (German)
 Theme URI:    http://example.com/astra-child-de/
 Description:  A child theme for Astra, customized for German content.
 Author:       Your Name
 Author URI:   http://yourwebsite.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         child-theme, astra, german
 Text Domain:  astra-child-de
*/

/* German specific styles */
body {
    font-family: 'Open Sans', sans-serif; /* Example: Different font */
}
.site-title a {
    color: #000000; /* Example: German flag-inspired color */
}

functions.php:

<?php
/**
 * Enqueue parent and child theme stylesheets for German site.
 */
function astra_child_de_enqueue_styles() {
    $parent_style = 'astra-theme-css'; // Astra's main stylesheet handle

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style-de',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'astra_child_de_enqueue_styles' );
?>

Activating Child Themes on Specific Sites

Once your site-specific child themes are in place, you need to activate them on the correct sites within your multisite network. This is done through the Network Admin dashboard.

1. Network Activate Parent Theme:

First, ensure the parent theme (e.g., Astra) is installed and network activated. Navigate to Network Admin > Plugins and activate the parent theme. Then, go to Network Admin > Themes and click “Network Activate” for the parent theme.

2. Activate Child Themes per Site:

For each individual site in your network:

• Navigate to the site’s dashboard (e.g., your-site.com/wp-admin/).
• Go to Appearance > Themes.
• You will see both the parent theme and your custom child themes listed.
• Activate the appropriate child theme for that specific site (e.g., activate “Astra Child (French)” on the French site).

By activating the child theme on a per-site basis, you ensure that only the customizations defined in that specific child theme are applied to that particular site, maintaining isolation and control over your multisite environment.

Advanced Considerations: Conditional Loading and Theme Overrides

For more complex scenarios, you might need to load styles or even template files conditionally based on the current site ID or other network-specific parameters.

Conditional Styling within a Single Child Theme

If you have a single child theme that needs to apply different styles based on the site, you can use the get_current_blog_id() function within your functions.php or style.css.

Example in functions.php to load different CSS files:

<?php
function multisite_conditional_styles() {
    $current_blog_id = get_current_blog_id();
    $parent_style = 'astra-theme-css'; // Parent theme handle

    // Enqueue parent theme style
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

    // Enqueue base child theme style
    wp_enqueue_style( 'base-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // Conditional enqueuing based on blog ID
    if ( $current_blog_id == 2 ) { // French Site ID
        wp_enqueue_style( 'french-specific-style',
            get_stylesheet_directory_uri() . '/css/french.css',
            array( 'base-child-style' ),
            wp_get_theme()->get('Version')
        );
    } elseif ( $current_blog_id == 3 ) { // German Site ID
        wp_enqueue_style( 'german-specific-style',
            get_stylesheet_directory_uri() . '/css/german.css',
            array( 'base-child-style' ),
            wp_get_theme()->get('Version')
        );
    }
}
add_action( 'wp_enqueue_scripts', 'multisite_conditional_styles' );
?>

In this scenario, you would create subdirectories css/ within your child theme folder and place french.css and german.css files there, containing the respective styles.

Overriding Parent Theme Template Files

Child themes can also override parent theme template files. If you need to modify the structure of a specific template (e.g., header.php, footer.php, single.php) for a particular site, copy the parent theme’s template file into your child theme directory with the exact same name.

For example, to override the header for the French site:

• Copy wp-content/themes/astra/header.php to wp-content/themes/astra-child-fr/header.php.
• Edit wp-content/themes/astra-child-fr/header.php to make your desired structural changes.

WordPress will automatically load the child theme’s version of the file if it exists. This principle applies to any template file within the parent theme.

Best Practices for Multisite Child Theme Management

Managing multiple child themes across a multisite network requires discipline and a clear strategy.

• Consistent Naming Conventions: Use clear and consistent naming for your child theme directories and their respective style.css headers (e.g., parenttheme-child-locale).
• Version Control: Store your child theme files in a version control system (like Git) to track changes and facilitate deployment.
• Centralized Management: While themes are activated per site, consider a centralized development workflow. You might develop all child themes locally and then deploy them to the network’s theme directory.
• Documentation: Document which child theme is active on which site and the purpose of its customizations.
• Performance: Be mindful of enqueuing too many stylesheets. Consolidate styles where possible, or use conditional loading judiciously.
• Theme Updates: When the parent theme is updated, your child theme’s customizations should generally remain intact. However, always test thoroughly after parent theme updates, as significant changes in the parent theme could potentially affect your child theme’s functionality or styling.

By adhering to these practices, you can effectively manage custom styling and theme overrides for multi-language site networks, ensuring a robust and maintainable WordPress multisite installation.