treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Wordpress Sidebar - Using images as links

  • Hey people,

    I'm following Chris' Wordpress tutorials and I'm stuck and I need some advice.

    I've come to the side bar and I'm emptied it, like Chris does in the tutorial and I'm having problems customising it. (Also, I'm guessing there is probably an easier way to do this.)

    Anyhow, I attempted to create some links and insert images inside the anchor tags but it doesn't display the images. It does when I link to an external source though.

    Here's what I'm using:


    <h2>Club Affiliates</h2>
    <a href=\"# title=\"test\">
    <img height=\"44\" width=\"374\" alt=\"\" src=\"images/image1.png\"/>
    </a>



    What's confusing me is the src link is definitely correct because this works :



    <h1>
    <a id=\"logo\" href=\"<?php echo get_option('home'); ?>/\"><?php bloginfo('name'); ?></a>
    </h1>


    With the following CSS:


    a#logo
    {
    width: 530px;
    height: 146px;
    background: url('images/logo.jpg') top left no-repeat;
    text-indent: -9999px;
    float:left;
    margin: 0 0 0 10px;
    }


    Can anyone help!

    I'm guessing it's probably me being dumb but I can't figure this out.

    TIA!
  • if you are sure the file location is right - try adding the full path http://www.yourwebsite.com/images/image1.png and see if it can find it then, if it can you know your path is actually wrong, if it can't then the image either isnt there or called something else. :)
  • I tried what you said and it worked.

    http://localhost/wordpress/wp-content/t ... /logob.png

    How come the shortened version doesn't work like it does with CSS?

    I'm confused :o

    Anyhow, that'll do for now.

    Cheers.
  • depends where you files are and the like.
  • The only sub directory is the images folder. Everything else like sidebar.php and my style sheet reside in the same directory.

    The following CSS works fine:

    background: url('images/logo.jpg')


    That's why I don't understand why I can't do this:

    src=\"images/swansea.jpg\"


    Instead of this:

    src=\"http://localhost/wordpress/wp-content/themes/starkers/images/image.jpg\"
  • possibly something to do with the way wordpress builds the theme. Because it pulls all info from your theme folder into the index.php - if you had a folder in your wordpress called images it would work, but you might have to use /wp-content/themes/starkers/images/image.jpg to call an image as your page will be built and desplayed from the index.php on your wordpress folder, and not from within your theme directory.

    if that makes sense?
  • Just a quick update, in case someone else has had the same problem. I now reference my files via this function:

    <?php bloginfo('template_directory'); ?>

    For example:

    <src="<?php bloginfo('template_directory'); ?>/images/image.jpg"/>
    <script src="<?php bloginfo('template_directory'); ?>/js/functions.js" type="text/javascript"></script>

    Just a bit easier than what I was using previously, plus if I rename my theme directory I won't have to edit a dozen or so links.