Adding Images to Widget Titles?

  • Resolved jameswoon

    (@jameswoon)


    15 years, 9 months ago

    Hi,

    I have been searching what I can only assume is everywhere. I usually do not post until I have done this anyway. I was hoping someone could help me with this by maybe suggesting a hack that already exists or by giving me a hand.

    Basically I just want to put little icons in the titles of each of my widgets. That means a custom icon for each widget’s title. The easiest way I thought of doing this was putting an image on the left of a title

    i.e. <img src='RecentPostsIcon.png'>Recent Posts

    But ofcourse WP won’t allow you to put HTML in the titles of widgets. So yeah, I hope this kind of sums up what I have been trying to do!

    Blog is at https://blog.fantomed.org and version 2.8 – Thanks anyone who can help me out.

Viewing 4 replies - 1 through 4 (of 4 total)

  • if it’s not in the middle, but at the left or right of the title, you could do this purely with CSS. each widget has a unique id so the heading of a widget can be selected with eg

    li#text-133974000 h2 { … }

    and you use ordinary css to set the background image with all the usual css stuff and background-repeat: no-repeat so it only appears the once. inset your text with padding to accomodate the image and so on

    Thread Starter jameswoon

    (@jameswoon)

    Where is that unique id? I do not seem to have that in my theme. Is there something I can edit in the theme so that an ID is assigned to each of the widget headers?

    Seems like the headers just look like the below:
    <div class="sidebarbox"> <h2>Events</h2> <ul>

    My site: https://blog.fantomed.org as previously mentioned. Thanks.

    i can’t remember the right way to set it up off the top of my head, but looking at your site, you have 4 sidebars and only the top one (sidebar_full) doesn’t show those unique IDs. so however the other 3 are declared, copy that.

    eg your sidebar_right is structured:

    div#sidebar_right
	ul
		li#meta-3
			div
				h2
				ul
		li#archives-2
			div
				h2
				ul
    Thread Starter jameswoon

    (@jameswoon)

    Ah hah! I found it. It was because the first ‘widget box’ was manually chucked into the theme and I didn’t put in the ID. Thanks tons for this!

    In case anyone needs the rough code for it here’s an example of how I did it:

    #wp-wall h2.widgettitle {
  background: url(images/icons/WallIcon.png) top right no-repeat;
}

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding Images to Widget Titles?’ is closed to new replies.