Modify default WordPress text widget to add css classes to title tag

The scenario:I wanted the end user to have the ability to add custom css classes to the title tag of the default text widget. So basically, instead of just having <h3 class="widget-title">; (which is added in the default sidebar’s before_title parameter), I wanted the user to be able to have <h3 class="widget-title class-name class-name-2 etc">.

The solution:
I copied the default widget code (found in wp-includes > default-widgets.php), added it to my own themes function.php file and modified it. Sounds simple and it actually was once I got through a few bumps (of self doing).

The code:


class WP_Widget_Text_Advanced extends WP_Widget {

function __construct() {
$widget_ops = array('classname' => 'widget_advanced_text', 'description' => __('Advanced Arbitrary text or HTML'));
$control_ops = array('width' => 400, 'height' => 350);
parent::__construct('advanced_text', __('Advanced Text'), $widget_ops, $control_ops);
}

function widget( $args, $instance ) {
extract($args);
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
$classes = apply_filters('widget_classes', empty($instance['classes']) ? '' : $instance['classes'], $instance );
$text = apply_filters( 'widget_text', empty( $instance['text'] ) ? '' : $instance['text'], $instance );

$b_title = explode('">', $before_title);
$b_title_e = $b_title['0'];

echo $before_widget;
if ( !empty( $title ) ) { echo $b_title_e . ' '. $classes . '">' . $title . $after_title; } ?>
<div><?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?></div>
<?php
echo $after_widget;
}

function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['classes'] = $new_instance['classes'];
if ( current_user_can('unfiltered_html') )
$instance['text'] =  $new_instance['text'];
else
$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) ); // wp_filter_post_kses() expects slashed
$instance['filter'] = isset($new_instance['filter']);
return $instance;
}

function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '', 'classes'=>'' ) );
$title = strip_tags($instance['title']);
$text = esc_textarea($instance['text']);
$classes = strip_tags($instance['classes']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>

<p><label for="<?php echo $this->get_field_id('classes');?>"><?php _e('Add Classes. Separate multiple classes by a space (no commas!)'); ?></label>
<input id="<?php echo $this->get_field_id('classes');?>" name="<?php echo $this->get_field_name('classes');?>" type="text" value="<?php echo $classes;?>" /></p>

<textarea rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>

<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> />&nbsp;<label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php
}
}

function register_advanced_text_widget() {
register_widget( 'WP_Widget_Text_Advanced' );
}
add_action( 'widgets_init', 'register_advanced_text_widget' );

The only tricky part in this whole bit (and it’s not even that tricky) was getting the output of the before_widget parameter, running it through PHP’s explode function to look for "> and echo everything that appears before that (it’s the $b_title and $b_title_e variables).

Questions? Ask away!

UPDATE
To make it easier for people, I wrapped this up into a plugin that you can just install. Download it here. To install, just go to Plugins > Install New > Upload.

About Chris

Chris is the senior web/graphic designer with The Simons Group. He enjoys diving into code and developing solutions to uncommon problems. He is an avid bicycle commuter and enjoys playing and recording music.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA Image

*