Make widget content sibling to widget title in widget container

Resolved

(@willrune)

I am working on my first theme from scratch. For reference I have the Twenty-Eleven Theme, The Codex, and the WordPress Bible Second Edition. So far so good, but I have hit a roadblock have tried searching Google and the support forums, but I am not even sure how to/ if I am correctly wording my search.

I am working on getting sidebars and widgets to display in a way that compliments my theme. I want to use html different from what register_sidebar() allows for.

I’ve left out other parameters for the sake of keeping the examples straight forward.

We start with:

<?php
register_sidebar(array(
	'before_widget' => '<div class="widget">',
	'after_widget' => '</div>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>'
));
?>
<div class="widget">         <!-- before_widget -->
	<h3 class="widget-title"><!-- before_title -->
		Lorem ipsum
	</h3>                    <!-- after_title -->
		<!--WIDGET CONTENT GOES HERE-->
</div>                       <!-- after_widget -->

I need

<div class="widget">
	<h3 class="widget-title">
		Lorem ipsum
	</h3>
	<div class="widget-content">
		<!--WIDGET CONTENT GOES HERE-->
	</div>
</div>

So I try…

<?php
register_sidebar(array(
	'before_widget' => '<div class="widget">',
	'after_widget' => '</div></div>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3><div class="widget-content">'
));
?>

…which works, as long as there is a title for whatever the widget is. If there is no title then… uh oh.

<div class="widget">
		<!--WIDGET CONTENT GOES HERE-->
	</div>
</div>

You can see how that can increasingly destroy my layout with each widget in the sidebar that is output like this. Is there any filter or hook that can accomplish what I am looking for? Would this warrant a feature request for timething like the following:

<?php
register_sidebar(array(
	'before_widget' => '<div class="widget">',
	'after_widget' => '</div></div>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3><div class="widget-content">',
	'before_content' => '<div class="widget-content">',
	'after_content' => '</div>'
));
?>

<div class="widget">            <!-- before_widget -->
	<h3 class="widget-title">   <!-- before_title -->
		Lorem ipsum
	</h3>                       <!-- after_title -->
	<div class="widget-content"><!-- before_content -->
		<!--WIDGET CONTENT GOES HERE-->
	</div>                      <!-- after_content -->
</div>                          <!-- after_widget -->

It doesn’t feel like making the title and content siblings inside the widget container should be a difficult task. Is there something I missed?

Viewing 4 replies - 1 through 4 (of 4 total)

Michael

(@alchymyth)

11 years, 9 months ago

Thread Starter

Willrune

(@willrune)

11 years, 9 months ago

Thanks alcymyth!

I added the following to my functions.php.

function my_widget_content_wrap($content) {
    $content = '<div class="widget-content">'.$content.'</div>';
    return $content;
}
add_filter('widget_text', 'my_widget_content_wrap');

The filter reference doesn’t have a page for me to read up on:
http://codex.wordpress.org/Plugin_API/Filter_Reference

Unfortunately, this only applies the desired mark up to the text widget. I need all widgets to be wrapped in this container.

Thread Starter

Willrune

(@willrune)

11 years, 9 months ago

I thought there may be an alternative. Some way to conditionally set the parameters like so:

if( ! isset($instance['title']) OR empty($instance['title']) ){
	// No title
	$args['before_widget'] = '<div class="widget"><div class="widget-content">';
	$args['after_widget'] = '</div></div>';
	$args['before_title'] = '';
	$args['after_title'] = '';
} else {
	// Widget has a title
	$args['before_widget'] = '<div class="widget">';
	$args['after_widget'] = '</div></div>';
	$args['before_title'] = '<h3 class="widget-title">';
	$args['after_title'] = '</h3><div class="widget-content">';
}

I am not sure how I would write the function or what hook I would add it too. From what I have read, it is a bad practice to add an opening element to any ‘after_’ parameter. That is what broke my layout in the first place.

I’ve looked at the ‘widget_display_callback’ filter hook, but I am not sure if it can do the above, and I would rather not use anything that is a bad practice or could break if there is another way around it.

Thread Starter

Willrune

(@willrune)

11 years, 9 months ago

After a lot of frustration, coffee, reading, and web browsing, I have a working solution!

<?php
// Willrune's clunky but working code

function my_sidebar_init() {
	if ( function_exists('register_sidebar') ) {
		register_sidebar( array(
			'name' => 'Main Sidebar', //todo: add localization at some point
			'id' => 'sidebar-1',
			'description' => 'Lorem ipsum',
			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
			'after_widget' => '</aside>',
			'before_title' => '',
			'after_title' => ''
		) );
	}
}
add_action( 'widgets_init', 'my_sidebar_init' );

function my_widget_params_filter($params){
	global $wp_registered_sidebars, $wp_registered_widgets;

	$widget_id = $params[0]['widget_id']; //id
	$widget_number = $params[1]['number']; //number
	$widget_option_name = $wp_registered_widgets[$widget_id]['callback'][0]->option_name; //option name
	$widget_options =get_option($widget_option_name);//options
	$widget_title = $widget_options[$widget_number]['title']; //title

	$p_before_widget = $params[0]['before_widget']; //Keep the original 'before_widget' this way we can honor the dynamic/replaced classes and ids.
	$p_after_widget = $params[0]['after_widget'];

	$start_widget          =	$p_before_widget."\n"; 

	$start_widget_title    =	"\t".'<h3 class="widget-title">'."\n";
	$start_widget_title   .=	"\t\t";

	$end_widget_title      =	"\n";
	$end_widget_title     .= 	"\t".'</h3>'."\n";

	$start_widget_content  =	"\t".'<div class="widget-content">'."\n";
	$start_widget_content .=	"\t\t";

	$end_widget_content    =	"\n";
	$end_widget_content   .=	"\t".'</div>'."\n";

	$after_widget          =	$end_widget_content.$p_after_widget."\n";

	$params[0]['after_widget'] = $after_widget; // In my case, always the same.

	if( ! isset($widget_title) OR empty($widget_title) ){
	// No title
		$no_title_before_widget  =	$start_widget.$start_widget_content;

		$params[0]['before_widget'] = $no_title_before_widget;
		//$params[0]['after_widget'] = $after_widget; //uncomment if it needs to be customized
		$params[0]['before_title'] = '<div class="widget-faux-title">'; //For when a widget prepends the widget name to the content when no title exists.
		$params[0]['after_title'] = '</div>';
	} else {
	// Widget has a title
		$yes_title_before_widget  =	$start_widget;

		$yes_title_after_title   = $end_widget_title."\n".$start_widget_content;

		//$params[0]['before_widget'] = $start_widget; //uncomment if it needs to be customized
		//$params[0]['after_widget']  = $after_widget; //uncomment if it needs to be customized
		$params[0]['before_title']  = $start_widget_title;
		$params[0]['after_title']   = $yes_title_after_title;
	}
	return $params;
}
add_filter('dynamic_sidebar_params', 'my_widget_params_filter');

?>

The code could be cleaned up quite a bit, but it works!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Make widget content sibling to widget title in widget container’ is closed to new replies.

Make widget content sibling to widget title in widget container

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics