Something new 'bout widgetized areas

ThemeShaper Forums » Thematic

[sticky] [closed]

Something new 'bout widgetized areas

(70 posts)

Started 14 years ago by Chris
Latest reply from candregg
This topic is not a support question

Tags:

1 2 3 Next »

Chris
Moderator
Hi Thematicians,

I'm sitting in the middle of nowhere (about 10 yards away from the beautiful river Mosel) and working on Thematic to make the handling of widgetized areas easier.

Here's a first preview ...

Remove a widgetized area:
```
function remove_widgetized_area($content) {
	unset($content['Primary Aside']);
	return $content;
}
add_filter('thematic_widgetized_areas', 'remove_widgetized_area');
```
Rename a widgetized area:
```
function rename_widgetized_area($content) {
	$content['Primary Aside']['args']['name'] = 'My first Sidebar';
	return $content;
}
add_filter('thematic_widgetized_areas', 'rename_widgetized_area');
```
More details will follow.

Btw.: Don't try this with the latest release and don't try this with the current SVN copy. I'm still working on it and I won't upload anything before everything is tested on my machine and my live blog.

Chris
Posted 14 years ago #
em hr
Moderator

Ah simplicity is bliss. I can't wait to see inside the new thematic_widgetized_areas()

It would be nice if there were also a simple function to add a widget area and hook it in and then generate the markup similarly to the way the SVN r522 does. That would provide a huge timesaver over the standard register_sidebar and then hook. Easy to ask for when someone else is coding it, but it's probably something I'd tinker with if it weren't provided.

Thanks for working on this It'll be really helpful. Here's a diversion to keep you focused on your surroundings: Mosel River

Posted 14 years ago #
Chris
Moderator

Update:

The new functionality will allow to create page / post / whatever based sidebars for one location. Means .. you could create a Primary Sidebar for home / frontpage, another one for all pages, or a certain page, another one for all posts, or a certain post, and so on.

Chris

Posted 14 years ago #
Chris
Moderator

Forgot to mention: .. the code looks much better than the old one :)

Posted 14 years ago #
Chris
Moderator

Internal tests started today.

Chris

Posted 14 years ago #
Chris
Moderator
Completely remove widgetized area:
```
function remove_primary_aside($content) {
	unset($content['Primary Aside']);
	return $content;
}
add_filter('thematic_widgetized_areas', 'remove_primary_aside');
```
Checked!

I need to mention two important things 'bout this:

1) This will completely remove a widgetized area. You shouldn't use it to remove a widgetized area based on a conditional tag!

2) A fresh installation of a child theme using this code will work as expected. Integrating this code into a live blog requires to reload wp-admin / appearance / widgets. Using unregister_sidebar + remove_action takes more time.

Chris
Posted 14 years ago #

Chris
Moderator

Adding a new widgetized area .. took my favorite one .. the header aside:

First code is needed to create the widgetized area:

function add_header_aside($content) {
	$content['Header Aside'] = array(
		'args' => array (
			'name' => 'Header Aside',
			'id' => 'header-aside',
			'before_widget' => thematic_before_widget(),
			'after_widget' => thematic_after_widget(),
			'before_title' => thematic_before_title(),
			'after_title' => thematic_after_title(),
		),
		'action_hook'	=> 'thematic_header',
		'function'		=> 'thematic_header_aside',
		'priority'		=> 8,
	);
	return $content;
}
add_filter('thematic_widgetized_areas', 'add_header_aside');

// And this is our new function that displays the widgetized area
function thematic_header_aside() {
	if (is_sidebar_active('header-aside')) {
		echo thematic_before_widget_area('header-aside');
		dynamic_sidebar('header-aside');
		echo thematic_after_widget_area('header-aside');
	}
}

The following code will change the header as needed:

// First we remove the thematic_brandingopen() .. we're going to make one addition for this one.
// And we remove thematic_access() .. will be added later unchanged with a priority of 10.
function remove_branding() {
		remove_action('thematic_header','thematic_brandingopen',1);
		remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_branding');

// We wrap #branding and #header-aside with #header-box
function childtheme_brandingopen() { ?>
	<div id="header_box">
    	<div id="branding">
<?php }
add_action('thematic_header','childtheme_brandingopen',1);

// Now we need to close #header-box
function header_box_close() { ?>
	</div>
<?php }
add_action('thematic_header', 'header_box_close', 9);

// And we add the unchanged thematic_access() with the new priority 10
add_action('thematic_header','thematic_access', 10);

Plus the CSS:

#header_box {
	clear: both;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 960px;
}

