How to Customize Theme Style.css and Custom Web Fonts Setup in Multi-Language Site Networks

Leveraging `style.css` for Theme Customization in Multisite

When developing or customizing WordPress themes, especially within a multisite network, understanding how `style.css` is loaded and how to extend it is paramount. For a single site, directly editing `style.css` is straightforward but ill-advised for maintainability. In a multisite environment, this becomes even more complex due to network-wide settings and individual site customizations. The recommended approach is to use a child theme or a custom plugin to enqueue additional stylesheets, ensuring your modifications don’t get overwritten during parent theme updates.

For a multisite setup, each site can potentially have its own theme or a network-activated theme. If you’re using a network-activated theme and want site-specific CSS, you’ll need a mechanism to apply it. A common pattern is to use the `wp_enqueue_scripts` action hook. This hook allows you to register and enqueue your custom stylesheet. For site-specific customizations, you can conditionally enqueue your stylesheet based on the current site ID.

Enqueueing Custom Stylesheets Site-Specifically

To enqueue a custom stylesheet that applies only to a specific site within your multisite network, you can leverage the `get_current_blog_id()` function. This function returns the ID of the current site being viewed. You can then use this ID to conditionally load your custom CSS file.

Consider a scenario where you have a custom stylesheet named `custom-site-styles.css` located in the root of your active theme’s directory (or a child theme’s directory). You would add the following code to your theme’s `functions.php` file or a custom plugin:

