Is there any way to enqueue dynamic css for Plugin settings option

[pujaradevang]

I have created a Plugin settings page in which I have add option under which users can set font size and color options. Now how can I user this "get_option" data in CSS file? I have tried option in which my-stylesheet.php file enqueued in public hook and I tried to get those "get_option" data and put those variables under "header( "Content-type: text/css; charset: UTF-8" );" tag. It's not working. Can you please let me know the correct way to enqueue dynamic CSS?

[MarioGiancini]

I would load dynamic CSS through <style> tags and use the wp_head hook instead of trying to enqueue. Here's an example:

https://wordpress.stackexchange.com/questions/56502/is-it-possible-to-enqueue-a-raw-css-string-directly-from-within-a-template-file

[pujaradevang]

Yes, MarioGiancini Thank for Reply!! I will try this option. meanwhile, I have tried to enqueue PHP file using this URL: https://wordpress.stackexchange.com/questions/1445/how-do-i-add-css-options-to-my-plugin-without-using-inline-styles After enqueue "my-stylesheet.php" file I have included "wp-config" file and then I got all option and below I have run my dynamic CSS. That option worked. Don't know include config file in plugin folder are safe or not? but its working!! Also, need to check Paid plugin market will accept this config file inclusion in plugin file or not? Please share your thoughts on this!! Thanks once again..

[dingo-d]

Or you can try to include it like

// Styles from options - appends styles to $custom_css variable.
$custom_css = '';
include_once( get_stylesheet_directory() . '/path-to-this-stylesheet/my-stylesheet.php' );
wp_add_inline_style( 'main-css', $custom_css );

The wp_add_inline_style would be in the same method where you are using wp_enqueue_style function.

If you are using some customizer options the my-stylesheet.php can look like:

<?php
/**
 * Dynamic css based on options in the Theme Customize API and Theme Options
 *
 * @since 1.0.0
 */

/********* Custom Header ***********/
if ( has_header_image() ) {
  $custom_css .= '#title_bar{background:url(' . get_header_image() . '); min-height:' . esc_attr( get_custom_header()->height ) . '; background-size:cover; background-position:center center;}';
}

/********* Main Color ***********/
$main_color = get_theme_mod( 'main_color' );

$custom_css .= '::selection{ background:' . esc_attr( $main_color ) . ';}
  ::-moz-selection{ background:' . esc_attr( $main_color ) . ';}
  a{color:' . esc_attr( $main_color ) . ';}
  nav > ul > li > a:hover:after,
  nav > ul > li > a:hover:after, nav > ul > li.current_page_item > a:after, nav > ul > li.current_page_parent > a:after{ background:' . esc_attr( $main_color ) . ';}
  nav > ul ul li:hover > a{ color:' . esc_attr( $main_color ) . ';}';

/********* Footer Logo ***********/
$footer_retina_logo        = get_theme_mod( 'footer_retina_logo', '' );

if ( '' !== $footer_retina_logo ) {
  $footer_logo               = get_theme_mod( 'footer_logo', '' );
  $footer_retina_logo_size   = wp_get_attachment_image_src( $footer_logo );
  $footer_retina_logo_width  = intval( $footer_retina_logo_size[1] );
  $footer_retina_logo_height = intval( $footer_retina_logo_size[2] );

  $custom_css .= '
    #footer_main_logo {display: block ;}
    #footer_retina_logo {display: none; width: ' . $footer_retina_logo_width . 'px; max-height: ' . $footer_retina_logo_height . 'px; height: auto;}
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10 ),
    only screen and (min-resolution: 120dpi) {
      #footer_main_logo {display: none ;}
      #footer_retina_logo {display: block ;}
    }';
}

Something along those lines...

[dingo-d]

Don't know include config file in plugin folder are safe or not? but its working!!

If you want to submit your plugin on .org repo, it will be rejected. You can only use hooks, and not manually include any WordPress core files - mostly for security issues, but also because you cannot be sure what the path of the WordPress looks like for someone who's using your plugin.

[pujaradevang]

Hello dingo-d Thanks For sharing Information!! I will check your solution. Thanks!!

[celsobessa]

@pujaradevang I've used a approach like this one mentioned by @dingo-d in 2 plugins made with WPBP and it works pretty well. In one of them I've this approach with SCSS variables taken from some user choices in the customizer.