Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

in widget title WordPress

  • SOLVED

I'd like to put a <span> tag in my widget titles (archives, category & text widgets) but Wordpress strips these by default. Any solutions?

Answers (6)

2011-12-06

Luis Abarca answers:

You can add it with javascript, but if you can tell us the reason to add it maybe we can figure out a better solution.

Check this other way:
[[LINK href="http://www.kevinpadams.com/2008/10/image-title-replacement-for-wordpress-widgets/"]]http://www.kevinpadams.com/2008/10/image-title-replacement-for-wordpress-widgets/[[/LINK]]


halijan comments:

I would like to style one word of the title a particular colour and style the remainder of the title another. Thanks!


Luis Abarca comments:

OK, you can style with the help of jQuery and CSS, can you provide the url ?

Or you can use the 'widget_title' filter, [[LINK href="http://adambrown.info/p/wp_hooks/hook/widget_title?version=3.2&file=wp-includes/default-widgets.php"]]http://adambrown.info/p/wp_hooks/hook/widget_title?version=3.2&file=wp-includes/default-widgets.php[[/LINK]]


add_filter('widget_title', 'my_change_title');

function my_change_title($title, $instance, $wid)
{
// check for the correct widget instance and title
...
return $title = str_replace('myword', '<span>myword</span>', $title);
}


halijan comments:

Thanks for your help. The URL is http://valueinsights.com.au/ which is under construction. I was able to add the effect that i was after in the popular posts widget which is a plugin that allows me to easily edit the widget title.

I tried inserting the code above into my functions.php but that cause a PHP error. should it be added in widgets.php instead?


Luis Abarca comments:

Pelase remove the 3 points "..."


halijan comments:

Thanks for your help. I tried this, but it doesn't change anything for me

add_filter('WP_Widget_Categories', 'my_change_title');
function my_change_title($title, $instance, $wid)
{
// check for the correct widget instance and title
return $title = str_replace('Category', '<span>Category</span>', $title);
}


Luis Abarca comments:

Sorry amigo, i just miss to add the number of args in the add_filter.

Check this example http://dev.justoalblanco.com/


add_filter('widget_title', 'my_change_title', 10, 3);

function my_change_title($title, $instance, $wid)
{
// check for the correct widget instance and title
return $title = str_replace('Custom', '<span style="color: red">Custom</span>', $title);
}

2011-12-06

ej_emman answers:

hello,

Hmm, why not adding style properties of widget title instead of adding span tag on it.
This is a better Idea.

But if you have other reason why you do this aside from adding styles, like Luis said it can happen through javascript.

Hope this helps

2011-12-06

Manoj Raj answers:

Hi,

Here is a better way to allow html in wordpress widgets title and it worked for me also.

http://ponderwell.net/2011/05/how-to-use-html-in-wordpresss-widgets-title/

Its a step by step tutorial. You can follow up easily. Have a try


Manoj Raj comments:

class WP_Widget_Recent_Comments extends WP_Widget {

function __construct() {
$widget_ops = array('classname' => 'widget_recent_comments', 'description' => __( 'The most recent comments' ) );
parent::__construct('recent-comments', __('Recent Comments'), $widget_ops);
$this->alt_option_name = 'widget_recent_comments';

if ( is_active_widget(false, false, $this->id_base) )
add_action( 'wp_head', array(&$this, 'recent_comments_style') );

add_action( 'comment_post', array(&$this, 'flush_widget_cache') );
add_action( 'transition_comment_status', array(&$this, 'flush_widget_cache') );
}

function recent_comments_style() {
if ( ! current_theme_supports( 'widgets' ) // Temp hack #14876
|| ! apply_filters( 'show_recent_comments_widget_style', true, $this->id_base ) )
return;
?>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<?php
}

function flush_widget_cache() {
wp_cache_delete('widget_recent_comments', 'widget');
}

function widget( $args, $instance ) {
global $comments, $comment;

$cache = wp_cache_get('widget_recent_comments', 'widget');

if ( ! is_array( $cache ) )
$cache = array();

if ( isset( $cache[$args['widget_id']] ) ) {
echo $cache[$args['widget_id']];
return;
}

extract($args, EXTR_SKIP);
$output = '';
$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Comments') : $instance['title']);

if ( ! $number = absint( $instance['number'] ) )
$number = 5;

$comments = get_comments( array( 'number' => $number, 'status' => 'approve', 'post_status' => 'publish' ) );
$output .= $before_widget;
if ( $title )
<em>$output .= $before_title . $title . $after_title;</em>
<strong>$output .= $before_title . html_entity_decode($title) . $after_title;</strong>
$output .= '<ul id="recentcomments">';
if ( $comments ) {
foreach ( (array) $comments as $comment) {
$output .= '<li class="recentcomments">' . /* translators: comments widget: 1: comment author, 2: post link */ sprintf(_x('%1$s on %2$s', 'widgets'), get_comment_author_link(), '<a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . get_the_title($comment->comment_post_ID) . '</a>') . '</li>';
}
}
$output .= '</ul>';
$output .= $after_widget;

echo $output;

$cache[$args['widget_id']] = $output;
wp_cache_set('widget_recent_comments', $cache, 'widget');
}

function update( $new_instance, $old_instance ) {
$instance = $old_instance;
<em>$instance['title'] = strip_tags($new_instance['title']);</em>
<strong>$instance['title'] = $new_instance['title'];</strong>

$instance['number'] = absint( $new_instance['number'] );
$this->flush_widget_cache();

$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['widget_recent_comments']) )
delete_option('widget_recent_comments');

return $instance;
}

