I have a parent page with child pages. How to get child pages and add unique class only to active page ? I am making a sidebar with children's menu parent page one level up.

I can list all child pages but i have problem to add an unique class to active child page to css differently.

<?php
global $post;
$direct_parent = $post->post_parent;
$args = array(
'post_type'      => 'page',
'posts_per_page' => -1,
'post_parent'    => $direct_parent, 
'order'          => 'ASC',
'orderby'        => 'menu_order'
);


$parent = new WP_Query( $args );

if ( $parent->have_posts() ) : ?>

<ul class='sidebar-list'>

<?php while ( $parent->have_posts() ) : $parent->the_post();
?>
<li>
<a href="<?php the_permalink()?>">
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>

</ul>

<?php endif; wp_reset_query(); ?>

I have a parent page with child pages. How to get child pages and add unique class only to active page ? I am making a sidebar with children's menu parent page one level up.

I can list all child pages but i have problem to add an unique class to active child page to css differently.

<?php
global $post;
$direct_parent = $post->post_parent;
$args = array(
'post_type'      => 'page',
'posts_per_page' => -1,
'post_parent'    => $direct_parent, 
'order'          => 'ASC',
'orderby'        => 'menu_order'
);


$parent = new WP_Query( $args );

if ( $parent->have_posts() ) : ?>

<ul class='sidebar-list'>

<?php while ( $parent->have_posts() ) : $parent->the_post();
?>
<li>
<a href="<?php the_permalink()?>">
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>

</ul>

<?php endif; wp_reset_query(); ?>

• wp-query
• permalinks
• child-pages
• list

1 Answer 1

I made this by jQuery:

$('.sidebar-list li a').filter(function(){
  return this.href === location.href;
}).addClass('active');