Grow your CSS skills. Land your dream job.

WordPress Sidebar – Using images as links

  • # December 18, 2008 at 8:24 pm

    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:

    Code:

    Club Affiliates



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

    With the following CSS:

    Code:
    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!

    Rob
    # December 19, 2008 at 4:43 am

    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. :)

    # December 19, 2008 at 7:50 am

    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.

    Rob
    # December 19, 2008 at 8:21 am

    depends where you files are and the like.

    # December 19, 2008 at 10:27 am

    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:

    Code:
    background: url(‘images/logo.jpg’)

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

    Code:
    src=”images/swansea.jpg”

    Instead of this:

    Code:
    src=”http://localhost/wordpress/wp-content/themes/starkers/images/image.jpg”
    Rob
    # December 19, 2008 at 11:09 am

    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?

    # January 20, 2009 at 2:03 pm

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".