How to hyperlink content from archive page with custom post-type

Question

I created a custom post type to show my products. The taxonomy name is called field. My products page (products.php) is customized as the following:

<div id="products_wrapper">
    <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = array(
            'post_type'=>'product', // Your post type name
            'posts_per_page' => 5,
            'paged' => $paged,
        );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post(); ?>

                <div class="box">
                    <div class="box-inner">
                    <div class="thumbnail_box">
                        <a href="<?php the_permalink(); ?>" class="permalink_image">
                            <div class="box_thumbnail" style="background-image: url(<?php echo sunset_get_attachment(); ?>);"></div>
                        </a>
                    </div>
                    <div class="right">
                        <div class="title_excerpt">
                            <div class="title_box">                                 
                            <?php                                    
                            $terms_list = wp_get_post_terms($post->ID, 'field');                                        
                            $i = 0;                                     
                            foreach($terms_list as $term){ $i++;                                            
                            if($i > 1){                                             
                            echo ', ';                                          }                                           
                            ?><span class="<?php echo $term->name ?> font-icon"></span><?php                                        
                            }                                   
                            ?>
                                <h4 class="product_title">                                      
                                <?php the_title(); ?>                                   
                                </h4>
                            </div>
                            <p class="category_excerpt"><?php echo get_the_excerpt(); ?></p>                            
                        </div>
                        <div class="box_buttons flex">
                            <a class="category_title" href="/field/<?php echo $term->name ?>">
                                <?php
                                 $terms_list = wp_get_post_terms($post->ID, 'field');
                                    $i = 0;
                                    foreach($terms_list as $term){ $i++;
                                        if($i > 1){
                                            echo ', ';
                                        }
                                        echo $term->name. ' ';
                                    }
                                 ?>
                            </a>
                            <a href="<?php the_permalink(); ?>" class="read_more">
                                Learn More
                            </a>
                        </div>
                    </div>

                    </div>
                </div>

           <?php endwhile;
            $total_pages = $loop->max_num_pages;
        }
        wp_reset_postdata();
    ?>
</div>

For each product I have a read more that leads to the single products file and the category name shown. When I click on a category name it leads to the taxonomy page that I created which looks like this:

<?php
if ( have_posts() ) : ?>    
    <?php
    /* Start the Loop */
    while ( have_posts() ) : the_post();
        echo '<div class="box">';
        the_post_thumbnail();
        the_title();
        the_excerpt();
        echo '<a href="http://www.parilinx.burnnotice.co.za/product/<?php the_title() ?>" class="read_more">';
        echo 'Learn More';  
        echo '</a>';
        echo '</div>';
    endwhile;
    the_posts_navigation();
else :
    get_template_part( 'template-parts/content', 'none' );
endif; 
?>

But now the problem in the category page is that I am not being able to hyperlink the read more button.

Every time I click on the read more it should lead me back to the single product page but it does not.

I first tried to use just: " class="read_more"> but it does not work.

Hope you can help.

Answer 1

use the_permalink or get_the_permalink to display/retrieve the URL of a post ( a post of any type, they're all the same internally )

e.g.

the_permalink();

orx

<a href="<?php echo esc_url( get_the_permalink( $post_id ) ); ?>">

Notice I used esc_url to escape the value for security reasons.

Here are some similar functions you might find useful:

• get_post_type_archive_link('product') should return /product/ or the equivalent archive for that post type that WP generates
• get_term_link( 'purple', 'colours') fetches the archive link for posts that have the term purple in the custom taxonomy colours. Note that this can also be used for tags and categories. The functions such as tag_link etc all use this function inside them so cut out the middle man!
• get_author_posts_url(1) gets the URL of the author posts archive for the user with ID 1
• get_day_link( $year, $month, $day ) gets the link to a date archive by day
• get_month_link, get_year_link, same as above
• get_comment_link( $comment ), get the permalink to a comment

Note that all of these should be escaped with esc_url at the moment of output, with the exception of the_permalink which escapes internally