Adding span tags within wp_list_pages list items

Question

I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
</ul>

And this is the code I am using to to generate my list of items:

function childpages_shortcode_callback( $atts ) {
    $atts = shortcode_atts( array(
        'parent' => false,
    ), $atts, 'childpages' );

    $parent_id = false;
    if ( $atts['parent'] ) {
        $parent = get_page_by_path( $atts['parent'] ); 
        if ( $parent ) {
            $parent_id = $parent->ID;
        }
    } else { // if no parent passed, then show children of current page
        $parent_id = get_the_ID();
    }

    $result = '';
    if ( ! $parent_id ) {  // don't waste time getting pages, if we couldn't get parent page
         return $result;
    }

    $childpages = wp_list_pages( array(
        'sort_column' => 'menu_order',
        'title_li' => '',
        'child_of' => $parent_id,
        'echo' => 0
    ) );

    if ( $childpages ) {
        $result = 
            '<h2>' . get_the_title( $parent_id ) . '</h2>' . 
            '<ul class="fa-ul">' . $childpages . '</ul>';
    }

    return $result;
}
add_shortcode( 'childpages', 'childpages_shortcode_callback' );

As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.

Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?

Thankyou

Answer 1

There is more than one way to accomplish this in WordPress.

Option 1: Using the link_before parameter with wp_list_pages.

$childpages = wp_list_pages( array(
    'sort_column' => 'menu_order',
    'title_li' => '',
    'child_of' => $parent_id,
    'echo' => 0,
    'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
) );

Option 2: Create a custom walker, then add the walker parameter to wp_list_pages.

See this answer here on WordPress StackExchange for more details and an example.

Option 3: Use CSS pseudo elements.

While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.

First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.

ul {list-style-type: none;}

Then, using the ::before pseudo element, set your chosen Font Awesome icon. For example:

ul li::before {
    content: "\f110";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px;
}

The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before instead:

ul li::before {
    content: "\f110";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: -20px;
    position: absolute;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

Of course, the padding and margin settings might need to be adjusted according to your theme and preferences.

I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.

However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.

I hope you find this useful and that it helps you accomplish what you need :)