WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] how to add html in wp_list_pages(); (13 posts)

  1. krugern
    Member
    Posted 7 years ago #

    my line looks like this:
    <?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

    I want to add an icon just after the word Pages with an img tag. Like this:
    wp_list_pages('title_li=<h2>Pages <img src="/wp-content/themes/tromso/images/sidebar_icon.gif" alt="Sidebar icon" /></h2>');

    The problem is: The page will not validate without the quotemarks, and it is not working with the quotemarks.

    Any ways to include the quotemarks without ruining the code?

  2. manstraw
    Member
    Posted 7 years ago #

    it won't validate with quotes?

    I tend to put the whole uri in there, starting with http. And I also notice your main blog is located in a /dev, which you haven't included in your src path. Is this example for your blog listed in your profile? The quotes look fine.

  3. krugern
    Member
    Posted 7 years ago #

    wp_list_pages('title_li=<h2>Pages <img src="http://www.krugern.no/dev/wp-content/themes/tromso/images/sidebar_icon.gif" alt="Sidebar icon" /></h2>');

    ^^ it's not working, as the (' and ') does not like those " between them, so I get no picture showing.

    the <h2> header is saying Pages \"Sidebar

    If I remove the quotemarks " the images is showing, but the html will not validate as you have to use quotemarks!

  4. krugern
    Member
    Posted 7 years ago #

    by using src=imagesource alt="alternate text" the picture is showing. however, the page is not passing validation with that.

    src=imagesource alt=alternate text is also showing the picture, but still not validating.

    src="imagesource" alt="alternate text" is not showing the picture, and not validating either!

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.krugern.no%2Fdev%2F

    help?

  5. krugern
    Member
    Posted 7 years ago #

    http://www.krugern.no/problem.png
    And this code:

    <?php wp_list_pages('title_li=<h2>Pages <img src="http://www.krugern.no/dev/wp-content/themes/tromso/images/sidebar_icon.gif" alt="Icon" /></h2>'); ?>

    you see...?

    I want that icon on Friend and Links too... haven't figured out how yet..

  6. manstraw
    Member
    Posted 7 years ago #

    are you trying to escape the " with a \? no need inside a single quote '.

    You have it working with IM status, recent posts and Archives. Use that code as your example.

  7. krugern
    Member
    Posted 7 years ago #

    I am not escaping anything. The code on my site is the same as i posted here. the code for IM stats, recent posts and archive are not like the pages code.

    IM Status:
    <li><h2>IM Online Status <img src="http://www.krugern.no/dev/wp-content/themes/tromso/images/sidebar_icon.gif" alt="IM Online Status" /></h2>
    <?php imonline_status(); ?>
    </li>

    Archive:
    <li><h2>Archives <img src="http://www.krugern.no/dev/wp-content/themes/tromso/images/sidebar_icon.gif" alt="Archives" /></h2>
    <ul><?php wp_get_archives('type=monthly'); ?></ul>
    </li>

    Pages: (my edit)
    <?php wp_list_pages('title_li=<h2>Pages <img src="http://www.krugern.no/dev/wp-content/themes/tromso/images/sidebar_icon.gif" alt="Icon" /></h2>'); ?>

    Pages: (original)
    <?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

  8. manstraw
    Member
    Posted 7 years ago #

    well, I guess it's having a problem interpreting between the ' in a function. I don't typically do it that way, so perhaps this is expected behaviour.

    as a matter of coding style mainly, I generally build long strings outside of the function anyway. I often develop habits like this and forget the reason later on. perhaps this is why! so I'll show how I would code this, and perhaps it will solve your problem.

    replace <?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

    with
    <?php
    $tmpthing = 'title_li=<h2>Pages <img src="http://www.krugern.no/dev/wp-content/themes/tromso/images/sidebar_icon.gif" alt="Icon" /></h2>';
    wp_list_pages($tmpthing);
    ?>

    let me/us know how that works.

  9. krugern
    Member
    Posted 7 years ago #

    I will give it a try!

    update: no change. the code you provided is in action right now if you wanna see my site live.

  10. krugern
    Member
    Posted 7 years ago #

    link is still http://www.krugern.no

  11. krugern
    Member
    Posted 7 years ago #

    i kinda gave up on this one, but found another solution. not exactly what i was thinking of, but i works.

    by using css i am adding a background to all <h2>-s in the sidebar:

    #sidebar h2 {
    font-family: 'Lucida Grande', Verdana, Sans-Serif;
    font-size: 1.2em;
    line-height: 25px;
    margin: 5px 5px 0 0;
    padding: 0 20px 0 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
    text-align: right;
    text-decoration: none;
    border: 1px solid #999;
    background: url("http://www.krugern.no/dev/wp-content/themes/tromso/images/sidebar_icon.gif") left center no-repeat;
    }

    works! not really solved the html problem, but found a way of adding the image where i wanted it. so its resolved.

  12. manstraw
    Member
    Posted 7 years ago #

    I actually consider that the better way to do it anyway! :) Glad you've got a solution. Sorry I wasn't more help.

  13. krugern
    Member
    Posted 7 years ago #

    :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.