1

I'm struggling to generate CSS 'on fly' from a shortcode that is within a plugin using class. Here is the shortcode function:

public function shortcode($atts, $content = NULL) {

        $data = shortcode_atts ( 
            array(
                'id'    => '',
                'img'   => '',
                'speed' => '5',
            ), $atts 
        );

        $id_tmp = $data['id'];

        $src = wp_get_attachment_image_src( $data['img'], 'full');
        $image_url =  $src[0];

        return  '<section id="'. $data['id'] .'" data-speed="'. $data['speed'] .'" data-type="background">' .do_shortcode($content). '</section>';
    }

What I'm trying to do is to get the id and image_url values and put them into a CSS file to create something like:

#intro01 <-- THE ID SHORTCODE VALUE {    
    background: url(../images/fly.jpg <-- THE $image_url VALUE ) 50% 0 fixed;
}

This is a public (front-end) css.

2

Put the generated CSS rules into a CSS file from the shortcode can be quite bad practice because each time you run the shortcode it will have to open a file a write into it; I think is not really whtat you need. In your case you could, for example, set the style attribute to the element itself, it should be enough:

public function shortcode($atts, $content = NULL) {

    $data = shortcode_atts ( 
        array(
            'id'    => '',
            'img'   => '',
            'speed' => '5',
        ), $atts 
    );

    $id_tmp = $data['id'];

    $src = wp_get_attachment_image_src( $data['img'], 'full');
    $image_url =  $src[0];

    $style = "style = background: url(".$image_url.") 50% 0 fixed;";

    return  '<section id="'. $data['id'] .'" data-speed="'. $data['speed'] .'" data-type="background" '.$style.'>' .do_shortcode($content). '</section>';
}

You can try also the wp_add_inline_style() function.

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.