WordPress - Enqueueing Inline CSS

functions.php

Ever needed to include a variable, inline style for your plugin or theme? Of course you did! Enqueueing external CSS files with WordPress' wp_enqueue_style() function (and its companions) is pretty slick but it lacks the funcionality to include inline CSS styles.

Well, at least that's what I thought before coming across the wp_add_inline_style() function.

Usage

<?php
$custom_style_file = get_template_directory_uri() . '/css/custom_style.css';

function custom_styles() {
    wp_enqueue_style( 'custom-style', $custom_style_file );
    $headline_font_weight = get_theme_mod( 'headline-font-weight' );
    $custom_style = '.headline { font-weight: ' . $headline_font_weight . '; }';
    wp_add_inline_style( 'custom-inline-style', $custom_style );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );
?>
Honestly, I didn't know this function for a long time. It could have saved me a lot of time if I knew that before.