Sidebar Image Headings

if the categories are displaying in your sidebar use

wp_list_categories(“title_li=”);

where the wp_list_categories();

function is present, or pm me so i can guide you much better.

— Adeel Shahid

Okay, I’m not sure how to PM so here’s what I’ve found. This is the code in the leftmenu.php file:

<!-- begin left-menu -->

<div id="left-menu">

<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/header.gif" alt="logo" style="border: 0;" /></a>

<?php if ( !function_exists('dynamic_sidebar')

        || !dynamic_sidebar(1) ) : ?>

<h2><?php _e('Pages'); ?></h2>

   <ul>

     <?php wp_list_pages('depth=1&title_li='); ?>

   </ul>

<h2><?php _e('Categories'); ?></h2>

   <ul>

    	<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

   </ul>

<h2><?php _e('Archives'); ?></h2>

   <ul>

    	<?php wp_get_archives('type=monthly'); ?>

   </ul>

<h2><?php _e('Meta'); ?></h2>

   <ul>

	<?php wp_register(); ?>

	<li><?php wp_loginout(); ?></li>

	<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>" class="feed"><?php _e('Entries <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>

	<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('Syndicate comments using RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>

	<li><a href="https://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><?php _e('Valid'); ?> <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>

	<li><a href="https://jigsaw.w3.org/css-validator/check/referer" title="This page has valid CSS"><?php _e('Valid'); ?> <abbr title="Cascading Style Sheets">CSS</abbr></a></li>

        <?php wp_meta(); ?>

    </ul>

<?php endif; ?>

</div>

<!-- end left-menu -->

I see wp_list_cats, is that where I would need to insert code to include an image before the list? And if so where exactly would you place the code for the image?

Also, categories is maybe not the best example for what I’m trying to do. I seem to at least be able to FIND coding that appears to be the area where I need to be working in for ‘categories’. The strange thing to me is how to find the area with coding for the text widgets that I’ve added. Like when I go to sidebar.php in the theme editor it still has code for items that I actually am not including for my blog but I don’t see anything that would indicate that I have a blogroll or 3 seperate text widgets that show up perfectly when you look at my blog.

I’m sure this is probably something that’s obvious to someone familiar with all the coding. I just wish I could find instructions somewhere. I just feel like I’m somehow missing a big chunk of the coding for my blog that I don’t have access to modify.

Most of these in the sidebar are given the title by the following, so you could replace them with your images as follows:

<h2><?php _e('Pages'); ?></h2>

Replace with

<img src="/images/yourimage.jpg">

When I add a text widget – say the one with my flickr badge included as html code to appear in the sidebar – I type in a title ‘my photos’. Where do I find the code for ‘my photos’ to change that to an image title?

I’m fairly comfortable with going about the actual change in code or at least willing to play around with it a bit and see what works. I guess my main problem is really finding where that code is to make the changes. I have added multiple text widgets through the admin area with the ‘widgets’ tab under ‘presentation’. For the LIFE of me I can not find where in the code these text widgets are listed. I’m really quite baffled that this isn’t something anyone has struggled with before. Which is why I’m wondering if it’s something so incredibly obvious and I’m just completely missing it.

Just in case it helps to explain my confusion, here is the code that comes up under the ‘theme editor’ portion of ‘presentation’ in my admin.

<!-- begin right sidebar menu -->

<div id="rightbar">

<?php if ( !function_exists('dynamic_sidebar')

        || !dynamic_sidebar(2) ) : ?>

<h2><?php _e('Author'); ?></h2>

		<ul>

			<li>A little blurb about you goes here.</li>

		</ul>

<h2>Search</h2>

   <ul>

     <li><form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF'];

	?>" title="search">

		<div>

			<input type="text" name="s" id="s" size="10" />

			<input type="submit" value="<?php _e('Go'); ?>" />

                </div>

		</form></li>

   </ul>

<h2>Links</h2>

<ul>

   <?php get_links('-1', '<li>', '</li>', '<br />', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>

</ul>

<h2><?php _e('Calendar'); ?></h2>

<ul>

     <li><?php get_calendar(); ?></li>

</ul>

<?php endif; ?>

</div>

<!-- end sidebar -->

If you look at my blog you can see that I chose not to include the ‘about’ section for now, nor the ‘calendar’ and yet the code for those is still present (which is fine) but the code for all of the items ACTUALLY showing in that sidebar is not there. I need help finding which screen or php file the code is located in so that I can edit it. Or if it’s a whole section of code that I need to add then I would love some basic instruction on that.

Thanks in advance for any help with this.

Widgets and hand editing your sidebar – are mutually exclusive. In other words: either widgets or editing the code. If you use widgets they will over-write whatever you edit.

Okay, that’s definitely good to know. So, if I add a text widget and put html code in it to display say a flickr badge, the best way to put an image style title above the clickable badge would be to just add the html code to include the image with a <br> before the badge, right? I think I can use that solution for my text widgets easily enough.

My question then would be how would I use an image as a title above sidebar items like ‘categories’ or ‘archives’?

I found this section of code in the leftmenu.php:

<h2><?php _e('Categories'); ?></h2>

   <ul>

    	<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

I changed the code and it now looks like this:

<img src="/images/categories.gif">

   <ul>

    	<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

I included more than just the title portion in case it helps at all to show whether I’m in the right area of code to be making this change. The only portion changed was that first line. If you go to my blog you’ll see that it still shows the regular text title, not the image that I uploaded to use. What am I doing wrong? I uploaded the gif image title to the correct theme’s images folder on my ftp. It seems as though even if it were looking in the wrong place for that image that at the very least that change would make the actual text title disappear since the coding for that is no longer valid. I’m thoroughly confused. I was able to edit the style sheet for this theme without any trouble, expanded the columns back and forth till I had them just right, made other minor changes but this particular issue is completely eluding me.

Thanks again for all your help in advance. If I can get this figured out I will be absolutely ecstatic. I’ve spent an entire 2 days trying to find documentation to help with this with no luck. Plenty of instruction on what code to use but nothing to help me find WHERE to change that code.

Update: I’ve successfully added images as titles to all of my text widget sidebar items using the following html code entered in the text above the other html…

<img src=https://www.mysite.com/blog/wp-content/themes/oh-so-very/images/myimage.gif>

I would LOVE to be able to use the same style images to replace the text for the following sidebar items: categories, archives, meta and blogroll

This is where I’m struggling to find the exact location of these titles in the code. Since they are not widgets I’m assuming the titles have to be hidden somewhere in the php files. Anyone have an idea where?

My info again (in case it helps):

template used is: oh so very by Jessica Wiseman

you can find my blog here to see what I mean by image titles: https://www.auntiepea.com/blog

Anyone have an ideas? Still haven’t figured this one out. ??

hi
erm not sure if this is what you though but

i did this for my code
#sidebar h2 {
font-family:Verdana, Sans-Serif;
font-weight:normal;
text-indent:10px;
background-color:#5581C0;
color:white;
text-transform:uppercase;
font-size:0em;
margin:0;
padding:7px 0;
background-image:url(“image url”);
}

if the background-image code is not there, you can type it in ??

Hello all,

I have successfully replaced the “Pages,” “Meta” etc titles with images; all except “Blogroll,” which is the name of the category I have my blogroll links in.

I read through the above but can’t find what I need!

Does anyone know where I would change code to insert an img for the Blogroll title?

Thank you.

-ben