Images as Widget Titles

  1. Lassirra


    It would be helpful to be able to specify an image as the "title" of a widget, instead of being forced to use text or not specify a title and then have to include the image in the body of the widget instead. For sites with a lot of content in the sidebar, it really helps add visual appeal if you're not just using a bunch of text.

    As it stands now, if I forgo a text title and include an image in the body of a widget to act as a faux title, when I look in my Dashboard I see a slew of widgets that just say "Text"--telling me nothing about which widget is which until I open them to see.

    I would like to have something added to the widgets interface where I should specify an image as the title, and in the Dashboard I could either see the image or a smaller version of it as the title so I know which is which at a glance.

    Barring that, it would be nice if we could specify "hidden" titles for widgets that would only be visible in the Dashboard. That way, if we're forced to place title images within the body of widgets, we could at least use the "hidden" title to tell them apart easily.

    Posted: 6 years ago #
  2. LoneWolfMuskoka


    If an image is used for a title, there should be an "Alt" field as well for the image that can be used where appropriate.

    Posted: 6 years ago #
  3. andykillen


    You can do what you want with CSS.

    Images used as titles use Text Replacement techniques and will never have ALT= in them as they do not use HTML <img> tag

    Basically every widget is named and thus every title has a unique name or class... so for example....

    this in your style.css
    #sidebar .widget-categories h4 {background: transparent url(image.png) no-repeat; width:200px; height:20px}
    #sidebar .widget-categories h4 span {dispaly:none}

    and this in your functions.php
    'description'=>'This is the sidebar.',
    'before_widget' => '<div class="sidebarBox">',
    'after_widget' => '</div>',
    'before_title' => '<h4><span>',
    'after_title' => '</span></h4>'

    This is only an example and will most likely not work out the box for your site, but trust me the technology and possibilities are already there for what you want.

    Posted: 6 years ago #
  4. Justin Tadlock


    This should be done via CSS.

    Posted: 6 years ago #
  5. Gallbladder

    I must agree with andykillen because I usually do that on my blog. Via CSS.

    Posted: 5 years ago #
  6. 5 years ago... is it fixed now?

    Posted: 11 months ago #
  7. as said above, it can be done via css

    Posted: 11 months ago #
  8. babylyde

    This should be done via CSS. Or is it possible now?

    Posted: 7 months ago #
  9. rkprimetimber

    Yes It can also be done through latest html5

    Posted: 5 months ago #

RSS feed for this topic


You must log in to post.

  • Rating

    15 Votes
  • Status

    This is theme territory