Widgets Making Theming Tricky

I wonder if the plugin Widgetize Anything would help. You can plop that code right in, sans title coding.

You can try my code from my functions.php to reset the title and list elements of widgets and/or replace them (eg. with display:none):

if ( function_exists('register_sidebars') )
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '', // Removes <li>
'after_widget' => '', // Removes </li>
'before_title' => '', // Replaces <h2>
'after_title' => '', // Replaces </h2>
));
register_sidebar(array('name'=>'sidebar2',
'before_widget' => '', // Removes <li>
'after_widget' => '', // Removes </li>
'before_title' => '', // Replaces <h2>
'after_title' => '', // Replaces </h2>
));
register_sidebar(array('name'=>'sidebar3',
'before_widget' => '', // Removes <li>
'after_widget' => '', // Removes </li>
'before_title' => '', // Replaces <h2>
'after_title' => '', // Replaces </h2>
));

You can also download the sandbox theme and look in the code of the functions.php, I remember there is another solution (and more interesting stuff).

Good luck!

Thank you both for the replies – Evita, this seems interesting – my PHP isn’t as strong as it could be, but this looks like exactly what I’m after. If I’m reading this code correctly, this loops through any sidebars whether there is one, two or three, and removes any

• items, and adds <h2> to the titles. Does that sound correct? If so, would I simply paste in this block of code at the bottom of functions.php?

Thanks again for the help in advance..

Toby

Is it really so much harder now or am I missing something?

You can still do just that, but without seeing your actual site, I can’t tell you how to reference the widget titles.

Post a link to your site.

Evita’s method will work, but it seems like major overkill to me. If you’re just wanting to make the things italic and such, then you only need to mess with the CSS. If you want to actually change the tags, then you mess with the functions.php file.

my site is at:

https://iphonecafe.org

one example of a problem I’ve faced is in the sidebar, I wanted to replace the widget titles with an image – I’ve achieved through a horrible hack, you might be able to see I’ve just shrunk the text down to 0.1em and placed a background image. Normally I’d do:

<a href="#" id="linkHiddenTxt"><i>My Title</i></a>

and then use CSS to set margin-left on <i> to -999em, which creates stantards compliant, accessible code. However, to achieve this using widgets I would have to edit the PHP code somehow.

It seems a shame, I love the new way of controlling the sidebar, I hoped I was missing something regarding the usage of the new widgets.

Many thanks,

Toby

Well, there’s plenty of classes and such, so you can directly access those bits.. Look at XHTML it actually produces:

<li id="tag_cloud" class="widget widget_tag_cloud">
<h2 class="widgettitle">Tags</h2>
<a href='https://www.iphonecafe.org/tag/3g/' class='tag-link-8' title='3 topics' rel="tag" style='font-size: 11.5pt;'>3G</a>
...

So, .widget .widgettitle will reference all the titles, you can reference the tag cloud title directly with .widget_tag_cloud .widgettitle and so on.

But for replacing text with images, I see your problem.

My first recommendation would be: Don’t do that. Instead of replacing text with an image of text, style the text to look like the image instead. That bar immediately following the text could be done with a relative position background image if you really wanted to do that. Just a make a long image of a bar, set the background of the title to it, with the right positioning and fixed width.

However, if you really want to use those image backgrounds… This is a better way:

.widget .widgettitle {
    padding: 50px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:50px;
}

.widget_tag_cloud .widgettitle {
	background-image: url("images/latte-tagcloud.gif");
	background-position: -10px center;
	color:  #5d5d5d;
}

.widget_recent_entries .widgettitle {
	background-image: url("images/latte-recentposts.gif");
	background-position: -10px center;
	color:  #5d5d5d;
}

Hi – apologies for the slow posting, I have been trying many different methods to resolve this issue, including the ones suggested here. I have found that I can make minor changes to widgets.php to standardize the sidebar, along with the css tip above by Otto I have been able to achieve everything I need. Many thanks!