ThemeShaper Forums » Thematic

[closed]

Adding tags around WP generated code +Mootools

(17 posts)
  • Started 4 years ago by jbtank
  • Latest reply from gino
  • This topic is not resolved
  1. 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!

    Posted 4 years ago #
  2. 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.

    Posted 4 years ago #
  3. 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.

    Posted 4 years ago #
  4. 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)?

    Posted 4 years ago #
  5. 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)?

    Posted 4 years ago #
  6. 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)

    Posted 4 years ago #
  7. 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.

    Posted 4 years ago #
  8. Swamped right now but may I can throw something later.

    Posted 4 years ago #
  9. 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.

    Posted 4 years ago #
  10. 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

    Posted 4 years ago #
  11. 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

    Posted 4 years ago #
  12. 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

    Posted 4 years ago #
  13. 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

    Posted 4 years ago #
  14. Hi Matthias,

    I'll provide a fixed version within the next days.

    Chris

    Posted 4 years ago #
  15. 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

    Posted 3 years ago #
  16. 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

    Posted 3 years ago #
  17. gino
    Member

    Thanks Helga

    I have only really just started using hook and filters but http://visualizing.thematic4you.com/ is very useful.

    Cheers

    Gino

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.