1

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()
  • wp_enqueue_style does not accept php files as source. Only css files. – Laxmana Feb 22 '17 at 11:18
  • Thank you, I changed wp_enqueue_style to wp_enqueue_script it adds the basic CSS now but the dynamic settings still dont get applied, doing it via the include still results in the same errors, placing the functions inside the style.php still results in an error about the plugins_url function – Development SideShow Media Feb 22 '17 at 12:00
  • So you need to generate dynamic css in admin panel or in front end? – Laxmana Feb 22 '17 at 12:33
  • The settings for the dynamic css are in the admin panel, i want it to display in the result of the shortcode which is on the front-end, the admin panel has a preview of the result by using the shortcode, i assume just the front-end will also display it using that preview section. – Development SideShow Media Feb 22 '17 at 12:40
  • Something fun I've just realized: wp_enqueue_style( 'widgetCSS', plugins_url( '/widget-style.php', __FILE__ ), array(), null ); Displays the static CSS in the admin panel, no CSS in the front-end, wp_enqueue_script( 'reviewCSS', plugins_url( '/review-style.php', __FILE__ ), array(), null ); Doesn't display any CSS in the admin panel nor the front-end – Development SideShow Media Feb 22 '17 at 12:44
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;
  • wp_add_inline_style seems to have done the trick! Thank you so much. Now I just have to hope WordPress accepts the method and there's no other issues with the code according to them. – Development SideShow Media Feb 23 '17 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.