Setting Up and Registering Child Themes and Custom Styling Overrides in Multi-Language Site Networks

Understanding WordPress Multisite and Internationalization (i18n)

WordPress Multisite offers a powerful way to manage multiple websites from a single WordPress installation. When dealing with internationalization (i18n) within a Multisite network, especially when distinct styling is required per language or per site, the approach to theme development and customization becomes more nuanced. This guide focuses on setting up child themes and implementing custom styling overrides specifically for a multi-language Multisite environment, assuming a foundational understanding of WordPress theme structure and basic PHP.

Structuring Child Themes for Multisite and Multi-Language

The standard WordPress child theme structure remains the primary mechanism. However, in a Multisite context, you’ll typically want a distinct child theme for each primary theme you’re customizing. If your multi-language setup relies on separate sites within the network for each language (a common and robust approach), then each of these sites might inherit from the same parent theme but require its own child theme for language-specific styling. If you’re using a plugin like WPML or Polylang to manage languages within a single site, the customization might be more localized within that single site’s theme, but the principles of child theming still apply for maintainability.

Let’s assume a scenario where you have a Multisite network with separate sites for English (site ID 1) and French (site ID 2), both using a parent theme named “ParentTheme”. We’ll create two child themes: “ChildTheme-EN” and “ChildTheme-FR”.

Creating the English Child Theme (ChildTheme-EN)

Navigate to your WordPress installation’s wp-content/themes/ directory. Create a new folder named childtheme-en.

Inside childtheme-en, create the essential style.css and functions.php files.

style.css for ChildTheme-EN

/*
 Theme Name:  ChildTheme-EN
 Theme URI:   http://example.com/childtheme-en/
 Description: Child theme for ParentTheme - English version.
 Author:      Your Name
 Author URI:  http://example.com
 Template:    ParentTheme
 Version:     1.0.0
 License:     GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: childtheme-en
*/

functions.php for ChildTheme-EN

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function childtheme_en_enqueue_styles() {
    $parent_style = 'parent-style'; // This is 'ParentTheme' in the parent theme's style.css header

    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'childtheme_en_enqueue_styles' );

// Add any other language-specific functions or overrides here.
?>

Creating the French Child Theme (ChildTheme-FR)

Similarly, create a folder named childtheme-fr in wp-content/themes/ and add its style.css and functions.php.

style.css for ChildTheme-FR

/*
 Theme Name:  ChildTheme-FR
 Theme URI:   http://example.com/childtheme-fr/
 Description: Child theme for ParentTheme - French version.
 Author:      Your Name
 Author URI:  http://example.com
 Template:    ParentTheme
 Version:     1.0.0
 License:     GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: childtheme-fr
*/

functions.php for ChildTheme-FR

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function childtheme_fr_enqueue_styles() {
    $parent_style = 'parent-style'; // This is 'ParentTheme' in the parent theme's style.css header

    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'childtheme_fr_enqueue_styles' );

// Add any other language-specific functions or overrides here.
?>

Activating Child Themes in Multisite

Activation in a Multisite network is managed at the network admin level for network-wide themes, or at the individual site admin level for site-specific themes. For this scenario, we’ll activate them on their respective sites.

Network Activation (Optional but Recommended for Consistency)

As a network administrator, you can choose to network activate both child themes. This makes them available for all sites. Navigate to My Sites > Network Admin > Themes. Find ChildTheme-EN and ChildTheme-FR and click Network Activate.

Site-Specific Activation

Now, log in as the administrator of the English site (Site ID 1). Navigate to Appearance > Themes. Activate ChildTheme-EN. Then, log in as the administrator of the French site (Site ID 2) and activate ChildTheme-FR.

Implementing Custom Styling Overrides

With the child themes activated, you can now add custom CSS. The best practice is to place your custom CSS within the child theme’s style.css file. Because the child theme’s stylesheet is enqueued after the parent theme’s stylesheet (as defined in functions.php), any styles defined in the child theme will naturally override those in the parent theme if they target the same elements with the same specificity.

Example: French-Specific Styling

Let’s say the parent theme has a global navigation menu with a specific background color, and you want to change it for the French site. You would add the following to wp-content/themes/childtheme-fr/style.css:

style.css (ChildTheme-FR) – Customizations

/* Import parent theme styles */
@import url("../ParentTheme/style.css");

/* French-specific overrides */
.main-navigation {
    background-color: #e0f7fa; /* Light cyan for French site */
    border-bottom: 2px solid #0077cc; /* Darker blue border */
}

.main-navigation a {
    color: #004d80; /* Darker blue link color */
    font-weight: bold;
}

/* Example: Adjusting footer text for French */
.site-footer p {
    font-size: 0.9em;
    color: #555;
}

Important Note on @import: While @import is a simple way to include parent styles, it can negatively impact performance as it creates an additional HTTP request. The wp_enqueue_style in functions.php is the preferred WordPress way. The example above shows @import for clarity on CSS specificity, but your functions.php correctly handles enqueuing. If you *only* rely on wp_enqueue_style in functions.php, the parent theme’s CSS will be loaded, and your child theme’s CSS will be loaded after it, achieving the override. The @import is often seen in older child theme examples but is generally discouraged for production sites.

