Forcing the title of a text widget on to a new line in the admin area

I have created some custom widgets based on the standard WP text widget by extending the WP_Widget class. I would very much like to force the title of the widget on to a new line in the sidebar summary area of the admin section.

I was thinking of using a line break html tag so that the title doesn’t become truncated or cut off. I notice WordPress adds a span element to the widgets.php file. This file is located in the wp-admin/includes/widgets.php. By adding a line break tag here on line 188

Read More
<div class="widget-title"><h4><?php $widget_title ?><br><span class="in-widget-title">  </span></h4></div>

I was able to force the actual title on to a second line.

However the result is unsatisfactory as the css clearly isnt accommodating the height of the content.

The problem is that I am unsure where to put such html markup for the change to take effect within my actual widget code below? I could change the wordpress files themselves but updates would erase the changes I have made. Any help would be appreciated.

The code is attached.

  <?php
  /**
   * Counselling Widget
   *
   * @since 2.8.0
   */
  /**
   * Add function to widgets_init that'll load our widget.
   * @since 0.1
   */
  add_action( 'widgets_init', 'counselling_widget' );

  /**
   * Register our widget.
   * 'Example_Widget' is the widget class used below.
   *
   * @since 0.1
   */
  function counselling_widget() {
       register_widget( 'counselling_widget' );
  }
  /**
   * Widget setup.
   */
  class counselling_widget extends WP_Widget {

       function __construct() {
            /* Widget settings. */
            $widget_ops = array('classname' => 'counselling_widget', 'description' => __('Add or amend text or HTML for the Counselling section'));
            /* Widget control settings. */
            $control_ops = array('width' => 400, 'height' => 350);
            /* Create the widget. */
            parent::__construct('counselling_widget', __('Counselling'), $widget_ops, $control_ops);
       }
       /**
        * How to display the widget on the screen.
        */
       function widget( $args, $instance ) {
            extract($args);
            /* Our variables from the widget settings. */          
            $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
            $text = apply_filters( 'widget_text', empty( $instance['text'] ) ? '' : $instance['text'], $instance );
            /* Before widget (defined by themes). */
            echo $before_widget;
            if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
                 <div class="textwidget"><?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?></div>
            <?php
            echo $after_widget;
       }
       /**
        * Update the widget settings.
        */
       function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            /* Strip tags for title and name to remove HTML (important for text inputs). */
            $instance['title'] = strip_tags($new_instance['title']);
            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;
       }
       /**
        * Displays the widget settings controls on the widget panel.
        * Make use of the get_field_id() and get_field_name() function
        * when creating your form elements. This handles the confusing stuff.
        */
       function form( $instance ) {

            $defaults = array(
              'title' => __('Counselling', 'counselling_widget_text'),
              'text' => '<div class="counselling">
  <p>Often referred to as person centred, this approach based on the belief that being able to talk to a caring professional about your feelings can provide you with the clarity, self awareness and solutions to promote the potential for change. The therapeutic 'space' is utilised to listen to the client's problems, reflect back to the client what they are saying and offer clarification to achieve awareness and confidence at managing one's difficult circumstances<a href="#" class="button">read more</a></p>
  </div><!--end counselling-->',
            );

            $instance = wp_parse_args((array) $instance, $defaults);
            $title = strip_tags($instance['title']);
            $text = esc_textarea($instance['text']);
  ?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" 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>

            <textarea class="widefat" 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
       }
  }

  ?>

Related posts

1 comment

  1. You can try this custom CSS code to enable multiple title lines for the widgets in the backend:

    function custom_css_wpse_98587() {
        echo "<style>
            .widget-top{height:auto !important;}
            .widget-title h4, .widget-title span.in-widget-title{ white-space:normal; }
        </style>";
    }
    add_action('admin_head-widgets.php','custom_css_wpse_98587');
    

    This is how the widgets show up in my Chrome browser:

    Before:

    before

    After:

    widgets

Comments are closed.