I am currently trying to change the outputted class that wp_list_pages is outputting. However, I don't wish to conduct a global change hence a simple filter is not an option i.e. Only this menu when generated by the shortcode should have a different class.

Currently, I'm producing my menu like this in the header.php:

<nav class="uk-navbar uk-navbar-attached" data-uk-sticky>
<ul class="uk-navbar-nav uk-width-1-1">
<?php do_shortcode('[top_main_menu]');?> 

In functions.php I have the following, noting I've tried two methods and neither work (Obviously I am not doing both at the same time)

/* Call using: [top_main_menu] */
add_shortcode( 'top_main_menu', 'echo_top_main_menu' );
function echo_top_main_menu() {

    //Doesn't work
    echo str_replace("page_item", "uk-hidden-small", wp_list_pages('echo=false&exclude=134,115,104&sort_column=menu_order&title_li='));

    //Doesn't work
    echo preg_replace('/li class\=\"/', 'li class="uk-hidden-small ', wp_list_pages('echo=false&exclude=134,115,104&sort_column=menu_order&title_li='));

Edit: Trial with filters. Updates class but effects all wp_list_pages instances, not just the one in the short code.

/* Call using: [top_main_menu] */
add_shortcode( 'top_main_menu', 'echo_top_main_menu' );
function echo_top_main_menu() {

    add_filter('wp_list_pages', create_function('$t', 'return str_replace("<li class=\"page_item", "<li class=\"uk-hidden-small ", $t);'));

    $output = wp_list_pages('echo=false&exclude=134,115,104&sort_column=menu_order&title_li=');

    remove_filter('wp_list_pages', create_function('$t', 'return str_replace("<li class=\"page_item", "<li class=\"uk-hidden-small ", $t);'));

    echo $output;

Currently, no matter what, the following it outputted on the menu:

<li class="page_item page-item-78"><a href="https://www.example.com/some-page/">Some Page</a></li>

However, I require:

<li class="uk-hidden-small page-item-78"><a href="https://www.example.com/some-page/">Some Page</a></li>

I'm aware a Walker is an option but surely the string return from wp_list_pages should be editable via string replace or similar?

  • A custom walker would be the "WP way" to accomplish this. Alternatively, it might be worth adjusting your CSS. For example instead of requiring the "uk-hidden-small" class on every individual <li> tag, you could put a class on the <ul> and style ul.uk-hidden-small li { } instead of uk-hidden-small. – WebElaine May 19 '17 at 16:07
  • You could also try saving wp_list_pages to a variable and then doing your str_replace. wordpress.stackexchange.com/questions/9960/… – WebElaine May 19 '17 at 16:10
  • If a filter would work in this case, you can add it in the Shortcode and immediately remove it after calling wp_list_pages. – Milo May 19 '17 at 16:37
  • Updated answer with filter attempt, but not currently working. I have a feeling my PHP functions are not firing e.g. str_replace. Could there be a permission issue to execute them? I tried WebElaine's answer, verbatim, and it does not work. – Colin May 19 '17 at 17:12

Working solution:

/* Call using: [top_main_menu] */
add_shortcode( 'top_main_menu', 'echo_top_main_menu' );
function echo_top_main_menu() {

    $lookfor = array('page_item');
    $replacewith = array('uk-hidden-small');

    $args = array(
    'exclude' => '134,115,104',
    'echo'          => 0,
    'sort_column'   => 'menu_order',
    'title_li'      => __('')

    $output = wp_list_pages( $args ); 

    echo str_replace($lookfor,$replacewith,$output);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.