function form( $instance ) {
$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
$number = isset($instance['number']) ? absint($instance['number']) : 5;
?>
<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 $title; ?>" /></p>

<p><label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Number of comments to show:'); ?></label>
<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<?php
}
}


The above code is from default-widgets.php (under wp-includes) and its for Recent Comments widget. Now you can insert any html to widget title. The "italic" highlighted code need to be removed and instead the "bold" highlighted code should be there..

Similarly you can do the same thing for other widgets too..


Manoj Raj comments:

Hi,

Here is the better way as explained in the tutorial i mentioned. Don't do the changes in default-widgets.php

Instead,

upload the attached file to your theme folder and add the following to your functions.php

if (include('custom_widgets.php')){
add_action("widgets_init", "load_custom_widgets");
}
function load_custom_widgets() {
unregister_widget("WP_Widget_Recent_Comments");
register_widget("WP_Widget_Recent_Comments_Custom");
}


Now you can have html tags in your title.. Here is the working demo

http://www.comnedy.com/widget-title/

In the sidebar widget Most Recent Comments - I put the title as Most <span>Recent</span> <strong>Comments</strong> - And its working.. Have a try. It should work. In the similar way you can do for other existing widgets.


Manoj Raj comments:

Sorry, The file is not being attached. Here is the code you need to paste in custom_widgets.php


<?php

class WP_Widget_Recent_Comments_Custom extends WP_Widget_Recent_Comments {

function __construct() {
$widget_ops = array('classname' => 'widget_recent_comments', 'description' => __( 'The most recent comments' ) );
parent::__construct('recent-comments', __('Recent Comments'), $widget_ops);
$this->alt_option_name = 'widget_recent_comments';

if ( is_active_widget(false, false, $this->id_base) )
add_action( 'wp_head', array(&$this, 'recent_comments_style') );

add_action( 'comment_post', array(&$this, 'flush_widget_cache') );
add_action( 'transition_comment_status', array(&$this, 'flush_widget_cache') );
}

function recent_comments_style() {
if ( ! current_theme_supports( 'widgets' ) // Temp hack #14876
|| ! apply_filters( 'show_recent_comments_widget_style', true, $this->id_base ) )
return;
?>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<?php
}

function flush_widget_cache() {
wp_cache_delete('widget_recent_comments', 'widget');
}

function widget( $args, $instance ) {
global $comments, $comment;

$cache = wp_cache_get('widget_recent_comments', 'widget');

if ( ! is_array( $cache ) )
$cache = array();

if ( isset( $cache[$args['widget_id']] ) ) {
echo $cache[$args['widget_id']];
return;
}

extract($args, EXTR_SKIP);
$output = '';
$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Comments') : $instance['title']);

if ( ! $number = absint( $instance['number'] ) )
$number = 5;

$comments = get_comments( array( 'number' => $number, 'status' => 'approve', 'post_status' => 'publish' ) );
$output .= $before_widget;
if ( $title )
$output .= $before_title . html_entity_decode($title) . $after_title;

$output .= '<ul id="recentcomments">';
if ( $comments ) {
foreach ( (array) $comments as $comment) {
$output .= '<li class="recentcomments">' . /* translators: comments widget: 1: comment author, 2: post link */ sprintf(_x('%1$s on %2$s', 'widgets'), get_comment_author_link(), '<a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . get_the_title($comment->comment_post_ID) . '</a>') . '</li>';
}
}
$output .= '</ul>';
$output .= $after_widget;

echo $output;

$cache[$args['widget_id']] = $output;
wp_cache_set('widget_recent_comments', $cache, 'widget');
}

function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//$instance['title'] = strip_tags($new_instance['title']);
//$instance['title'] = $new_instance['title'];
if (current_user_can('unfiltered_html')){
$instance['title'] = $new_instance['title'];
}
else {
strip_tags($new_instance['title']);
}

$instance['number'] = absint( $new_instance['number'] );
$this->flush_widget_cache();

$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['widget_recent_comments']) )
delete_option('widget_recent_comments');

return $instance;
}

function form( $instance ) {
$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
$number = isset($instance['number']) ? absint($instance['number']) : 5;
?>
<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 $title; ?>" /></p>

<p><label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Number of comments to show:'); ?></label>
<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<?php
}
}

2011-12-07

Kannan C answers:

Oops. i didn't watched you want for some particular word

2011-12-07

Angelika Wincenta answers:

my solution:

go to functions.php

find something like that (with the name of the widget you used - mine is 'Sidebar_main')
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar_main',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

and here you've got these what you want have before and after widget title ;)
put 'span' right there where I've got 'h2' and it will work.

2011-12-07

nina magbanua answers:

hi,

why not modify it thru your css? it's the easiest way to do it.