• Hi, I am making a menu for my theme, which requires the li tag to have a span tag inside it.

    like this:<span>Tab</span>

    I am using the wp_list_pages string to return the pages, but I also want a span tag to be added inside the li tag. How would I achieve this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Well when I recently wanted to add a <span> to change wp_list_pages() output form
    <li><a href="[some uri]">[some text]</a></li>
    to
    <li><a href="[some uri]"><span>[some text]</span></a></li>
    so I did the following…

    <?php
    		$pages = wp_list_pages('exclude=1423&sort_column=menu_order&depth=1&title_li=&echo=0');
    		$pages = preg_replace('/(<a[^>]*>)/','$1<span>',$pages);
    		$pages = str_replace('</a>', '</span></a>', $pages);
    		echo $pages;
    		?>
    • Be careful to pass echo=0 to the function in line 1
    • line 2 uses regex to locate and replace an opening ‘a tag’ with an ‘a tag’ and a ‘span’
    • For the closing tag, a simple string replacement is sufficient (since closing ‘a’ does not has a parameter list and can thus be easily identified)
    • In the last step… just echo the modified array

    but I also want a span tag to be added inside the li tag.
    Why?
    Those li tags have already their own class added by WP, you just need to style them in your stylesheet. It even adds a special class for the Page you are on. Have you ever checked the output (source code)?

    moshu is right…!!!

    But if you still got to add a ‘span’ as the immediate child to ‘li’… change the regular expression in the above example to..

    preg_replace('/(<li[^>]*>)/','$1<span>',$pages);

    hello, i had the same problem with adding a span to wp_list_pages. thanx to this post i got it. But i have another probleme i need to add a current class to the generated automaticlly by wp_list_pages loop in order to make a menu highlight this my code :
    php:

    <div id=”dolphincontainer”>
    <div id=”dolphinnav”>

    ‘, $pages);
    preg_replace(‘/(<li[^>]*>)/’,’$1<span>’,$pages);
    $pages = preg_replace(‘/class=”[^”]*/’,’class=”current”‘, $pages);

    echo $pages;
    ?>

    css :

    /* ———————- Dolphin nav ———————- */
    #dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
    #dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(images/navig/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}

    #dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
    #dolphinnav ul li{display:block;float:left;margin:0 1px;}
    #dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
    #dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
    #dolphinnav ul li a:hover{color:#fff;background:transparent url(images/navig/dolphin_bg-OVER.gif) repeat-x bottom left;}
    #dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
    #dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/navig/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
    #dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/navig/dolphin_right-ON.gif) no-repeat top right;height:33px;}
    /* ———————- END Dolphin nav ———————- */

    i want to make this effect menu work by using the wright php loop in wordpress : see
    https://www.13styles.com/css-menus/dolphin/

    thanks in advance

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding extra <span> output to wp list_pages’ is closed to new replies.