2

I'm currently developing a plugin for wordpress. My plugin-content gets fired on defined shortcode. I pass a parameter to the shortcode to make some conditionals. I am able to load JS conditionally, but I also need to load CSS conditionally.

Lets say I use the shortcode: [myshortcode css="dark"] I make a database query and inject the wanted css.

Is this somehow possible? I have read some threads about it. I know it is because the Code fires after head is loaded. I wasn't able to find a solution.

What options do I have?

Thank you!

4
  • use inline css? Commented Nov 17, 2016 at 16:34
  • Sorry, no. I want to switch the whole stylesheet ... Commented Nov 17, 2016 at 16:44
  • Are you extracting your shortcode attributes (css="dark"), and saving them as a variable in the PHP? Commented Nov 17, 2016 at 17:35
  • Well ... yes I do. But not as global variable if you mean that. Commented Nov 17, 2016 at 17:52

3 Answers 3

1

Probably you are searching for these functions:

You can check your post, page or custom post type on hook by add_action ( 'wp', 'yourCustomFunction' ) and test if your get_post_field ( 'post_content' ) contains specified shortcode and conditionally enqueue CSS file based on specified attribute.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, I have read about this. Performance-issues were mentioned. Because my pages contain the shortcode only without anything else it wouldn't be a problem I think. How would you catch the mentioned shortcode-parameter, when using this way???
1

There is a better way. You can simply register your css and scripts with wp_enqueue_scripts by wp_register_style or wp_register_script and then enqueue the registered scripts from your shortcode. You will have opportunity to enqueue scripts based on certain condition there.

Here is a code example.

/**
 * Register scripts
 */
function my_plugin_scripts() {
    wp_register_style( 'dark-css', $css_path );
    wp_register_script( 'script-name', $js_path, array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );

/**
 * My Shortcode
 */
function my_plugin_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'css' => 'default'
    ), $atts );

    if ( $atts['css'] == 'dark') {
        wp_enqueue_style('dark-css')
    }

    // do shortcode actions here
}
add_shortcode( 'shortcode-id','my_plugin_shortcode' );

3 Comments

Hmmm ... I think I tried this too. I have read elsewhere about it. I will try again ...
Well .. I just tried it. It would be a perfect solution, but the CSS gets injected in site-footer, which is not OK!!!???
I think html5 allows style reference to be added anywhere in DOM.
0

If I understand your question correctly, you could do something like this to load one stylesheet or the other:

function aw_shortcode_function($atts) {

    $a = shortcode_atts( array(
        'css' => 'light', // this is the default value
    ), $atts );

    $colorTheme = $a['css'];

    if ($colorTheme == 'dark') {
        // load/enqueue/get/do whatever based on the css="dark" shortcode attribute
    }
}

2 Comments

I think I tried this already. I use this way for the injection of my JS. As far as I remember it is not OK for CSS because it is too late and after head. It probably would get printed in footer, which is not allowed for css.
CSS can be printed anywhere in the DOM. It will still get picked up by the browser. With that said, wp_enqueue_style() will always put the stylesheet in the <head>.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.