#branding {
  float: left;
  width: 620px;
}

/* Moves the new widgetized area to the right and levels it with #branding */
#header-aside {
  float: right;
  width: 300px;
  padding: 88px 0 44px;
}

/* This will clear the floats and keeps the access bottom line
from jumping into the air */
#access {
  clear: both;
}

Checked!

Please keep in mind ... to add an additional widgetized area normally only the first code section is required!

Chris

Posted 14 years ago #

Chris
Moderator

Display a widgetized area based on a conditional tag:

First we create a new function to display the secondary aside only on pages:

function childtheme_secondary_aside() {
	if (is_page()) {
		if (is_sidebar_active('secondary-aside')) {
			echo thematic_before_widget_area('secondary-aside');
			dynamic_sidebar('secondary-aside');
			echo thematic_after_widget_area('secondary-aside');
		}
	}
}

.. and then .. without removing an action or so:

function change_secondary_aside($content) {
	$content['Secondary Aside']['function'] = 'childtheme_secondary_aside';
	return $content;
}
add_filter('thematic_widgetized_areas','change_secondary_aside');

The only thing that has changed is the name of our function :)

Checked!

Posted 14 years ago #

Chris
Moderator

The next thing will be a new feature. First of all I want to thank Simon | webdemar.com for bringing up this awesome idea:

Create several widgetized areas that will be displayed on a certain position based on conditional tags:

First we create a function that displays our two secondary asides

function childtheme_secondary_aside() {
	if (is_sidebar_active('secondary-aside') && is_sidebar_active('secondary-aside-pages')) {
		echo thematic_before_widget_area('secondary-aside');
		if (is_page()) {
			dynamic_sidebar('secondary-aside-pages');
		} else {
			dynamic_sidebar('secondary-aside');
		}
		echo thematic_after_widget_area('secondary-aside');
	}
}

As you can see we display a special version of Secondary Aside on pages and a standard one on all other locations. You could have any number of different Secondary Aside versions.

.. now we need to create the new widgetized area and change the function for the Secondary Aside:

function change_secondary_aside($content) {
	$content['Secondary Aside']['function'] = 'childtheme_secondary_aside';
	$content['Secondary Aside Pages'] = array(
		'args' => array (
			'name' => 'Secondary Aside Pages',
			'id' => 'secondary-aside-pages',
			'before_widget' => thematic_before_widget(),
			'after_widget' => thematic_after_widget(),
			'before_title' => thematic_before_title(),
			'after_title' => thematic_after_title(),
		),
		'action_hook'	=> 'thematic_secondary_aside',
		'function'		=> 'childtheme_secondary_aside',
		'priority'		=> 10,
	);

	return $content;
}
add_filter('thematic_widgetized_areas','change_secondary_aside');

I'm using the same function for Secondary Aside Pages .. no .. it won't hook this function a second time to thematic_secondary aside ;)

Checked!

Posted 14 years ago #

Chris
Moderator

Need to get some sleep now .. will be a long day tomorrow.

Let me know if there's more I should check with the new widgetized area functionality.

Need some feedback!

Thanks for your help.

Chris

Posted 14 years ago #
em hr
Moderator

I've got questions that I'm sure will be answered once I see the code behind thematic_widgetized_areas. Overall this looks great! I can't wait to give it a go. Post when it hits the svn and I'll try my best to break it. Ha!

My only comment is that I find it highly unlikely that people in general will have the foresight to use the remove_widget_area short method on a fresh install but it's a welcome addition for child theme development.

Posted 14 years ago #
Chris
Moderator

SVN rev 556 is online.

I still need to work on the widgetized area in the footer.

Chris

Posted 14 years ago #
em hr
Moderator

After working with this briefly, I have only one comment. It would be great if the $thematic_widgetized_areas array could get sorted (a 'ksort' possibly?) by a key of 'admin_menu_order' before registering the widget areas.

Right now if I add a widget area with the provided filter it gets registered and shows at the end of the array making it show last in the admin area. I would be logical to allow for a user set menu order so that If I have hook a new widget area into thematic_abovemainasides , that I have the option to set that widget area to show up above Primary Asides if I choose. Or in your example of page-conditional secondary asides that I could set the menu order so that secondary-aside-pages appears immediately after secondary-asid in the admin widget area list.

