jbtank
Member
This is driving me crazy. I'm trying to use Mootools slide in the sidebar of my Thematic child theme. What I need to be able to do is add 2 divs around the lists generated by the dynamic sidebar. (in my case: Categories, Recent Posts, Recents Comments, and Twitter feed). FYI: these will be collapsible and expand when clicking on the header.
Where/how would I add the divs/necessary code for these? I just don't know where or how to get into the dynamic toolbar in a sensible manner? Many thanks!
jbtank
Member
I should add that I'd like to keep the sidebar dynamic and have widget functionality. I just want to be able to add these divs to make the header link and the subcontents collapsible.
In order to do this I with the 0.9.5 release. I believe you'll have to register a new widget area(sidebar) including the markup you desire to enable the js youre working with. Then you'll have to hook it where you want it to display.
jbtank
Member
Thanks for the reply. I may not understand this. Seems to me that the problem is that I don't know where to put my added markup so that it surrounds the lists generated by the scripts for Categories, Recent Posts, Recent Comments, and Twitter without actually putting it in the wp_categories file, etc.
Do you know where the best place to add this markup would be within the Thematic framework (if possible)?
jbtank
Member
Thanks for the reply. I may not understand this. Seems to me that the problem is that I don't know where to put my added markup so that it surrounds the lists generated by the scripts for Categories, Recent Posts, Recent Comments, and Twitter without actually putting it in the wp_categories file, etc.
Do you know where the best place to add this markup would be within the Thematic framework (if possible)?
amygail
Member
jbtank,
Start here:
http://themeshaper.com/modify-wordpress-themes/
http://themeshaper.com/custom-wordpress-hooks-filters-thematic-06/
This will give you a good understanding of how to work with child themes (it'll help you understand how to modify the files etc)
jbtank
Member
Hey thanks! I do understand that generally, I'm not sure of how to specifically add the code I want so it appear around ANY widget in the dynamic toolbar.
I suppose I could hardcode all of that into another sidebar and just call that sidebar, but it seems like there'd be a good way to add code so that it apply to whatever widgets are dropped into it.
If you could point me to how to do that, I'd greatly appreciate it. I haven't been able to find anywhere that explains how to do that. If I missed it in those links, my apologies and thanks again.
Swamped right now but may I can throw something later.
I'm not sure exactly what you're trying to do without seeing what the code you want to add is and where it's to be added. Here is how you would go about registering a new sidebar and adding it in to your child theme. In this example we'll be adding a widget to the above_mainasides hook. This allows you total control over the markup to insert whatever code you need. I've added classes in this example that generally follow thematic's methodology. If you remove them be warned that the layout will likely go wonky for lack of styling but you probably can work that out.
I'm not sure how to instruct you to filter the existing thematic_widget_areas in light of new changes coming to that area of the framework.
function register_my_widget_area() {
if ( !function_exists('register_sidebars') )
return;
// Register Widgetized area
register_sidebar(array(
'name' => 'Bovine Aside',
'id' => 'bovine_aside',
'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">', // or add your own markup here
'after_widget' => '</li>', // or add your own markup here
'before_title' => thematic_before_title(), // or add your own markup here
'after_title' => thematic_after_title(), // or add your own markup here
));
}
add_action('init','register_my_widget_area');
function add_bovine_aside() {
if ( is_sidebar_active('bovine_aside') ) { // will display only if there are active widgets for this sidebar
echo '<div id="bovine" class="aside main-aside">'. "\n" . '<ul class="xoxo">' . "\n"; // or add your own markup here
dynamic_sidebar('bovine_aside');
echo '</ul>' . "\n" . '</div><!-- #bovine .aside -->'. "\n"; // or add your own markup here
}
}
add_action('thematic_abovemainasides','add_bovine_aside');hope it helps- good luck- I'm off to the beach so I probably wont check to see how this worked for you for a few days.
You might try the latest SVN revision. With this new version you can filter the markup wrapping each widget. Using a filter you can add whatever is needed.
There are two functions responsible for the markup around the widgets:
// this function returns the opening CSS markup for the widget area
function thematic_before_widget_area($hook) {
$content = "\n";
if ($hook == 'primary-aside') {
$content .= '<div id="primary" class="aside main-aside">' . "\n";
} elseif ($hook == 'secondary-aside') {
$content .= '<div id="secondary" class="aside main-aside">' . "\n";
} elseif ($hook == '1st-subsidiary-aside') {
$content .= '<div id="first" class="aside sub-aside">' . "\n";
} elseif ($hook == '2nd-subsidiary-aside') {
$content .= '<div id="second" class="aside sub-aside">' . "\n";
} elseif ($hook == '3rd-subsidiary-aside') {
$content .= '<div id="third" class="aside sub-aside">' . "\n";
} else {
$content .= '<div id="' . $hook . '" class="aside">' ."\n";
}
$content .= "\t" . '<ul class="xoxo">' . "\n";
return apply_filters('thematic_before_widget_area', $content);
}
// this function returns the clossing CSS markup for the widget area
function thematic_after_widget_area($hook) {
$content = "\n" . "\t" . '' ."\n";
if ($hook == 'primary-aside') {
$content .= '</div><!-- #primary .aside -->' ."\n";
} elseif ($hook == 'secondary-aside') {
$content .= '</div><!-- #secondary .aside -->' ."\n";
} elseif ($hook == '1st-subsidiary-aside') {
$content .= '</div><!-- #first .aside -->' ."\n";
} elseif ($hook == '2nd-subsidiary-aside') {
$content .= '</div><!-- #second .aside -->' ."\n";
} elseif ($hook == '3rd-subsidiary-aside') {
$content .= '</div><!-- #third .aside -->' ."\n";
} else {
$content .= '</div><!-- #' . $hook . ' .aside -->' ."\n";
}
return apply_filters('thematic_after_widget_area', $content);
}If you could provide some more details 'bout the markup you want to add, I can show you how to create the two needed filters.
Chris
Hi Chris,
how can I add another div around every <ul class="xoxo"> without touching the widgets-extensions.php file? Can I remove the filters in my child themes function.php and build two new functions to create the opening and closing markup? I know it would work to edit these functions in the widgets-extensions.php but I want to solve this problem via my child theme.
Matthias
Hi Matthias,
think I missed something in my code. Currently you can filter the HTML code created by thematic_before_widget_area(), but you can't rebuild it.
You could wrap an unconditional div around every <ul class="xoxo">. Will need to change it to allow a conditional change.
Chris
Hi Chris,
thanks for your response. For the time beeing I did what you suggested above.
It works great so far but still it would be nice to have a solution to remove and rebuild the functions within the child theme.
Thanks and best regards,
Matthias
Hi Matthias,
I'll provide a fixed version within the next days.
Chris
gino
Member
Hi guys
I was wondering if anybody has fixed this.
I am trying to do exactly the same thing- ie:create a div around the primary widget area but I have not cracked it yet.
Hope someone has!
Thanks,
Gino
take a look at:
http://visualizing.thematic4you.com/
you can see the hooks of where you'd want to put stuff. to wrap up #primary you'd open at thematic_abovemainasides and close at thematic_betweenmainasides
gino
Member
Thanks Helga
I have only really just started using hook and filters but http://visualizing.thematic4you.com/ is very useful.
Cheers
Gino
This topic has been closed to new replies.
