How to add user defined CSS class to my custom widget rendering code?

3 Views

I created a widget by extending WP_Widget, works well.
Also added a field to the admin called className.

But I can’t find any hook where I can inject the custom CSS class name into the rendering code of the widget (I want the class to be applied to the whole widget of course).

Read More
// Before widget.
echo $before_widget;

if ($title)
{ echo $before_title.$title.$after_title; }

    if ($headline)
    { echo '<h4>'.$headline.'</h4>'; }

    if ($description)
    { echo '<p>'.$description.'</p>'; }

    if ($className)
    { echo '<p>Class name: '.$className.'</p>'; }

// After widget.
echo $after_widget;

The HTML output for this goes like: 

<aside id="eppz-page-widget-2" class="widget widget_eppz-page-widget">
    <h3 class="widget-title">Title</h3>
    <h4>Headline!</h4>
    <p>Some description that can be added optionally to the widget.</p>
    <p>Class name: featuredPageWidget</p>
</aside>

Now I really want to append the className variable after all the classes applied to aside. I could do it with some string functions, but I’d really hope that there is a simple WordPressy way to do this.

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. As I really had no intention to override default template before_widget injections, I came up with a quirky workaround, that still do not touch template implementation.

    I use a placeholder as the class name, then simply replace it in rendering code.

    Set up a readonly class property:

    function getClassNamePlaceHolder()
{ return 'EPPZPageWidgetClassNamePlaceHolder'; }

    Set is as the classname for the widget at construction time:

    $widgetOptions = array
(
    'classname' => $this->getClassNamePlaceHolder(),
    'description' => 'Lovely widget description for humans.'
);

    Replace placeholder with the widget parameter at render:

    function widget($args, $instance)
{

    // ...

    // Exchange default class name to custom.
    $classNamePlaceHolder = $this->getClassNamePlaceHolder();
    $before_widget_withCustomClassName = str_replace($classNamePlaceHolder, $customClassName, $before_widget);

    // Before widget.
    echo $before_widget_withCustomClassName;

    And there.
    Whatever is the actual before_widget implementation, this approach safely sets the custom class name (see MyCustomClassName below) for the whole widget:

    <aside id="eppz-page-widget-2" class="widget MyCustomClassName">
    <h3 class="widget-title">eppz! page widget</h3>
    <h4>Headline!</h4>
    <p>Some content goes here.</p>
</aside>

  2. First add a custom placeholder class in the constructor

    <?php
public function __construct() {
   $widget_ops  = array(
      'classname'                   =>; 'widget_text eaa __eaa__', //__eaa__ is my placeholder css class
      'description'                 =>; __( 'AdSense ads, arbitrary text, HTML or JS.','eaa' ),
      'customize_selective_refresh' =>; true,
   );
   $control_ops = array( 'width' =>; 400, 'height' =>; 350 );
   parent::__construct( 'eaa', __( 'Easy AdSense Ads &amp; Scripts', 'eaa' ), $widget_ops, $control_ops );
}
?>

    Then replace it with the class/es of your choice based on the widget options like this

    <?php
if ( $instance['no_padding'] ) {
   $args['before_widget'] = str_replace( '__eaa__', 'eaa-clean', $args['before_widget'] );
}
?>

    We are using the place holder to limit the ways in which the html of before_widget may affect our plugin functionality

    You can find the details with example at
    http://satishgandham.com/2017/03/adding-dynamic-classes-custom-wordpress-widgets/