Changing sidebar widget titles to images

The RSS widget show an RSS image so look in wp-includes/widgets.php (line 1068 in 2.5.1) for an example of that.

Michael,

Thanks, but I think you may have misunderstood my question. I know how to generally put images in the sidebar — but how do I replace the TITLES with images, for example how do I replace the text “Pages” with a custom image I’ve made?

-ben

I believe I understand, but i don’t think you are going to be able to do that with the help of some plugin (don’t know of one), or ‘hacking’ the core code.

You should be able to do this pretty easily with a bit of CSS.

Each widget title is between nifty <h2> tags before each widget title is an

• tag with a specific class for each type of widget. For instance, the recent comments widget looks like this on your site (up to the title):

<li id="recent-comments" class="widget widget_recent_comments"> <h2 class="widgettitle">Recent Comments</h2>

With a bit of CSS, you could easily just hide the text and display a background image in it’s place:

.widget_recent_comments h2 {
text-indent: -9999px;
background-image: url('imageurl.jpg');
display: block;
width: 100px;
height: 100px;
}

Something around those lines should get you started, then just make a similar title for each widget (you can find their class by viewing the source of your blog).

How do I edit the code on a widget? I can’t find that.

What jerhoyet said, you only make the changes in CSS which can manipulate what is viewed on monitor by moving text enclosed in class and h2 in your sidebar with background images on same area.

You will do this in style.css for each of the widget titles you want to replace with an image. Good luck.

madc.nic.in

What jerhoyet said, you only make the changes in CSS which can manipulate what is viewed on monitor by moving text enclosed in class and h2 in your sidebar with background images on same area.

You will do this in style.css for each of the widget titles you want to replace with an image. Good luck.

Ok, maybe I’m missing something here… when I look at the .css file on my theme I do not see anything about these widgets like you’re talking about.

that’s right there is nothing yet. you have to add in a chunk of CSS for each widget like

.widget_recent_comments h2 { [yr css code here much as guy said above] }

eg for the widget whose ‘class’ is widget_recent_comments

look in the HTML of your page for something like <LI id=’blah’ class=’widget widget_blah’> you can style that block of code, that widget, by its unique class (widget_blah). you specify this in the CSS by .widget_blah, and the title bit of that block by specifying .widget_blah h2

Here is a workaround

https://www.kevinpadams.com/?p=592