function my_custom_site_styles() {
    // Define the target site ID for custom styles
    $target_site_id = 2; // Replace with the actual site ID you want to customize

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

    // Check if the current site is the target site
    if ( $current_blog_id === $target_site_id ) {
        // Enqueue the custom stylesheet
        wp_enqueue_style(
            'custom-site-styles', // Handle for the stylesheet
            get_stylesheet_directory_uri() . '/custom-site-styles.css', // URL to the stylesheet
            array(), // Dependencies (e.g., 'parent-style')
            filemtime( get_stylesheet_directory() . '/custom-site-styles.css' ) // Version based on file modification time
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_site_styles' );

In this example:

• `$target_site_id` is set to `2`. You must replace this with the actual ID of the site you wish to apply these custom styles to. You can find site IDs in your WordPress network admin under “Sites” -> “All Sites”.
• `get_current_blog_id()` retrieves the ID of the currently active site.
• The `if` condition ensures that `custom-site-styles.css` is only enqueued when the current site matches `$target_site_id`.
• `get_stylesheet_directory_uri()` provides the URL to the current theme’s directory, and `get_stylesheet_directory()` provides the file path. If you are using a child theme, you would use `get_template_directory_uri()` and `get_template_directory()` respectively for the parent theme, or `get_stylesheet_directory_uri()` and `get_stylesheet_directory()` for the child theme itself. It’s generally best practice to place custom files within the child theme.
• `filemtime()` is used to set the version number. This is a common practice to ensure browsers load the latest version of the CSS file when it’s updated, by appending the file’s last modification timestamp as a query string parameter (e.g., `?ver=1678886400`).

Integrating Custom Web Fonts

Custom web fonts can significantly enhance a website’s typography. For multisite networks, you might want to use different fonts for different sites, or a consistent set of fonts across the network. The process involves obtaining the font files, hosting them, and then enqueuing them correctly.

Hosting Font Files

The most robust way to host custom fonts is to place them within your theme (or child theme) directory. A common practice is to create a `fonts` sub-directory. For example:

• `wp-content/themes/your-theme/fonts/`

Inside this directory, you would place your font files (e.g., `.woff`, `.woff2`, `.ttf`, `.eot`, `.svg`). The `.woff2` format is generally recommended for modern browsers due to its excellent compression and performance.

Enqueuing Custom Fonts via CSS

Once your font files are in place, you need to define them using the CSS `@font-face` rule. This is best done in a separate CSS file, which you then enqueue. Let’s assume you have a file named `custom-fonts.css` in your theme’s root directory.

The `custom-fonts.css` file might look like this:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'),
         url('fonts/MyCustomFont-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Recommended for performance */
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont-Bold.woff2') format('woff2'),
         url('fonts/MyCustomFont-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Example of using the font */
body {
    font-family: 'MyCustomFont', sans-serif;
}

h1, h2, h3 {
    font-family: 'MyCustomFont', serif;
    font-weight: bold;
}

In this CSS:

• `font-family` defines the name you’ll use to refer to the font in your CSS.
• `src` specifies the path to the font files. The paths are relative to the CSS file itself. Since `custom-fonts.css` is in the theme root and fonts are in `fonts/`, the paths are correct.
• `format()` tells the browser the type of font file.
• `font-weight` and `font-style` define variations of the font.
• `font-display: swap;` is crucial for performance. It tells the browser to use a fallback font while the custom font is loading, preventing invisible text.

Enqueuing the Font CSS File

Now, you need to enqueue this `custom-fonts.css` file. You can do this within the same `wp_enqueue_scripts` function used earlier, or in a separate function. For site-specific font loading, you’d integrate it with the site ID check.

Here’s how you’d enqueue `custom-fonts.css` for a specific site (e.g., site ID 3):

function my_custom_site_assets() {
    $site_id_for_styles = 2; // Site ID for custom styles
    $site_id_for_fonts  = 3; // Site ID for custom fonts
    $current_blog_id    = get_current_blog_id();

    // Enqueue custom site-specific styles
    if ( $current_blog_id === $site_id_for_styles ) {
        wp_enqueue_style(
            'custom-site-styles',
            get_stylesheet_directory_uri() . '/custom-site-styles.css',
            array(),
            filemtime( get_stylesheet_directory() . '/custom-site-styles.css' )
        );
    }

    // Enqueue custom fonts for a different site
    if ( $current_blog_id === $site_id_for_fonts ) {
        wp_enqueue_style(
            'custom-fonts',
            get_stylesheet_directory_uri() . '/custom-fonts.css',
            array(), // No dependencies for this font CSS
            filemtime( get_stylesheet_directory() . '/custom-fonts.css' )
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_site_assets' );

In this combined example, site ID `2` gets its `custom-site-styles.css`, and site ID `3` gets its `custom-fonts.css`. The `custom-fonts.css` file itself contains the `@font-face` rules and applies the font to elements like `body` and headings.

Network-Wide Customizations and Theme Options

For network-wide customizations that should apply to all sites, you would remove the site ID checks and enqueue your stylesheets directly. However, a more flexible approach for network-wide theme options (like choosing fonts or colors) is to use the WordPress Customizer API or a theme options framework. These allow administrators to make choices that are then translated into CSS dynamically.

If you’re using a theme that supports custom CSS input in the Customizer (Appearance -> Customize -> Additional CSS), this CSS is applied network-wide by default. For multisite, this “Additional CSS” is typically applied per site. If you need a truly network-wide CSS injection, you might need to hook into `wp_head` or `admin_head` and output styles conditionally based on `is_main_site()` or by iterating through all sites if necessary, though this is less common and can impact performance.

Using `wp_add_inline_style` for Dynamic CSS

A powerful technique for generating dynamic CSS, such as applying colors or font sizes chosen from theme options, is `wp_add_inline_style`. This function allows you to add CSS directly to an already enqueued stylesheet’s output, rather than creating a separate file.

Imagine you have a theme option for a primary color. You could enqueue your main stylesheet and then add the color dynamically:

function my_dynamic_theme_styles() {
    // Enqueue the main stylesheet (or your custom site stylesheet)
    wp_enqueue_style( 'my-theme-style', get_stylesheet_directory_uri() . '/style.css' );

    // Get the primary color from theme options (example)
    $primary_color = get_theme_mod( 'primary_color', '#0073aa' ); // Default to WordPress blue

    // Generate the dynamic CSS
    $custom_css = "
        a {
            color: {$primary_color};
        }
        .button {
            background-color: {$primary_color};
            border-color: {$primary_color};
        }
    ";

    // Add the dynamic CSS as inline style to the enqueued stylesheet
    wp_add_inline_style( 'my-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_styles' );

This approach is efficient because it avoids an extra HTTP request for a separate CSS file. For multisite, you would combine this with site ID checks if the theme option is site-specific, or use `get_site_option()` if it’s a network-level setting that you want to apply differently per site.

Best Practices and Considerations

• Child Themes: Always use a child theme for customizations to `style.css` or `functions.php`. This prevents your changes from being lost when the parent theme is updated.
• File Paths: Be meticulous with file paths. Use `get_stylesheet_directory_uri()` and `get_stylesheet_directory()` for the active theme (or child theme), and `get_template_directory_uri()` and `get_template_directory()` for the parent theme.
• Performance: Minimize the number of CSS files. Combine styles where logical. Use `font-display: swap;` for web fonts. Consider minifying your CSS files for production.
• Multisite Logic: Clearly define which customizations are network-wide and which are site-specific. Use `get_current_blog_id()` and `is_main_site()` judiciously.
• Caching: Be aware of browser caching and WordPress caching plugins. Ensure your versioning strategy (like `filemtime`) is effective, or clear caches after deploying changes.
• Accessibility: Ensure sufficient color contrast when applying custom colors, especially for text.