I have built a Timeline plugin and used Carbonfields to add a settings page in which users can select the colours of each element in their timelines.

The plugin has default colours in the main stylesheet and I am currently using wp_add_inline_style() to fetch the saved colours from wp_options and output them (attaching to the main stylesheet.

This works fine but is this normally how you would output styles set in a theme? If not, what is the best approach, or the 'correct' WP way to do it?

EDIT: Here is a cut down example of how I've implemented this currently.

// ENQUEUE ADMIN STYLES
function simple_timeline_admin_style() {
    wp_register_style( 'timeline-admin-styles', plugins_url('admin/css/admin-styles.css',__FILE__ ));
    wp_enqueue_style('timeline-admin-styles');

    simple_timelines_colours();
}
add_action('admin_enqueue_scripts', 'simple_timeline_admin_style');

//Add Custom Timeline Colours
function simple_timelines_colours() {

    $title_colour = carbon_get_theme_option('st_timeline_title_colour');

    $custom_css = "";


    if ( $title_colour ) {
        $custom_css .="
            article[id^='simple-timeline-'] .simple-timeline-title h2 {
                color: {$title_colour};
            }";
    }

wp_add_inline_style( 'timeline-admin-styles', $custom_css );

}

I have built a Timeline plugin and used Carbonfields to add a settings page in which users can select the colours of each element in their timelines.

The plugin has default colours in the main stylesheet and I am currently using wp_add_inline_style() to fetch the saved colours from wp_options and output them (attaching to the main stylesheet.

This works fine but is this normally how you would output styles set in a theme? If not, what is the best approach, or the 'correct' WP way to do it?

EDIT: Here is a cut down example of how I've implemented this currently.

// ENQUEUE ADMIN STYLES
function simple_timeline_admin_style() {
    wp_register_style( 'timeline-admin-styles', plugins_url('admin/css/admin-styles.css',__FILE__ ));
    wp_enqueue_style('timeline-admin-styles');

    simple_timelines_colours();
}
add_action('admin_enqueue_scripts', 'simple_timeline_admin_style');

//Add Custom Timeline Colours
function simple_timelines_colours() {

    $title_colour = carbon_get_theme_option('st_timeline_title_colour');

    $custom_css = "";


    if ( $title_colour ) {
        $custom_css .="
            article[id^='simple-timeline-'] .simple-timeline-title h2 {
                color: {$title_colour};
            }";
    }

wp_add_inline_style( 'timeline-admin-styles', $custom_css );

}

• css
• options

• Can we assume you know how to retrieve the data from Timeline/Carbonfields? – Tom J Nowell ♦ Commented Apr 2, 2020 at 0:50
• Yes, I am currently doing so in order to output them using wp_add_inline_style(). To elaborate, in my plugin functions file, I register the main admin-style sheet hooked to admin_enqueue_scripts, and then call a function that enqueue's that style sheet and conditionally runs wp_add_inline_style() if values exist in the carbonfields fields. Just dont know if this is how this should be done. – mike_temby Commented Apr 2, 2020 at 0:56
• So you're just looking for reassurance? I've left an answer, but there's little I could say other than yes or no, don't embed variables directly into strings like that ( its not possible to validate or late escape that way), and indent your code :/ – Tom J Nowell ♦ Commented Apr 2, 2020 at 1:26
• Thanks @TomJNowell . Well I was asking if this is the 'correct' WP way to output theme/plugin option styles - so yeah i guess reassurance is what I was after :-) . I'm new to building plugins and using options so just wanted to know if i've done this in a hacky way, or the correct and normal way. Umm, regarding your point about embedding variables.. .that's exactly how it's shown to be done in the codex.. developer.wordpress/reference/functions/wp_add_inline_style How else would you use wp_add_inline_style() without embeding a variable in the string? – mike_temby Commented Apr 2, 2020 at 2:07

1 Answer 1

Yes, you would use wp_add_inline_style, as you showed in your question