wordpresswordpress-shortcodewordpress-plugin-creation

How Can I use i20 Sidebar Widgets WordPress plugin multiple times in my Blog pages?

i installed this wp plugin in my Blog. I want to use this Shortcode plugin multiple times in Category and tag pages but the Shortcode is working Same for all pages. How can I change width and height for Category pages and specific height and width for post pages?

Shortcode I used is [i20_Sidebar_Widgets]. This WordPress plugin is using the following CSS.

.border-onestop{overflow-y:scroll;border:1px solid #C1C1C1;padding:8px 2px 0 8px;height:520px;width:100%;}
.noborder-onestop {overflow-y: scroll;height: 520px;width: 100%;}
.entrytitle{line-height: 1.2;margin-bottom: 5px;}
.entrydescrip{font-size:16px;color:#000;line-height:1.3;margin-bottom:6px;clear: both;}
.entrydescrip_lg{font-size:16px;color:#000;line-height:1.4;margin-bottom:6px;clear: both;}
.osclearfix{clear:both;}
.entryimg{float:left;margin-right:8px;}
.entryimg img{width:112px;height:auto;}
.entryimg_b{margin-right:8px;}
.widgettextsize { font-size:18px; }
.widgettextsize_lg { font-size:22px; }
.widgettextsizemar { font-size:17px;margin-bottom: 12px; }
.widgettextsizemar_lg { font-size:18px;margin-bottom: 12px; }

if i am trying to change CSS for Tag and Catagory pages while it is affecting Post pages widgets too. They have user interface to Setup height but it is using WordPress register_setting as shown below.

register_setting(
            'itsw_plugin_options_group',
            'itsw_height_of_i20_sidebar',
            array(
                'type'              => 'integer',
                'sanitize_callback' => 'sanitize_text_field',
            )
        );

So how to generate different height for different Widgets.

Solution

  • You can add shortcode attributes

    Modify the shortcode callback in the plugin so it supports parameters like :

    [i20_Sidebar_Widgets height="400" width="350"]

    Add this inside your shortcode function:

    function i20_sidebar_widgets_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'height' => '',
            'width'  => '',
        ),
        $atts,
        'i20_Sidebar_Widgets'
    );

    $height = !empty($atts['height']) ? $atts['height'] : get_option('itsw_height_of_i20_sidebar');
    $width  = !empty($atts['width']) ? $atts['width'] : '100%';

    ob_start();
    ?>
    <div class="border-onestop" style="height:<?php echo esc_attr($height); ?>px; width:<?php echo esc_attr($width); ?>;">
        <!-- widget content -->
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('i20_Sidebar_Widgets', 'i20_sidebar_widgets_shortcode');

    Then you can use shortcode like:

    This will not affect each other, because each shortcode instance has its own inline style.