WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding Images to Widget Titles? (5 posts)

  1. jameswoon
    Member
    Posted 4 years 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 http://blog.fantomed.org and version 2.8 - Thanks anyone who can help me out.

  2. alanft
    Member
    Posted 4 years ago #

    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

  3. jameswoon
    Member
    Posted 4 years ago #

    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: http://blog.fantomed.org as previously mentioned. Thanks.

  4. alanft
    Member
    Posted 4 years ago #

    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
  5. jameswoon
    Member
    Posted 4 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic