skip to Main Content

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


  1. Chosen as BEST ANSWER

    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.

    <a href="<?php the_permalink(); ?>#theheading" <?php echo $current( 'aria-current="page"' ); ?>><?php the_title(); ?></a>


  2. You could with javascript. For WordPress you may utilize the hook the_permalink https://developer.wordpress.org/reference/hooks/the_permalink/

    Example from there:

    function append_query_string($url) {
        // return add_query_arg($_GET, $url);
        return $url . "#theheading";
    }
    add_filter('the_permalink', 'append_query_string');
    

    By the way, did you try your html without the space between the URL and the hash?

    <a href="<?php the_permalink(); ?>#theheading" <?php echo $current( 'aria-current="page"' ); ?>><?php the_title(); ?></a>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search