Change Width and Height in Wordpress Shortcode for Jquery Plugin

Question

I'm using the following short code to call my plugin: [end_slider]

This is my code in my functions file:

function slider_func() {
 ?>
    <script>
        jQuery(document).ready(function($) {
               $('#banner-fade').bjqs({
                     height: 350,
                     width: 980,
                     responsive: true
               });
         });
    </script>
  <?php
}

add_shortcode( 'end_slider', 'slider_func' );

How can I create a function that will adjust the width and height of the plugin in the shortcode?

The shortcode would look something like this: [end_slider width="980" height="350"]

Answer 1

According to the WordPress Shortcode API documentation, the first parameter can be used to accept the shortcode attributes.

You can reconfigure your function like so:

function slider_func( $atts ) {
    extract( shortcode_atts( array(
        'width' => '600', // default width
        'height' => '400', // default height
    ), $atts ) );
    ?>
    <script>
        jQuery(document).ready(function($) {
               $('#banner-fade').bjqs({
                     height: <?php echo (int) $height; ?>,
                     width: <?php echo (int) $width; ?>,
                     responsive: true
               });
         });
    </script>
    <?php
}