Search code examples
phpwordpresspostscustom-wordpress-pages

WordPress Blog Post "Read More" Link Not Taking Me To Actual Post

A lot of articles here seem to deal with the "read more" link not displaying. Mine is displaying fine, it's just not actually taking us to a page that displays the full blog post. You can see how it's displaying here (Read More >>):

enter image description here

Right now when I click on "Read More >>" I get this:

enter image description here

In my code, in home.php, I'm displaying the blog posts like: 

<?php 
$paged = ( get_query_var('page') ) ? get_query_var('page') : '1';
$args = array('post_type' => 'post', 'posts_per_page' => 3, 'order' => 'ASC', 'orderby' => 'title', 'paged' => $paged);
$posts = new WP_Query($args);
if ($posts->have_posts()):  while ($posts->have_posts()) : $posts->the_post(); 
    get_template_part( 'content', get_post_format());
    echo "<div class='thepost'><p class='post-date'>".get_the_date()."</p>"; 
    echo "<h2 class='post-title'><a href=".get_permalink().">".get_the_title()."</a></h2>";
    //echo "<span class='post-image'>".the_post_thumbnail()."</span>";
    the_post_thumbnail('post-thumbnail', ['class' => 'post-image']);
    echo "<p class='post-paragraph'>".get_the_excerpt()."</p>"; 
    echo "<p><a href=".get_permalink()."><span class='read-more'>Read More >></span></a></p> </div>";

    endwhile;?>

So what do I need to change about this line: echo "<p><a href=".get_permalink()."><span class='read-more'>Read More >></span></a></p></div>"; so that it links to the complete post that the user clicks on?

I've looked through the codex on how to customize the read more link, but I'm just finding

"Users can then continue reading more as you have enticed them with your summary introduction, by clicking on a link to the full article. Themes usually include this link in the title and the above methods will generate it by default trailing your teaser."

I must be missing something as I'm reading through the codex. Thanks!

EDIT: Inspecting the link:

enter image description here

EDIT 2 Inspecting a broken page:

enter image description here

EDIT 3: full CSS (style.css): https://pastebin.com/TaUnemz9

EDIT 4 full screenshot for individual blog post page:

enter image description here

Solution

  • First of all, the key was that single post pages display via single.php according to the WordPress Hierarchy.

    So I needed to create a single.php file - most of the code for this file will still be the same as the code for home.php - it will still be displaying the header, the hero image, the nav menu, the footer, and the content will still be contained in a <div>.

    What's different is that I need to take this out: 

    $paged = ( get_query_var('page') ) ? get_query_var('page') : '1';
$args = array('post_type' => 'post', 'posts_per_page' => 3, 'order' => 'ASC', 'orderby' => 'title', 'paged' => $paged);
$posts = new WP_Query($args);

    And change the WordPress loop from this: if ($posts->have_posts()): while ($posts->have_posts()) : $posts->the_post(); to this: if (have_posts()): while (have_posts()) : the_post();. We already have the posts loaded, now we just need to display them.

    Whatever WP functions I needed to get / echo changes depending on how displaying a single post is different from displaying multiple posts. I can take out:

            get_template_part( 'content', get_post_format());
        echo "<p class='post-paragraph'>".get_the_excerpt()."</p>"; 
        echo "<p><a href=".get_permalink()."><span class='read-more'>Read More >></span></a></p> </div>";

    Since I don't need them anymore.

    The key is that links work differently in WordPress than basic HTML. It's not like in HTML where if you have <a href="post-page.html">Read More</a>, you'll be taken to post-page.html when you click on Read More. Since it's a WP site, it's using PHP and you wrap the permalink in an <a> tag using the WP function .get_permalink().. Then the permalink will take you to single.php.