Creating Links to Custom Post Type's on Wordpress Page

Question

I'm trying to have two things on a Wordpress page: a list of Custom Posts as well as the content of the custom posts. I would like the titles of the Custom Posts to link to the section of the page with the posts' content.

For example:

• Item One
• Item Two
• Item Three

ITEM ONE HEADING

Item One content...

ITEM TWO HEADING

Item two content...

ITEM THREE HEADING

Item three content...

So "Item One" would link to "ITEM ONE HEADING". Here's the code I'm using which shows the Custom Post List as well as the content, but the list items link out to the Custom Post's page.

            <ul>
        <?php

            $query = new WP_Query( array( 'post_type' => array( 'drilling' ) ) );

            while ( $query->have_posts() ) : $query->the_post();
                echo '<li><a href="';
                the_permalink();
                echo '">';
                the_title();
                echo '</a></li>';
            endwhile;

        ?>
        </ul>

         <?php wp_reset_query(); ?> 

and

<?php query_posts( 'post_type=drilling'); ?>

        <?php if (have_posts()): while (have_posts()) : the_post(); ?>

        <!-- article -->
        <section class="service-middle">

            <div class="container">

                <div class="service-middle-content sixteen columns">        

                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                        <h2><?php echo get_the_title($ID); ?> </h2>
                        <?php the_content(); ?>

                        <br class="clear">

                        <?php edit_post_link(); ?>

                    </article>
                    <!-- /article -->

                </div> <!--end service-middle-content-->

            </div> <!--end container-->

        </section> <!--end service-middle-->        

        <?php endwhile; ?>

        <?php else: ?>

            <!-- article -->
            <article>

                <h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>

            </article>
            <!-- /article -->

        <?php endif; ?>

Thanks so much for any help! -Dan

Answer 1

You want to use HTML Anchors http://www.w3schools.com/html/html_links.asp

It is worth mentioning that you don't actually need to query the posts twice. You could you the WP get_posts function (https://codex.wordpress.org/Template_Tags/get_posts) to get the posts as an array and then loop through this array to generate a nav and your post contents.

Hope this helps!

<ul>
<?php

    $query = new WP_Query( array( 'post_type' => array( 'drilling' ) ) );

    while ( $query->have_posts() ) :
        $query->the_post();
    ?>

        <li><a href="#post-<?php echo the_ID(); ?>"><?php the_title(); ?></a></li>

    <?php endwhile; ?>
</ul>

<?php wp_reset_query(); ?> 

<?php query_posts( 'post_type=drilling'); ?>

<?php if (have_posts()): while (have_posts()) : the_post(); ?>

<!-- article -->
<section class="service-middle">

    <div class="container">

        <div class="service-middle-content sixteen columns">        

            <!-- Anchor Tag -->
            <a name="post-<?php the_ID(); ?>"></a>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                <h2><?php echo the_title(); ?> </h2>
                <?php the_content(); ?>

                <br class="clear">

                <?php edit_post_link(); ?>

            </article>
            <!-- /article -->

        </div> <!--end service-middle-content-->

    </div> <!--end container-->

</section> <!--end service-middle-->        

<?php endwhile; ?>

<?php else: ?>

    <!-- article -->
    <article>

        <h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>

    </article>
    <!-- /article -->

<?php endif; ?>