Posted 14 years ago #
Chris
Moderator

Ok .. will do a test with one additional key first. :)

Thanks a lot for your help!

Posted 14 years ago #
Chris
Moderator

.. sortable widgetized areas .. sounds cool!

Posted 14 years ago #

Chris
Moderator

Hi Gene,

it's integrated in my local version.

Now the array looks like this:

'Primary Aside' => array(
			'admin_menu_order' => 100,
			'args' => array (
				'name' => 'Primary Aside',
				'id' => 'primary-aside',
				'before_widget' => thematic_before_widget(),
				'after_widget' => thematic_after_widget(),
				'before_title' => thematic_before_title(),
				'after_title' => thematic_after_title(),
				),
			'action_hook'	=> 'widget_area_primary_aside',
			'function'		=> 'thematic_primary_aside',
			'priority'		=> 10,
			),
		'Secondary Aside' => array(
			'admin_menu_order' => 200,
			'args' => array (
				'name' => 'Secondary Aside',
				'id' => 'secondary-aside',
				'before_widget' => thematic_before_widget(),
				'after_widget' => thematic_after_widget(),
				'before_title' => thematic_before_title(),
				'after_title' => thematic_after_title(),
				),
			'action_hook'	=> 'widget_area_secondary_aside',
			'function'		=> 'thematic_secondary_aside',
			'priority'		=> 10,
			),

Using asort() will use the value of admin_menu_order to sort the list.

For the final step I'll create a filter that's using asort() and add this to thematic_widgetized_areas. This could be exchanged to anything else if needed.

Chris

Posted 14 years ago #

Chris
Moderator

Ok .. back to the widgetized areas:

This is the last code I published containing the extended design for the array:

function change_secondary_aside($content) {
	$content['Secondary Aside']['function'] = 'childtheme_secondary_aside';
	$content['Secondary Aside Pages'] = array(
		'admin_menu_order' => 201,
		'args' => array (
			'name' => 'Secondary Aside Pages',
			'id' => 'secondary-aside-pages',
			'before_widget' => thematic_before_widget(),
			'after_widget' => thematic_after_widget(),
			'before_title' => thematic_before_title(),
			'after_title' => thematic_after_title(),
		),
		'action_hook'	=> 'thematic_secondary_aside',
		'function'		=> 'childtheme_secondary_aside',
		'priority'		=> 10,
	);

	return $content;
}
add_filter('thematic_widgetized_areas','change_secondary_aside');

function childtheme_secondary_aside() {
	if (is_sidebar_active('secondary-aside') && is_sidebar_active('secondary-aside-pages')) {
		echo thematic_before_widget_area('secondary-aside');
		if (is_page()) {
			dynamic_sidebar('secondary-aside-pages');
		} else {
			dynamic_sidebar('secondary-aside');
		}
		echo thematic_after_widget_area('secondary-aside');
	}
}

The result is still the same .. but .. have a look into WP-Admin / Appearance / Widgets. The list of widgetized areas is now sorted :)

Chris

Posted 14 years ago #

Chris
Moderator

.. forgot to mention that I updated the SVN!

Latest revision 557

Posted 14 years ago #
em hr
Moderator

Chris you rock. Thanks!

Posted 14 years ago #
Devin
Member

This is terrific! Tested and works on MU version 2.8.6 as well.

Posted 14 years ago #
Chris
Moderator

Thanks a lot for your feedback!

Chris

Posted 14 years ago #
anotherguy
Member

Chris,

I posted my topic in another thread but thought I would re-ask the question here to keep this discussion in one place.

The idea is to be able to manage multiple asides so that they do various things depending on which ones are published and which ones are not. To demonstrate exactly what I want to do I've created three draft images.

http://mint.anotherguy.us/current_asides.jpg

Currently there are two asides named sidebar that are one above the other. These are the two asides that I am focusing on (though the three asides at the bottom are another problem to discuss).

http://mint.anotherguy.us/side-by-asides.jpg

I have been able to successfully move the asides to this position using the CSS, no problem. But at this point, if I was to unpublish all widgets from of the the asides (say the red one) the green and grey areas would stay in the exact spot that they currently are, and a large gap would be apparent between the two areas.

http://mint.anotherguy.us/collapsed_asides.jpg

The end-result would be like above. If I remove one of the asides, the content area expands to fill in the spot that it used to fill.

Unfortunately, I'm no php coder, so I don't really know what to do. I know that this code worked for the conditionals in a Joomla template, and I'd like to use it here as well if you could tell me how.

