CODEWITHSUNDEEP
phpwordpresspostscustom-wordpress-pages
HappyHands31
HappyHands31

Reputation: 4101

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

Upvotes: 1

Views: 2338

Answers (2)

HappyHands31
HappyHands31

Reputation: 4101

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.

Upvotes: 0

Suraj Menariya
Suraj Menariya

Reputation: 546

Three things first of all I can't told you exact what is problem without any proper link.but as i was going through closely of your screenshot.I found that

you get link like http://localhost/fourth-blog-post When you click on read more button.

but it should be like this http://localhost/blog/fourth-blog-post

Because its single post of all your posts and its comes from single.php file, now you can do two things first check url of your post via admin panel where your post is appear. second if it matches the second url which i mentioned on above link. then you should try the_permalink() function at the place of get_permalink() for more information you can visit.

https://codex.wordpress.org/Function_Reference/the_permalink

because get_permalink() should not be use with in loop. and it should be the_permalink() with in the loop.

I hope it will help you:)

Upvotes: 1

Related Questions