$8
Help? Widgets don't have ID tags or specific class names
I'm working on a website for a client and I need to replace the widget headings with images but I can't find IDs or specific classes so I can change the css for them.
The theme was built with a www.wpthemebuilder.com
How do I change individual widget styles if they all have the same class and no ID? or how do I make it so they do have IDs etc so I can style specific widgets according to their ID or class name...??
The site is http://confiance.com.au/home/
Help greatly appreciated..
Cheers,
Jayden
Jayden Osborne | 08/06/10 at 2:24am
| Edit
(4) Possible Answers Submitted...
-

Last edited:
08/06/10
2:53amEhthisham tk says:open your functions.php
there you can find your widgets
refer this
register_sidebar(array(
'name'=>'sidebar1',
'before_widget' => '<div class="three_post" id="">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle" style="">',
'after_title' => '</h2>',
));
ok
this is your code all have class sidebar-item
<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'latestnews',
'before_widget' => '<div class="sidebar_item">',====>You can change this to a different one in each sidebar
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));Previous versions of this answer: 08/06/10 at 2:37am | 08/06/10 at 2:53am
- 08/06/10 2:48am
Jayden Osborne says:Sorry I'm a lament when it comes to code, you'll have to hold my hand for this one haha. I dont see any IDs or individual style tags? here is the code:
/* Static Sidebar to Widgetized Sidebar */
if($wptm_theme_vars['widgetize_default_sb'] == 'yes'){
if( function_exists('register_sidebar') ){
register_sidebar(array('name' => 'wptb_default_sidebar',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
}
}
?>
<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'latestnews',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'currentprojects',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'purchase',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">')); ?> - 08/06/10 3:01am
Ehthisham tk says:if($wptm_theme_vars['widgetize_default_sb'] == 'yes'){
if( function_exists('register_sidebar') ){
register_sidebar(array('name' => 'wptb_default_sidebar',
'before_widget' => '<div class="sidebar_item_one" id="first_sidebar">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
}
}
?>
<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'latestnews',
'before_widget' => '<div class="sidebar_item_two">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'currentprojects',
'before_widget' => '<div class="sidebar_item_three">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'purchase',
'before_widget' => '<div class="sidebar_item_four">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">')); ?>
You can add another sidebar by just adding these
register_sidebar(array('name' => 'Sidebar name',
'before_widget' => '<div class="classname" id="idname">', ===>this appears before widget starts you can add anything there div or img tag and give id or class to style them
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3 class="h3title"', ==>give class to style title
'after_title' => '</h3></div><div class="widget_content">')); - 08/06/10 3:16am
Jayden Osborne says:I tried replacing your code with mine and this is what happened see screenshot.
Also appeared on live site too. Just to clarify I only want one sidebar, Don't even intend to use the other areas. I just want the widgets within that one sidebar to have ID's or class names so I can change ach heading on each widget to a different image. - 08/06/10 3:21am
Ehthisham tk says:you don't need to replace the entire code just change the class parameter
chk spaces between <?php ?> - 08/06/10 3:26am
Ehthisham tk says:if you know the sidebars name then search for it [name =>"??"]
and if you want to change title to image
'before_title' => '<div class="widget_title"><img src=""/>',
'after_title' => '</div><div class="widget_content">')); - 08/06/10 7:31pm
Jayden Osborne says:Yeah but I want to change the headings of the individual widgets within the sidebar and each widget needs a different image heading and I can't do it without having a unique ID or Class name for each widget. Sorry for being a pain I dont know any PHP only html and css and its the individual widgets I want to change not the overall sidebar...?
- 08/06/10 2:48am
-

