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

Understanding WordPress Multisite and Internationalization (i18n)

WordPress Multisite allows for the creation of a network of sites from a single WordPress installation. When combined with internationalization (i18n) plugins like WPML or Polylang, it enables the management of multiple language versions of your website, often on a per-site basis within the network. This architecture presents unique challenges and opportunities when it comes to theme development and custom styling. Directly modifying parent themes is strongly discouraged in such environments due to update conflicts and the potential for breaking functionality across multiple sites or languages. The robust and recommended approach is to leverage child themes.

This guide focuses on building child themes and implementing custom CSS overrides specifically for a multi-language WordPress Multisite network. We’ll cover the fundamental setup of a child theme and then delve into strategies for applying language-specific styles.

Creating a Basic Child Theme for Multisite

The foundation of any custom theme modification in WordPress is the child theme. For Multisite, the process is identical to a single-site installation, but the context of where you’ll activate it becomes crucial. You’ll create a child theme for a specific parent theme that is intended to be used across your network, or at least on the sites where you need these customizations.

First, navigate to your WordPress installation’s theme directory. For Multisite, this is typically located at wp-content/themes/. Inside this directory, create a new folder for your child theme. The folder name should be unique and descriptive, for example, my-network-child.

Within your child theme’s folder, you need at least two files: style.css and functions.php.

The style.css File

The style.css file serves two purposes: it contains the actual CSS for your child theme, and it includes a header comment block that WordPress uses to identify the theme. This header is mandatory.

Create the style.css file in your child theme’s directory (e.g., wp-content/themes/my-network-child/style.css) and add the following header. Replace the placeholder values with your theme’s specific details and, crucially, the Template line with the directory name of your parent theme.

For example, if your parent theme is named “Twenty Twenty-Two” and its directory is twentytwentytwo, your header would look like this:

/*
 Theme Name: My Network Child Theme
 Theme URI: https://example.com/my-network-child/
 Description: A child theme for custom styling across my WordPress Multisite network.
 Author: Your Name
 Author URI: https://example.com/
 Template: twentytwentytwo
 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, multisite, multilingual
 Text Domain: my-network-child
*/

/* Add your custom CSS below this line */

The functions.php File

The functions.php file is used to enqueue stylesheets. It’s essential to correctly enqueue your child theme’s stylesheet and the parent theme’s stylesheet. This ensures that styles are loaded in the correct order, with your child theme’s styles overriding the parent’s where necessary.

Create the functions.php file in your child theme’s directory (e.g., wp-content/themes/my-network-child/functions.php) and add the following PHP code:

/**
 * Enqueue parent and child theme stylesheets.
 */
function my_network_child_enqueue_styles() {
    $parent_style = 'parent-style'; // This is 'twentytwentytwo-style' for Twenty Twenty-Two

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

    // Enqueue child theme stylesheet
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ), // Dependencies: parent theme's stylesheet
        wp_get_theme()->get('Version') // Use the version from the child theme's style.css header
    );
}
add_action( 'wp_enqueue_scripts', 'my_network_child_enqueue_styles' );

Important Note on Parent Stylesheet Handle: The handle for the parent theme’s stylesheet ($parent_style) is crucial. It’s not always simply 'parent-style'. You need to find the actual handle used by the parent theme. A common way to find this is by inspecting the output of wp_head() in your browser’s developer tools and looking for the <link rel="stylesheet" ...> tag for the parent theme, or by examining the parent theme’s functions.php file for its wp_enqueue_style() calls. For example, the “Twenty Twenty-Two” theme uses 'twentytwentytwo-style'.

After creating these files, you can activate your child theme. In a Multisite network, you activate themes via the Network Admin dashboard (Network Admin > Themes). You can then enable the child theme for individual sites within the network from their respective Site Admin dashboards (Appearance > Themes).

Applying Language-Specific Styling

The real challenge in a multi-language Multisite setup is applying styles that are unique to specific languages. This typically involves using CSS selectors that target the language attribute of the <html> tag, which is usually set by your internationalization plugin.

Using Language Attributes in CSS

Most popular multilingual plugins (like WPML and Polylang) add a specific class or attribute to the <body> or <html> tag to indicate the current language. For example, Polylang might add a class like lang-en, lang-fr, etc., to the <body> tag. WPML often adds a lang attribute to the <html> tag, such as <html lang="en-US">.

You can leverage these attributes directly in your child theme’s style.css file to create language-specific rules. Let’s assume your plugin adds a lang attribute to the <html> tag.

To target elements for English content, you might use:

html[lang="en-US"] .site-title {
    font-size: 2.5em;
    color: #336699;
}

html[lang="en-US"] .main-navigation ul li a {
    text-transform: uppercase;
}

