Append HTML to an LI of wp_list_categories

Question

Im currently using <?php wp_list_categories('child_of=4&title_li='); ?> to echo out a list of my categories. I'm wondering how I could append some html (specifically an » to the end of each LI within the link.

See this screenshot for an example of what I'm trying to do:

http://nikibrown.com/uploads/4662272c3f00c669b17952c10d21901c.png

Answer 1

I think this is the cleanest and WordPressiest way to do it:

<?php
$menu_args = array(
    'child_of' => '4',
    'title_li' => '',
    'link_after' => '&raquo;',
);
wp_list_categories($menu_args);
?>

Answer 2

Use the CSS :after pseudo-class.

I know people aren't big on psuedo-classes, but they work in all major browsers now. There's no reason not to use them.

Answer 3

Here is the method I would do using PHP str_replace:

<?php
$variable = wp_list_categories('child_of=4&echo=0&title_li=');
$variable = str_replace('</a>', ' »</a>', $variable);
echo $variable;
?>

Answer 4

It may make more sense to create the desired visual style using CSS alone. This keeps presentation separate from content generation.

li.cat-item { 
  background: url(../image/arrows.png) no-repeat;
}

You may already know this, as you are using the parameters already, but you would of course need to remove the “&title_li=” from the parameters to keep the CSS hooks.

Answer 5

After much searching myselft, I found the answer to this here:

To summarise, the code to append a '>' to the end of each category is:

    <?php

    $taxonomy     = 'category taxonomy';
    $orderby      = 'name';
    $show_count   = 1;      // 1 for yes, 0 for no
    $pad_counts   = 0;      // 1 for yes, 0 for no
    $hierarchical = 1;      // 1 for yes, 0 for no
    $title        = '';
    $empty        = 0;

    $args = array(
      'taxonomy'     => $taxonomy,
      'orderby'      => $orderby,
      'show_count'   => $show_count,
      'pad_counts'   => $pad_counts,
      'hierarchical' => $hierarchical,
      'title_li'     => $title,
      'hide_empty'   => $empty
    );
    ?>

    <ul>
        <?php 
        $variable = wp_list_categories($args);
        $variable = str_replace('</a>', ' &gt;</a>', $variable);
        echo $variable; 
        ?>
    </ul>

Hope this helps. The key is the $empty parameter.

Answer 6

i would say either the css or use jquery to append. Say its in your div#sidebar, you could do something like

$('#sidebar ul li a').append('<span style="color:#ff0000;">htmlmarkuphere</ span>'); 

and itd at least be displayed in line and inside the anchor. or do append to the li to get it after the a but in the li.