I am using the following code to create a list of child pages for my website. I want all of the urls to have something like #theheading added to the end so that when you go the page, it goes to a certain spot on the page that has that id.
/* List Child Pages version 2 */
<?php
function wpse_list_child_pages_two( $cats = [] ) {
global $post;
$current_ID = $post->ID;
if ( is_page() && $post->post_parent ) {
$child_of = $post->post_parent;
} else {
$child_of = $current_ID;
}
// Get the category IDs for passed in category names for query.
$cats = ( array ) $cats;
$cats = array_map( 'get_cat_ID', $cats );
$args = [
'post_type' => 'page',
'posts_per_page' => -1,
'post_parent' => $child_of,
'order' => 'ASC',
'orderby' => 'menu_order',
'category__not_in' => $cats,
'after' => 'top'
];
$parent = new WP_Query( $args );
if ( $parent->have_posts() ) : ?>
<?php while ( $parent->have_posts() ) : $parent->the_post(); ?>
<?php
$current = function( $output ) use ( $current_ID ) {
return get_the_ID() === $current_ID ? $output : '';
};
?>
<li class="nav-item nav-item<?php the_ID(); echo $current( ' active ' ); ?>">
<a href="<?php the_permalink(); ?>" <?php echo $current( 'aria-current="page"' ); ?>><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
<?php endif; wp_reset_postdata();
}
If I add #theheading into my html like below, it adds in after the / in my permalink
<a href="<?php the_permalink(); ?> #theheading" <?php echo $current( 'aria-current="page"' ); ?>><?php the_title(); ?></a>
Is there a simple way to pass a sting onto the end of the the_permalink(); results before the closing slash in my url?
Tried to add #theheading into the html after the function.
2
Answers
Okay, so it turns out that the original way I tried will work at going to #theheading. For some reason when I initially tested it, it just refreshed the page without going to #theheading so I assumed it was from the / between the url and #theheading (example: someurl/#theheading), but it is working now. You are right though, the extra space should be removed. So what is below will work.
You could with javascript. For WordPress you may utilize the hook
the_permalink
https://developer.wordpress.org/reference/hooks/the_permalink/Example from there:
By the way, did you try your html without the space between the URL and the hash?