<style type="text/css"> <?php if(!is_active_sidebar(1) || !is_active_sidebar(2) || is_home()) { ?> #content {margin:0;} <?php } ?> <?php if(is_active_sidebar(1) && !is_active_sidebar(2) && !is_home()) { ?> #content{margin:0 0 0 320px;} #sidebar{width:300px;} <?php } ?> <?php if(!is_active_sidebar(1) && is_active_sidebar(2) && !is_home()) { ?> #content{margin:0 320px 0 0;} #sidebar2{width:300px;} <?php } ?>
</style>

By the way, our group is preparing to launch a new wp theme club that uses the thematic framework as the base and we build our themes as children of thematic. I'm hoping to not only make development easier on us, but also be able to support a great theme like Thematic and give more flexibility to our users.

Thanks,
Tim

Posted 14 years ago #
Chris
Moderator

Hi Tim,

will publish a working sample next week. Sorry for this delay but I want to get v0.9.6. out to the Theme Repository end of this week.

Chris

Posted 14 years ago #
anotherguy
Member

Not a problem at all. We're getting ready to launch our own latest version of some products ourselves. Best of luck!

Hope your vacation went well.

Posted 14 years ago #
Chris
Moderator

Yep .. enough snowboarding for this year :)

Posted 14 years ago #
anotherguy
Member

But the year just got started! ;)
Could I email you? I spoke with Ian earlier this week about some different things and I'd like to see if these new details might be able to help your progress with anything.

Posted 14 years ago #
Chris
Moderator

Email: chris (at) wupperpiraten (dot) de

.. already waiting for summer :)

Posted 14 years ago #
RahulB
Member

Hi,
I have a few thoughts.

I see a distinct difference between the widget areas primary, secondary, subsidiary and the other areas like <Single/Page/Index> Top,<Single/Page/Index> Insert, <Single/Page/Index> Bottom.
There is an inherent page-visibility logic in second set of widget (is_single, is_page, is_home) Where as there is no such logic for primary, secondary, subsidiary.

I think we should consider new widget areas like content-top, content-insert and content-bottom and leave the page-logic to be implemented by the webmaster. They may use widget logic plugin, widget context plugin, TS custom widgets plugin or keep the logic in the child-theme files. But thematic should allow widget areas for all the "action" hooks. I understand that the <insert> kind of widget areas will require some specific template support so that the <insert> widgets are called at the appropriate place but I think we should have only one consistent "kind" of widgets. In my opinion, we should have widgets free from any "page visibility" logic, they should be based purely on the position they occur in the thematic structure. The kind of widget areas we could have

thematic_aboveheader (could be useful for small menus like login/logout)
thematic_belowheader (could be useful for stuff like breadcrumbs)
thematic_contenttop (not index-top, or page-top, or single-top)
thematic_contentinsert (not index-insert, or page-insert, or single-insert)
thematic_contentbottom (not index-bottom, or page-bottom, or single-bottom)
thematic_abovemainasides
(we already have primary)
thematic_betweenmainasides
(we already have secondary)
thematic_belowmainasides
thematic_abovefooter (could be used to add some widget content that would span the entire width of the page )
(we already have subsidiary)
thematic_belowfooter

How does that idea sound?

In other words, let thematic give a visual way to add content to filters rather than a code way. I know there could be performance issues. Also if I need small change or add just a small piece of content, it may be more appropriate to just hook into that action hook. But I think wordpress is meant for non-techies and if we give widgets to all action hooks, it is that much easier for non-techies to utilise those hooks.

Rather than just suggest this idea, I tried to implement it. I tried to deregister the current widget-areas but that did not happen. I tried to look up code ( I am using thematic.0.9.5.1 ) What am I missing?

e.g I was able to add a widgetised area for "Below Header" hook and I have put a Breadcrumb widget there. But I am not able to disable say "Page-top". Any ideas? May be I am not using the latest version?

Posted 14 years ago #
RahulB
Member

Hi,
I just realised that I need the SVN copy not the Release version for the code to work.

To get the SVN copy, I referred

http://forums.themeshaper.com/topic/how-to-get-the-latest-svn-copy-of-thematic

-Rahul

Posted 14 years ago #
Chris
Moderator

Yep .. that's the 0.9.6 release for now.

Posted 14 years ago #

RSS feed for this topic

1 2 3 Next »

Topic Closed

This topic has been closed to new replies.