Adding local images to template

  • Hello,

    I am new to template development and am having a small problem. I can’t figure out how to include an image in header.php. For example, I am using a small graphic as a divider in my wp_list_categories to divide the categories. I am testing the theme on a local installation of WP so don’t want to use the full URL of the image. Basically just <img src=”images/graphic.png”/>

    Thanks!

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

  • So what’s the problem?

    You need to be a little more specific about exactly what you need help with.

    If you need help with placing the code, you’ll ideally need to post the code of the file you wish to add code to…

    NOTE: If posting code, please do so inside backticks. ` These little things…

    Thread Starter misterpatrick67

    (@misterpatrick67)

    OK, here’s the code I am using. The images are showing up as missing.

    <div id="header">
<div id="top_nav">
<ul>
<?php wp_list_categories('orderby=name&include=4&title_li='); ?>
<li><img src="images/Nav-Bar-Shim.gif" border="0"/></li>
<?php wp_list_categories('orderby=name&include=3&title_li='); ?>
<li><img src="images/Nav-Bar-Shim.gif" border="0"/></li>
<?php wp_list_pages('include=20&title_li='); ?>
<li><img src="images/Nav-Bar-Shim.gif" border="0"/></li>
<?php wp_list_categories('orderby=name&include=6&title_li='); ?>
<li><img src="images/Nav-Bar-Shim.gif" border="0"/></li>
</ul>
</div>
</div>

    You’d be better off doing this via CSS than trying to insert the image into the wp_list_categories markup. If you surround wp_list_categories with a class using something like:

    <ul class="my_cats">
<?php wp_list_categories('title_li=');?>
</ul>

    you can then add your divider via CSS with:

    .my_cats li {background:url(images/graphic.png) no-repeat bottom center;}

    Hope that helps.

    Thread Starter misterpatrick67

    (@misterpatrick67)

    Cool. I was thinking I might have to do that. If I don’t post again, it means I got it working. Thanks!

    From what you have thus far you’re currently getting a list along these lines..

    example (not intended to be fully accurate)..

    <li class="cat-item">Result for first list_cat</li>
<li class="cat-item">Result for first list_cat</li>
<li class="cat-item">Result for first list_cat</li>
<li class="cat-item">Result for first list_cat</li>
<li>Your graphic</li>
<li class="cat-item">Result for second list_cat</li>
<li class="cat-item">Result for second list_cat</li>
<li class="cat-item">Result for second list_cat</li>
<li>Your graphic</li>
<li class="cat-item">Result for third list_cat</li>
<li class="cat-item">Result for third list_cat</li>
<li class="cat-item">Result for third list_cat</li>
<li>Your graphic</li>

    Assuming you don’t want that graphic to apply to all wp_list_categories generated LI elements, be sure to style the relevant CSS classes…

    .cat-item
    &
    .current-cat

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding local images to template’ is closed to new replies.