Plugin CSS not enqueing

Question

My apologies if there is an answer to this already making this a duplicate question, I have spend the last 3 days trying to get the CSS styling to be applied in a way that WordPress would allow, it is very likely I have started going 'code-blind'

I am working on a plugin to display user-generated content and an average rating of a service provided. The data all comes in from an XML file hosted elsewhere and everything is working great! Now when I wanted to release the plugin to WordPress so others could use it, I had to make some changes to the code, they wouldn't let me use <style> and <link> tags for the CSS.

Some of the options in the CSS are based on user settings that they've setup in the options page for the plugin, I've tried several ways of getting it to work but it just won't load the styling properly.

Because of the settings a user can make I have made the CSS files into PHP files (this way I could keep it all in the same place).

In the main plugin file I have the following lines: add_action( 'admin_enqueue_scripts', 'kvssm_enqueue_styles' ); I have tried this with wp_enqueue_scripts as well to the same result of the styling not being applied.

The function being called:

function kvssm_enqueue_styles(  ) {
    wp_enqueue_style( 'reviewCSS', plugins_url( '/review-style.php', __FILE__ ), array(), null );
    wp_enqueue_style( 'widgetCSS', plugins_url( '/widget-style.php', __FILE__ ), array(), null );
}

I have tried several itterations of this function, with and without wp_register_style

The last method I've attempted was in the css.php to add the following lines:

<?php
header( 'Content-type: text/css' );
header( 'Cache-control: must-revalidate' );

include( 'ssm-klantenvertellen.php' );

$dir       = kvssm_get_directory(  );
$kvOptions = kvssm_get_options_kvssm(  );
$pvOptions = kvssm_get_options_pvssm(  );
?>

I am trying to apply the CSS as follows:

color: <?php echo $kvOptions[ 'kvssm_color_field_2' ]; ?>;

However this last method won't work because of a Fatal error the include causes, add_action is not recognized as a function, the only reason I use the include is for the functions to fetch the settings I need, if I place these functions inside the css.php instead it still causes fatal errors, this time because of the plugins_url() not being recognized.

The three functions:

function kvssm_get_directory(  ) {
    $dir     = plugins_url( __DIR__ );
    $dirA    = explode( 'public_html', $dir );
    $dir     = $dirA[ 1 ];
    return $dir;
}

function kvssm_get_options_kvssm(  ) {
    $options = get_option( 'kvssm_settings' );
    return $options;
}

function kvssm_get_options_pvssm(  ) {
    $options = get_option( 'pvssm_settings' );
    return $options;
}

Does anyone know how I should setup the CSS in order for it to be displayed properly? Some features that might be of importance:

• The plugin adds a shortcode
• The shortcode returns a result which should have the CSS attached to it
• The settings page in the back-end includes a preview of the shortcode using do_shortcode()

Answer 1

If you want to add inline CSS, use wp_add_inline_style().

<?php
/**
 * Plugin Name: WPSE 257470
 * Description: WordPress StackExchange question 257470
 * Plugin URI: https://wordpress.stackexchange.com/questions/257470/
 * Author: Nathan Johnson
 * Licence: GPL2+
 * Licence URI: https://www.gnu.org/licenses/gpl-2.0.en.html
 */

//* Don't access this file directly
defined( 'ABSPATH' ) or die();

if( ! class_exists( 'wpse_257470' ) ):
  class wpse_257470 {
    public function plugins_loaded() {
      add_action( 'wp_enqueue_scripts', [ $this, 'wp_enqueue_scripts' ] );
    }

    public function wp_enqueue_scripts() {
      //* It's necessary to have a 'base' CSS file that we can attach to
      wp_enqueue_style( 'wpse-257470', plugin_dir_url( __FILE__ ) . 'style.css' );
      $color = '#257470';
      $custom_css = ".custom_color { color: $color };";
      wp_add_inline_style( 'wpse-257470', $custom_css );
    }
  }
  add_action( 'plugins_loaded', [ new wpse_257470(), 'plugins_loaded' ] );
endif;