Last edited:
08/06/10
11:50pmenodekciw says:Hello,
One question:
Are those widgets hardcoded or you are placing them within admin panel?- 08/06/10 2:41am
Jayden Osborne says:Placing them within admin panel. But I think there are 4 different widget areas hardcoded into the sidebar but Im only using one. If that makes sense?
I've attached an image so you can see what I mean - 08/06/10 2:57am
enodekciw says:/* Static Sidebar to Widgetized Sidebar */
if($wptm_theme_vars['widgetize_default_sb'] == 'yes'){
if( function_exists('register_sidebar') ){
register_sidebar(array('name' => 'wptb_default_sidebar',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title" id="%1$s"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
}
}
?>
<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'latestnews',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'currentprojects',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'purchase',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">')); ?>
replace your code this one i've pasted above. - 08/06/10 2:59am
enodekciw says:Oh, I think I've forget to mention what I've changed in your code.
It is, that I've added id to your div with 'widget_title' class. - 08/06/10 3:19am
Jayden Osborne says:Replaced my code with yours and this came up:
Just to clarify I only want one sidebar, Don't even intend to use the other areas. I just want the widgets within that one sidebar to have ID's or class names so I can change ach heading on each widget to a different image.
PHP Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /s101-2/home6/confiance/home/wp-content/themes/confiance-australia/functions.php:94) in /s101-2/home6/confiance/home/wp-content/plugins/custom-contact-forms/custom-contact-forms.php on line 828 PHP Stack trace: PHP 1. {main}() /s101-2/home6/confiance/home/wp-admin/theme-editor.php:0 PHP 2. require_once() /s101-2/home6/confiance/home/wp-admin/theme-editor.php:10 PHP 3. require_once() /s101-2/home6/confiance/home/wp-admin/admin.php:20 PHP 4. require_once() /s101-2/home6/confiance/home/wp-load.php:30 PHP 5. require_once() /s101-2/home6/confiance/home/wp-config.php:90 PHP 6. do_action() /s101-2/home6/confiance/home/wp-settings.php:283 PHP 7. call_user_func_array() /s101-2/home6/confiance/home/wp-includes/plugin.php:395 PHP 8. customcontactforms->startsession() /s101-2/home6/confiance/home/wp-includes/plugin.php:0 PHP 9. session_start() /s101-2/home6/confiance/home/wp-content/plugins/custom-contact-forms/custom-contact-forms.php:828 PHP Warning: Cannot modify header information - headers already sent by (output started at /s101-2/home6/confiance/home/wp-content/themes/confiance-australia/functions.php:94) in /s101-2/home6/confiance/home/wp-admin/theme-editor.php on line 89 PHP Stack trace: PHP 1. {main}() /s101-2/home6/confiance/home/wp-admin/theme-editor.php:0 PHP 2. header() /s101-2/home6/confiance/home/wp-admin/theme-editor.php:89 - 08/06/10 3:22am
enodekciw says:I've edited my code piece a bit more:
/* Static Sidebar to Widgetized Sidebar */
if($wptm_theme_vars['widgetize_default_sb'] == 'yes'){
if( function_exists('register_sidebar') ){
register_sidebar(array('name' => 'wptb_default_sidebar',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title" id="%1$s"><h3 id="%1">',
'after_title' => '</h3></div><div class="widget_content">'));
}
}
?>
<?php if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'latestnews',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'currentprojects',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">'));
if ( function_exists('register_sidebar') )
register_sidebar(array('name' => 'purchase',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3>',
'after_title' => '</h3></div><div class="widget_content">')); ?>
now you should be able to target your sidebar heading like this:
div#givenid h3 {}
or
h3#givenid {}
replace your code snippet with mine and generate page to get specific id names. - 08/06/10 3:27am
enodekciw says:to use only one widget area (sidebar) replace that code with this one:
if($wptm_theme_vars['widgetize_default_sb'] == 'yes'){
if( function_exists('register_sidebar') ){
register_sidebar(array('name' => 'wptb_default_sidebar',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title" id="%1$s"><h3 id="%1">',
'after_title' => '</h3></div><div class="widget_content">'));
}
}
?>
- 08/06/10 4:31am
enodekciw says:OK, last code snippet I'm posting. Tested, and working.
/* Static Sidebar to Widgetized Sidebar */
if($wptm_theme_vars['widgetize_default_sb'] == 'yes'){
if( function_exists('register_sidebar') ){
register_sidebar(array('name' => 'wptb_default_sidebar',
'before_widget' => '<div class="sidebar_item">',
'after_widget' => '</div></div>',
'before_title' => '<div class="widget_title"><h3 id="%1$s">',
'after_title' => '</h3></div><div class="widget_content">'));
}
}
?>
Replace that code you've got pasted here. Check page source for h3 IDs and target them like this: h3#givenid. Hope this helps. - 08/06/10 7:22pm
Jayden Osborne says:Sorry I know absolutely no PHP and am super confused... I need a different ID for each widget in the sidebar as each one will have a different image heading.
Doing the above code gives every widget in the sidebar the same ID right? or do I have to duplicate the code 3 more times with 3 different IDs so each widget has a different ID so I can target each widget to give it a different image heading?
Sorry again for being a pain I suck at this back end stuff - 08/06/10 7:54pm
enodekciw says:No, pasting above code gives every h3 tag different ID.
'before_title' => '<div class="widget_title"><h3 id="%1$s">',
%1$s is the trick. It'll generate different IDs for all widget titles in your sidebar.
Just paste in my given code, check the source to get the unique h3 IDs and use them to style headings differently.
- 08/06/10 2:41am
-

Last edited:
08/06/10
3:05amMike Schinkel says:Add this to your theme's functions file:
add_action('dynamic_sidebar_params', 'my_dynamic_sidebar_params');
function my_dynamic_sidebar_params($args) {
echo '===================';
print_r($args);
echo '===================';
// Do something in here to add your ids
$args[0]['before_widget'] = $args[0]['before_widget']; // this is probably what you need to change
return $args;
}
It "hooks" the point at when you can modify the widget "before_widget" property and add your ID and/or class. The echo and print_r() are just so you can see in the view source what the value of $args looks like.
If you need more help, just ask.
UPDATE: At first I saw that you said you were using the admin and mine answer works for that. Then I saw that you actually hardcoded spaces. So their answers may be better. If not, try mine.
Previous versions of this answer: 08/06/10 at 3:05am
- 08/06/10 3:27am
Jayden Osborne says:So if I put the code above in my theme functions do I need to do anything to it like where it says // Do something in here to add your Ids....
or afterwards can I just go to my page source and see different ids/classes for each widget?
I didnt hardcode the spaces the theme builder I used put them in and I couldnt get rid of them after I inserted them I only want one sidebar otherwise its just confusing and complicated. PS. I only know html and css haha... - 08/06/10 11:44am
Mike Schinkel says:Jayden: I'm going to pass on this one. I assumed you knew some PHP. I'm going to let the others help you on this one.
- 08/06/10 3:27am
-

Last edited:
08/06/10
9:12amRamsey says:Search your functions.php file for:
if ( function_exists('register_sidebar') )
Then look for:
<div id="%1$s">
That id=%1$s code tells the file to set a specific identifier per widget.
If you don't see that, use the following code to replace all your register_sidebar stuff:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div id="%1$s" class="sidebar-box">',
'after_widget' => '</div>',
'before_title' => '<h2 class="sidebar">',
'after_title' => '</h2>',
));
Now you can use CSS to style each one differently. Add a widget, reload your theme, and view-source to see the actual code you need to use in your stylesheet so you can customize it.
(Edited to add that I have done this exact thing, using CSS to replace H2 tag headers for each widget sidebar, on my own website which can be seen in my profile.)Previous versions of this answer: 08/06/10 at 9:09am | 08/06/10 at 9:10am | 08/06/10 at 9:12am
This question has expired.
Current status of this question: Completed





