CODEWITHSUNDEEP
wordpress
Walhalla
Walhalla

Reputation: 396

WP Plugin Development - Conditional CSS on shortcode

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!

Upvotes: 2

Views: 475

Answers (3)

AndyWarren
AndyWarren

Reputation: 2012

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
    }
}

Upvotes: 0

Khorshed Alam
Khorshed Alam

Reputation: 2708

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' );

Upvotes: 1

Jiri Kral
Jiri Kral

Reputation: 161

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.

Upvotes: 1

Related Questions