ThemeShaper Forums » Thematic

[closed]

Removing a class and replacing with my own class!

(17 posts)
  • Started 7 years ago by proto
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. proto
    Member

    Hi there,

    I'm working with Thematic and 960.gs, because I find both so great. I also would like to thank the good people on here who take the time to help people like me out!

    The problem:

    I've created three new widget areas below my footer and added classes to them but the parent div retains the class of ".aside" this I think is throwing my CSS and webpage display out of sync. (See live demo of my webpage where the first widget area is elevated compared with the next two). http://www.universalonewebdesign.com/bespoke-design-four/

    Aim:

    I would like to know how to remove the class from any given element and replace it with one of my own as I really like 960.gs and its class grid styling options. My newly created widgets areas seem to automatically have the parent div with ".aside" attached to them. I looked at remove_action on the Wordpress Codex but couldn't understand how to apply it to my website. I tried but couldn't get it to work!

    My new widget areas code

    <?php 
    
    // Register the extra Top-right Aside
    
    function pixelwoo_top_right_aside() {
    	register_sidebar(array(
    	'name' => 'Top Right Aside',
    	'id' =>'top-right-aside',
    	'description' =>__('A widget area at the top-right hand side of the website.' , 'thematic'),
    	'before_widget' => thematic_before_widget(),
    	'after_widget' => thematic_after_widget(),
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_top_right_aside');
    
    // Add Top Right Widget Area
    
    function add_pixelwoo_top_right_aside() {
    	if (is_sidebar_active('top-right-aside')) {
    	echo thematic_before_widget_area ('top-right-aside');
    	dynamic_sidebar ('top-right-aside');
    	echo thematic_after_widget_area('top-right-aside');
    }}
    
    add_action ('thematic_header' , 'add_pixelwoo_top_right_aside', 2);
    
    // Register the footer bottom left
    
    function pixelwoo_footer_bottom_left() {
    	register_sidebar(array(
    	'name' => 'Footer Bottom Left',
    	'id' =>'footer-bottom-left',
    	'description' =>__('A widget area at the bottom left of the website.' , 'thematic'),
    	'before_widget' => '<div class="grid_4 alpha">',
    	'after_widget' => '</div">',
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_footer_bottom_left');
    
    // Add Footer Bottom Left
    
    function add_pixelwoo_bottom_left_aside() {
    	if (is_sidebar_active('footer-bottom-left')) {
    	echo thematic_before_widget_area ('footer-bottom-left');
    	dynamic_sidebar ('footer-bottom-left');
    	echo thematic_after_widget_area('footer-bottom-left');
    }}
    
    add_action ('thematic_belowfooter' , 'add_pixelwoo_bottom_left_aside', 2);
    
    // Add Footer Center
    
    function pixelwoo_footer_centre() {
    	register_sidebar(array(
    	'name' => 'Footer Bottom Center',
    	'id' =>'footer-centre',
    	'description' =>__('A widget area at the footer centre of the website.' , 'thematic'),
    	'before_widget' => '<div class="grid_4">',
    	'after_widget' => '</div">',
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_footer_centre');
    
    // Add Footer Center
    
    function add_pixelwoo_footer_center() {
    	if (is_sidebar_active('footer-centre')) {
    	echo thematic_before_widget_area ('footer-centre');
    	dynamic_sidebar ('footer-centre');
    	echo thematic_after_widget_area('footer-centre');
    }}
    
    add_action ('thematic_belowfooter' , 'add_pixelwoo_footer_center', 3);
    
    // Add Footer Center
    
    function pixelwoo_footer_bottom_right() {
    	register_sidebar(array(
    	'name' => 'Footer Bottom Right',
    	'id' =>'footer-bottom-right',
    	'description' =>__('A widget area at the footer centre of the website.' , 'thematic'),
    	'before_widget' => '<div class="grid_4 omega">',
    	'after_widget' => '</div">',
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_footer_bottom_right');
    
    // Add Footer Center
    
    function add_pixelwoo_footer_bottom_right() {
    	if (is_sidebar_active('footer-bottom-right')) {
    	echo thematic_before_widget_area ('footer-bottom-right');
    	dynamic_sidebar ('footer-bottom-right');
    	echo thematic_after_widget_area('footer-bottom-right');
    }}
    
    add_action ('thematic_belowfooter' , 'add_pixelwoo_footer_bottom_right', 4);
    
    ?>
    Posted 7 years ago #
  2. the problem is that you are calling thematic_before_widget_area and passing it a hook that isn't defined in the default function

    // 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);
    }

    you can see that the ELSE statement will always add the aside class. so removing that from your widget's function will remove the aside class

    // Add Footer Center
    
    function pixelwoo_footer_bottom_right() {
    	register_sidebar(array(
    	'name' => 'Footer Bottom Right',
    	'id' =>'footer-bottom-right',
    	'description' =>__('A widget area at the footer centre of the website.' , 'thematic'),
    	'before_widget' => '<div class="grid_4 omega">',
    	'after_widget' => '</div">',
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_footer_bottom_right');
    
    // Add Footer Center
    
    function add_pixelwoo_footer_bottom_right() {
    	if (is_sidebar_active('footer-bottom-right')) {
    	dynamic_sidebar ('footer-bottom-right');
    }}
    
    add_action ('thematic_belowfooter' , 'add_pixelwoo_footer_bottom_right', 4);
    Posted 7 years ago #
  3. proto
    Member

    Thank you so much Helgatheviking,

    Your help is much appreciated!

    Is there a simple way (eg a filter or something) to remove a class and then add my own. I just wondered as I'd like to change the class on the Primary and Secondary Sidebars. In my mind's eye (which could be wrong!!) I thought a filter might do it?

    :)

    Posted 7 years ago #
  4. yeah you filter thematic_before_widget_area(). unfortunately the filter doesn't pass the $hook variable (i think it should) so you have to do a string replace

    here's an example:
    http://forums.themeshaper.com/topic/thematic_before_widget_area#post-22913

    but you'd do a string replace for

    <div id="primary" class="aside

    and change it to

    <div id="primary" class="bacon

    or whatever class you'd prefer. might have to escape the quotes, i'm not 100% sure and i while i know there is a more relevant example around somewhere in the forums i couldn't find it.

    Posted 7 years ago #
  5. proto
    Member

    Thanks Helga,

    I modified the code as to replicate your example on the third post above this one that you kindly provided to change my footer centre (and applied this to all my other new widget areas). The .aside class and the ID of the widget areas is removed. I would like to keep my widget area ID but lose the ".aside" class.

    When removed from my widget code the folllwing line removes my ID as well as the .aside Class. All I would like to do is remove the ". aside" class

    'echo thematic_before_widget_area ('footer-bottom-right');'

    Sorry if I haven't put it clearly, in one sentence - all I want is to keep my Widget Area ID's and add my custom classes (eg 'grid_4') to them. Any of you kind folks out there that can help it would be great!

    Here's my code:

    // Register the footer bottom left
    
    function pixelwoo_footer_bottom_left() {
    	register_sidebar(array(
    	'name' => 'Footer Bottom Left',
    	'id' =>'footer-bottom-left',
    	'description' =>__('A widget area at the bottom left of the website.' , 'thematic'),
    	'before_widget' => '<div class="grid_4 alpha">',
    	'after_widget' => '</div">',
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_footer_bottom_left');
    
    // Add Footer Bottom Left
    
    function add_pixelwoo_bottom_left_aside() {
    	if (is_sidebar_active('footer-bottom-left')) {
    	dynamic_sidebar ('footer-bottom-left');
    }}
    
    add_action ('thematic_belowfooter' , 'add_pixelwoo_bottom_left_aside', 2);
    
    // Add Footer Center
    
    function pixelwoo_footer_centre() {
    	register_sidebar(array(
    	'name' => 'Footer Bottom Center',
    	'id' =>'footer-centre',
    	'description' =>__('A widget area at the footer centre of the website.' , 'thematic'),
    	'before_widget' => '<div class="grid_4">',
    	'after_widget' => '</div">',
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_footer_centre');
    
    // Add Footer Center
    
    function add_pixelwoo_footer_center() {
    	if (is_sidebar_active('footer-centre')) {
    	dynamic_sidebar ('footer-centre');
    }}
    
    add_action ('thematic_belowfooter' , 'add_pixelwoo_footer_center', 3);
    // Add Footer Bottom Right
    
    function pixelwoo_footer_bottom_right() {
    	register_sidebar(array(
    	'name' => 'Footer Bottom Right',
    	'id' =>'footer-bottom-right',
    	'description' =>__('A widget area at the footer centre of the website.' , 'thematic'),
    	'before_widget' => '<div class="grid_4 omega">',
    	'after_widget' => '</div">',
    	'before_title' => thematic_before_title(),
    	'after_title' => thematic_after_title(),
    	));
    }
    add_action('init', 'pixelwoo_footer_bottom_right');
    
    // Add FooterBottom Right
    
    function add_pixelwoo_footer_bottom_right() {
    	if (is_sidebar_active('footer-bottom-right')) {
    	dynamic_sidebar ('footer-bottom-right');
    
    }}
    
    add_action ('thematic_belowfooter' , 'add_pixelwoo_footer_bottom_right', 4);
    Posted 7 years ago #
  6. 'before_widget' => '<div class="grid_4 alpha">',

    before_widget can be whatever you want it to be

    'before_widget' => '<div id="bacon-widget" class="grid_4 alpha">',
    Posted 7 years ago #
  7. proto
    Member

    head * facepalm /I didn't think of this LOL! Thank you lovely Helgatheviking!

    To remove the primary class of .aside I would do something like

    function change_primary_before_widget_area($content) {
        return str_replace('class', 'grid_4', $content);
    }
    add_filter('thematic_before_widget_area','change_primary_before_widget_area');
    
    function change_primary_after_widget_area($content) {
        return str_replace('class', '</div>', $content);
    }
    add_filter('thematic_after_widget_area','change_primary_after_widget_area');

    I hope I'm not heading for another head * facepalm moment!!!

    Posted 7 years ago #
  8. well you kind of are. first you don't need 2 functions. you can combine them into one.... except that there isn't really a reason to modify the closing div... in fact, you've successfully removed the closing div and replaced it with text. you've probably totally messed up your markup as a result.

    second, str_replace means "string replace". the way you have it now, you will replace the string "class" with the string "grid_4" which will result in <div id="primary" grid_4="aside"> which is obviously isn't going to work.

    Posted 7 years ago #
  9. proto
    Member

    Thanks Helgatheviking,

    Your explanation is great.

    The only problem I hope you can help with is that I don't want to remove all ".aside" classes, is their a way to just remove the aside from a specific ID (in this case the #primary and #secondary div's? How to I just target these div's for a class change and the leave all other ".aside" div's alone!?)

    Thanks so much!

    Posted 7 years ago #
  10. return str_replace('<div id="primary" class="aside', '<div id="primary" class="grid_4', $content);
    Posted 7 years ago #
  11. proto
    Member

    Thank you Helgatheviking!

    You're a credit to this forum, much appreciated, I shall mark this topic as solved!

    Posted 7 years ago #
  12. proto
    Member

    For help for anyone else who wants to change the div or class of a NON-widgetised area, just HTML markup, how do I replace the class of an existing div, after Helga's helpful answer I research str_replace and came up with this code:

    function pixelwoo_change_main_class() {
    $search  = ('<div id="main">');
    $replace = ('<div id="main" class="container_12">');
    $subject = ('<div id="main">');
    echo str_replace($search, $replace, $subject);
    }

    The above code didn't work so I tried to add it to my header like using the add_filter:

    add_action('thematic_header', 'pixelwoo_change_main_class');

    and it added the HTML I wanted to the header but didn't replace the old code. Any thoughts greatly appreciated on how to search and replace that HTML markup!! :)

    Posted 7 years ago #
  13. you used ECHO when you need RETURN

    Posted 7 years ago #
  14. proto
    Member

    Thanks Helga, as per your help, I've tried:

    function pixelwoo_change_main_class() {
    $search  = ('<div id="main">');
    $replace = ('<div id="main" class="container_12">');
    $subject = ('<div id="main">');
    return str_replace($search, $replace, $subject);
    }

    But it doesn't seem to work, any thoughts? :)

    Posted 7 years ago #
  15. you can't start a string w/ a parens and you can't filter the class on the #main div anyway... there's no apply_filter, which is your signal you can filter something. the widgets HAVE a filter, which is what you were originally doing.

    either copy header.php into your child theme and edit there. or just assign the css rules for .container_12 to #main (probably the best route). you are over-complicating.

    Posted 7 years ago #
  16. proto
    Member

    Thanks Helga,

    I was hoping for a solution did a hopefully (quick and simple) string replace on the html markup. I found some code from the PHP manual on str_replace (after's Helga's kind help) that suggested you could replace any string, I just couldn't get it to work inside wordpress!! Here's the code I used:

    $search  = ('<div id="main">');
    $replace = ('<div id="main" class="container_12">');
    $subject = ('<div id="main">');
    return str_replace($search, $replace, $subject);

    If anyone else has an answer on how to do this in case someone else would like to modify html markup not in a Widgetised area for thematic that would be great. Otherwise, thanks again Helga for your help, you're a credit to this forum!

    Posted 7 years ago #
  17. you're welcome, but just to repeat, you cannot modify html markup with a string replace, b/c there is no string variable to run str_replace on. you can only do the str_replace on a string (or string variable)... and only on something that has an APPLY_FILTERS(), which is your sign that a variable can be filtered.

    try the second suggestion i gave you.

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.