Example: English-Specific Styling

For the English site, you might want a different header background and font for headings.

style.css (ChildTheme-EN) – Customizations

/* Import parent theme styles */
@import url("../ParentTheme/style.css");

/* English-specific overrides */
.site-header {
    background-color: #fff9c4; /* Light yellow for English site */
    padding: 20px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif; /* Serif font for headings */
    color: #5d4037; /* Brownish color */
}

Advanced Considerations and Diagnostics

Specificity Wars: When Overrides Don’t Work

The most common reason custom styles don’t apply is CSS specificity. If a style from the parent theme is not being overridden, it likely has higher specificity. You can inspect elements using your browser’s developer tools (e.g., Chrome DevTools, Firefox Developer Edition) to see which styles are being applied and their origin.

Diagnostic Steps:

• Right-click on the element you want to style and select “Inspect” or “Inspect Element”.
• In the Styles pane of the developer tools, look for the CSS rules that apply to the selected element.
• Note the selector used by the parent theme. If your child theme’s selector is less specific, it won’t override.
• Solution: Increase the specificity of your child theme’s selector. For example, if the parent uses .site-header and you use .site-header, it might not override if the parent’s rule is more complex (e.g., body.site-header or has an ID). You might need to use a more specific selector like body #site-header or even add !important (use sparingly as a last resort).

Leveraging Site IDs for Conditional Styling

While separate child themes are clean, sometimes you might want to apply styles conditionally within a single child theme, especially if you’re using a plugin that manages languages on a single site or if you have a very simple Multisite setup. You can use the global $blog_id variable in PHP within your child theme’s functions.php to conditionally enqueue stylesheets or add inline styles.

Conditional Enqueuing in functions.php

<?php
/**
 * Enqueue parent and child theme stylesheets, with conditional French styles.
 */
function my_multisite_conditional_enqueue_styles() {
    $parent_style = 'parent-style'; // Name of parent theme's stylesheet handle

    // Enqueue the main child theme stylesheet
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( $parent_style ), wp_get_theme()->get('Version') );

    // Get the current blog ID
    $blog_id = get_current_blog_id();

    // Enqueue French-specific stylesheet if on the French site (assuming Site ID 2)
    if ( 2 === $blog_id ) {
        wp_enqueue_style( 'child-style-fr', get_template_directory_uri() . '/css/style-fr.css', array( 'child-style' ), wp_get_theme()->get('Version') );
    }
    // Enqueue English-specific stylesheet if on the English site (assuming Site ID 1)
    elseif ( 1 === $blog_id ) {
        wp_enqueue_style( 'child-style-en', get_template_directory_uri() . '/css/style-en.css', array( 'child-style' ), wp_get_theme()->get('Version') );
    }
}
add_action( 'wp_enqueue_scripts', 'my_multisite_conditional_enqueue_styles' );
?>

In this example, you would create a css folder within your child theme directory (e.g., wp-content/themes/your-child-theme/css/) and place style-fr.css and style-en.css within it, containing the respective language-specific overrides.

Using body_class() for CSS Hooks

WordPress automatically adds various classes to the <body> tag via the body_class() function. Multisite adds the blog-id-X class (where X is the site ID). You can leverage this for CSS targeting.

Example CSS using body_class()

/* Styles specific to Site ID 2 (French) */
.blog-id-2 .main-navigation {
    background-color: #e0f7fa;
}

/* Styles specific to Site ID 1 (English) */
.blog-id-1 .site-header {
    background-color: #fff9c4;
}

If you need to add custom classes to the body tag for more granular control, you can hook into the body_class filter in your child theme’s functions.php.

Adding Custom Body Classes

<?php
/**
 * Add custom body classes for language-specific styling.
 */
function my_custom_body_classes( $classes ) {
    // Add a class for the current language if using a translation plugin
    // Example for WPML:
    if ( defined('ICL_LANGUAGE_CODE') ) {
        $classes[] = 'language-' . ICL_LANGUAGE_CODE;
    }

    // Add a class based on site ID if not using a translation plugin on single site
    $classes[] = 'blog-id-' . get_current_blog_id();

    return $classes;
}
add_filter( 'body_class', 'my_custom_body_classes' );
?>

This allows for more descriptive CSS selectors like .language-fr .site-header.

Troubleshooting Theme File Loading

Ensure your Template: ParentTheme line in the child theme’s style.css is accurate and matches the directory name of the parent theme. Incorrectly named parent themes are a common cause of child themes not being recognized or functioning correctly.

Verify that the functions.php file in your child theme is correctly enqueuing the parent theme’s stylesheet. If the parent theme’s styles are missing, your child theme’s styles might not override as expected, or the site might look unstyled.

For Multisite, always double-check which theme is activated for the specific site you are testing. A common mistake is to activate the wrong child theme for a particular language site.