And for French content:

html[lang="fr-FR"] .site-title {
    font-size: 2.2em;
    color: #993333;
}

html[lang="fr-FR"] .main-navigation ul li a {
    text-transform: lowercase;
    font-style: italic;
}

Finding the Correct Language Identifier: The exact values for lang="en-US" or lang="fr-FR" depend on your plugin’s configuration and the locales you’ve set up. The most reliable way to determine these is to:

1. Visit a page on your site in the specific language.
2. Use your browser’s developer tools (Inspect Element).
3. Examine the <html> tag for a lang attribute or the <body> tag for language-specific classes.

If your plugin uses body classes (e.g., Polylang), your CSS would look like this:

body.lang-en .site-title {
    font-size: 2.5em;
    color: #336699;
}

body.lang-fr .site-title {
    font-size: 2.2em;
    color: #993333;
}

Conditional Loading of Stylesheets (Advanced)

While targeting language attributes in a single CSS file is often sufficient, for very complex styling needs or to manage large amounts of language-specific CSS, you might consider loading separate stylesheets conditionally. This can be achieved by modifying your child theme’s functions.php.

Here’s an example of how you might enqueue a separate stylesheet for French content:

/**
 * Enqueue parent, child, and language-specific stylesheets.
 */
function my_network_child_enqueue_conditional_styles() {
    $parent_style = 'parent-style'; // Replace with actual parent style handle

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

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

    // Get the current language (assuming Polylang or similar)
    // This might need adjustment based on your i18n plugin
    $current_language = '';
    if ( function_exists('pll_current_language') ) {
        $current_language = pll_current_language('locale'); // e.g., 'en_US', 'fr_FR'
    } elseif ( function_exists('icl_get_languages') ) {
        global $sitepress;
        $current_language = $sitepress->get_current_language(); // e.g., 'en', 'fr'
    }

    // Enqueue French-specific stylesheet if the language is French
    if ( ! empty($current_language) && ( $current_language === 'fr_FR' || $current_language === 'fr' ) ) {
        wp_enqueue_style( 'child-style-fr',
            get_stylesheet_directory_uri() . '/css/style-fr.css', // Path to your French-specific CSS file
            array( 'child-style' ), // Dependency: main child style
            wp_get_theme()->get('Version')
        );
    }

    // Add more conditions for other languages as needed
    // Example for English:
    /*
    if ( ! empty($current_language) && ( $current_language === 'en_US' || $current_language === 'en' ) ) {
        wp_enqueue_style( 'child-style-en',
            get_stylesheet_directory_uri() . '/css/style-en.css',
            array( 'child-style' ),
            wp_get_theme()->get('Version')
        );
    }
    */
}
add_action( 'wp_enqueue_scripts', 'my_network_child_enqueue_conditional_styles' );

In this advanced scenario:

• You would create a css sub-directory within your child theme’s folder (e.g., wp-content/themes/my-network-child/css/).
• Inside this directory, you’d place language-specific CSS files, like style-fr.css.
• The PHP code checks for the current language using functions provided by common i18n plugins (pll_current_language for Polylang, $sitepress->get_current_language() for WPML). You’ll need to adapt this part based on the specific plugin you are using and its API.
• The wp_enqueue_style() function is used to load these additional stylesheets, with the main child theme stylesheet (child-style) set as a dependency.

This approach keeps your main style.css cleaner and allows for better organization of language-specific styles, especially if they become extensive.

Troubleshooting and Best Practices

• Cache Clearing: Always clear your browser cache and any WordPress caching plugins after making CSS or PHP changes. Stale cache is the most common reason for not seeing style updates.
• Parent Theme Updates: Child themes are designed to survive parent theme updates. However, if a parent theme update fundamentally changes its structure or CSS class names, your child theme’s selectors might break. Always test thoroughly after parent theme updates.
• Plugin Specificity: The exact method for identifying the current language (body classes vs. HTML attributes) and the functions to retrieve it are highly dependent on your chosen i18n plugin. Consult your plugin’s documentation.
• Specificity Wars: If your styles aren’t applying, it’s likely a CSS specificity issue. Your selectors might not be strong enough to override existing styles. Use browser developer tools to inspect elements and understand the cascade. You might need to add more specific selectors or use !important sparingly as a last resort.
• Multisite Activation: Remember that themes are activated on a per-site basis in Multisite. Ensure your child theme is activated on the specific sites within the network where you want its styles to apply.
• Performance: For very large networks with many languages and complex styling, consider CSS minification and concatenation tools. Loading too many separate stylesheets can impact performance.

By following these steps, you can effectively build and manage child themes for custom styling in a multi-language WordPress Multisite environment, ensuring maintainability and preventing conflicts.