wp_list_pages, links only for pages with no children

Question

Is this possible to do, and what is a best practice solution?

The things I can think of is parsing the page structure myself, or do it with JQuery to convert <a> to <span> or similar. Is there a CSS solution?

This is for a left-hand indented menu a la the ones in legacy windows help files or PDF table of content panes.

A sidebar tree menu, if you will, where only the 'leaves' of the tree are clickable (the 'end nodes').

I have the wp_list_pages menu working, but I want to make the links that have children unclickable.

Menu is here

The only links that should be clickable are:

Hjalp

Intro

Policy

Om

Att Ringa

Att Ringa

Aut-telefonist

Hanvisning Trio

Trio Web

Answer 1

To create the menu in the first place, feel free to use the shortcode [AVIA_tree_menu root="your_root_document_title"] by adding this to functions.php:

function sc_AVIA_tree_menu($atts) {
    extract(shortcode_atts(array('root' => 'Start',), $atts));  //default if empty.
    $page = get_page_by_title($root);

    $args = array(
        'child_of' => $page->ID,
        'date_format' => get_option('date_format'),
        'depth' => 0,
        'echo' => 0,
        'post_type' => 'page',
        'post_status' => 'publish',
        'sort_column' => 'menu_order, post_title',
        'title_li' => __($root)
    );
    echo '<ul>' . wp_list_pages($args) . '</ul>';
}
add_shortcode('AVIA_tree_menu', 'sc_AVIA_tree_menu');

Style the links that have no children to not look clickable thusly:

.pagenav ul li > a {
    text-decoration:underline;
    cursor:pointer;
}

.pagenav ul li.page_item_has_children > a {
    text-decoration:none;
    cursor: default;
}

Thereafter, prevent clicks by adding this, for example to document.ready in your_theme/js/functions.js:

$('.pagenav li.page_item_has_children > a').click(function () {return false;});

I will accept another answer that is as good or better in some way. Happy weekend!