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:





Att Ringa

Att Ringa


Hanvisning Trio

Trio Web

  • Are you looking for a navigation menu in your sidebar? Your question is very unclear Apr 25, 2014 at 7:38
  • Yes. "This is for a left-hand indented menu". wp_list_pages outputs a navigation menu. Apr 25, 2014 at 7:50
  • What have you done so far. Have you registered and added the sidebar? Please edit your question to include what you've tried up to now, working or not working Apr 25, 2014 at 7:53
  • There, some more info. Apr 25, 2014 at 7:59
  • You may just want to add another menu. codex.wordpress.org/Navigation_Menus Apr 25, 2014 at 8:07

1 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 {

.pagenav ul li.page_item_has_children > a {
    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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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