How to scroll to post link in Wordpress

Question

My 'hero' element is taking most of the top page, and an user would have to manually scroll past it to get to the content.

I want to change it so that clicking the links will scroll past the image and down to the posts title. At the minute, clicking the post reloads the page and the hero element is on top. But if you click 'more' tag, it scrolls nicely.

How do I make it so that clicking the link will scroll the page down in Wordpress? I don't mean 'more' tag. Maybe there is a way to update the link functions in WP so the links will create anchor like 'more' tag?

I haven`t got a code that creates a link, as they are created by WP (they are post links).

<div class="big">

</div>

<article><div class="post">
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
</div></article>

.big {
  height: 1200px;
  width: 900px;
  background-color: grey;
}

JS Fiddle: https://jsfiddle.net/tvue1mwo/

single.php code:

<?php
if (is_single()) {
    // Currently using get_header('posts'), so I can hide hero element by css and unhide it with js

    get_header('posts');

    // If I understand right, here should go the ANCHOR link?
}
else {
    // Loads normal hero withou extra css class
    get_header();
}
?>
<div class="main-section wrapper">
<?php
    if (have_posts()) :
        while (have_posts()) : the_post(); ?>
    <div class="post-content u-cf">
        <h2 class="post"><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?></a></h2>
            <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
                <?php 
                $categories = get_the_category(); 
                $separator = ", ";
                $output = '';
                if ($categories) {
                    foreach ($categories as $category) {
                        $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                    }
                    echo trim($output, $separator);
                }
                ?>
                |
                <i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
            </p>
            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
            <?php the_content(); ?>
        <?php endwhile; ?>
    </div>
    <?php
    else :
        echo '<p> No Content found</p>';
    endif; ?>
</div>
<?php get_footer(); ?>

index.php:

<?php 
if (have_posts()) :?>
<?php $count = 1; 
while (have_posts()) : the_post(); ?>

<div class="post-content u-cf">

    <?php if (has_post_thumbnail()) {
        ?>
        <div class="post-thumbnail u-cf"><a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('small-thumbnail')  ?></a>
        </div>
        <?php } ?>

        <h2 class="post">
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
            </a>
        </h2>

        <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
            <?php 
            $categories = get_the_category(); 
            $separator = ", ";
            $output = '';

            if ($categories) {

                foreach ($categories as $category) {
                    $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                }

                echo trim ($output, $separator);
            }
            ?>
            |<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
        </p>

        <?php the_content(); ?>
        <hr>

        <?php   if ( 2 === $count ) { ?>

        <div class="main-content-advert">
            <p>Lorem ipsum</p><p>Lorem impsum</p>
        </div>
        <hr>

        <?php }

        $count++; ?>  
    <?php endwhile; ?>

</div>
<?php
else :
    echo '<p> No Content found</p>';

endif; ?>

we have no code to go by - but normally you would just link to the id of the section to scroll to it. EG: ButtonText — Stender, Sep 18 '17 at 14:03
Would this mean, that the customer would have to manually adjust every single post, before posting it? — , Sep 18 '17 at 14:12
If it's going to be the same for every post/page/whatever, have you considered directly adding a target `id` to your theme template as well as the (mostly automatically generated) links in question? — Jan Boddez, Sep 18 '17 at 17:06
I haven`t tried it. But the position will be the same for every post (the scroll needs to travel 1200px down to show post head). Any chance you could explain how to do it, please? — , Sep 18 '17 at 18:02
So, I found this https://stackoverflow.com/questions/11183873/starting-a-page-at-a-certain-scroll-point , but it feels like it is ad-hoc solution rather than permament. There must be a way to do it, straight from WP? — , Sep 19 '17 at 08:03
First of all, why include such a large hero image that you are just going to scroll right by it so that its never seen? If you insist on using it even though its going to be bypassed every single time, just add the anchor directly after it and then use that in your link. You don't include all the relevant code in your answer that would show how your link is added, so I can't advise on how to do that. — FluffyKitten, Sep 19 '17 at 12:27
@FluffyKitten Thank you for your answer. I included a large hero image, because it is good looking to the eye, when you land on the page. My problem lies in that WP does not scroll to posts title after they being clicked. I can see that twentyseventeen bypasses the problem by serving ?blog.php?, where the big hero element is simply gone... https://www.softaculous.com/demos/WordPress — , Sep 19 '17 at 13:44
@FluffyKitten And what code shall I include? The problem is not in the code, it is in functionality of WP. Why the tag scrolls down and the title link doesnt? I cant simply add an anchor to page and use it, because I would have to add link to anchor in every single posts I create (manually adding it?)? — , Sep 19 '17 at 13:47
I understand the benefit of a hero image in general, but your question makes it sound like you want the links to your posts to skip the image altogether and go directly to the text - is that correct? If so, your image is being skipped anyway so it will rarely be seen. You should add the anchor in the single post template, directly after the code that displays the image, so that you don't have to include it every time. If you include that code, and also the code that creates the link that you want to jump directly to the text, I'll take a look. — FluffyKitten, Sep 19 '17 at 13:50
@FluffyKitten Thanks again, for looking into the question. I added the code, but I haven`t go the code that creates the links (it is done by WP?). But I put the place where I think the anchor should go. — , Sep 19 '17 at 14:34
To make it work without a js hack, you will need to change the code that creates the links. Are there specific links you want to change (e.g. on the homepage or archive page) or is it all links? Also are you using your own theme, a custom theme or a default WP theme? — FluffyKitten, Sep 19 '17 at 14:42
I am using my own custom theme. I would like to change page links and post links. Where is the code that creates them links? — , Sep 19 '17 at 14:46
Just to add to my last answer - I believe I only need to do it on single.php? — , Sep 19 '17 at 14:58
It depends on your structure and where the links are. The links on the homepage could be in the index.php, content.php, or a custom template page, depending on your theme. Your archive page could use those or archive.php. Did you use TwentySeventeen for example, or develop it from scratch? If you used twentyseventeen and haven't changed it much, then it should be in your template-parts/posts/content.php file. Do some debugging to find out where it is (e.g. add an `echo` to each template page to find the relevant one), include that code and let me know. — FluffyKitten, Sep 19 '17 at 15:07
I am afraid that debugging is beyond my scope of knowledge as of yet... :( I added index.php to above if this is of any help. I would think that the best way to do this would be to change how WP creates posts links, which is the_permalink() function? I have not got content.php because I am developing this theme from scratch. — , Sep 19 '17 at 17:01
Debugging is the first thing you need to learn - otherwise you'll never find the problems :) Even just `echo` vars or information to the web page so you can see the values and where it is being called (e.g. add ` echo "in index.php";` etc to the top of each page in your theme to see which template is being called). Also, if you're that unfamiliar with coding for WP, you'd be better to start with one of WPs default themes and create a child theme to modify it. Otherwise you are at risk of including vulnerabilities in your code that could be exploited. — FluffyKitten, Sep 19 '17 at 17:17

FluffyKitten · Accepted Answer · 2017-09-19T19:02:01.520

If you are using index.php to display the homepage & archives, you can do the following:

<?php 
/* 1. define the name of the anchor to jump to */
$anchorname = "skipheroimage"; 
$count = 0;

if (have_posts()) :
    while (have_posts()) : the_post(); 
    ?>
        <?php 
        $count++; /* increment the count so that each anchor is unique on the page */
        /* 2. add the anchor to the permalink so it will jump directly to the anchor  */
        $linkwithanchor = get_permalink()."#".$anchorname.$count; 
        ?>

        <div class="post-content u-cf">
            /* 3. use our $linkwithanchor variable to create the link */
            <h2 class="post"><a href="<?php echo $linkwithanchor; ?>"> 
            <?php the_title(); ?></a></h2>


            /* no change to the code that was here, so keep it as it was...
               ... I just removed it to make my changes easier to find */


            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>

             /* 4. add our anchor - this is where the link will jump to */
            <a id="<?php echo $anchorname.$count; ?>" name="<?php echo $anchorname.$count; ?>"></a>
            <?php the_content(); ?>
        </div> /* NOTE  - you had this in the wrong place. */
   <?php endwhile; ?>
<?php
else :
    echo '<p> No Content found</p>';
endif; ?>

This will create an anchor directly after the banner image, and add the anchor name to the link so that it will jump directly to it.

I have commented and numbered each step directly in the code.

You will need to do this for any templates you have that displays the links (e.g. archive.php)

/* 4. add our anchor - this is where the link will jump to */ Where is that $linkwithanchor going? — , Sep 19 '17 at 18:00
@JDoe Oops! I fixed that problem with the code in step 4 -check the updated answer. I don't believe it will affect SEO because Google will still index the content of your pages. If the answer worked for you, don't forget to accept it so its marked as resolved on the site and other users will know it is helpful... plus we'll both get some rep :) — FluffyKitten, Sep 19 '17 at 18:08
What can I say... works like a charm! And so simple solution! Takes true code mindset to figure that out. Thank you! — , Sep 19 '17 at 18:31
@JDoe Glad I could help! I just noticed that the anchor isn't unique inf there is more than one post on the page, so I've added a count to make sure each is unique. — FluffyKitten, Sep 19 '17 at 18:58

How to scroll to post link in Wordpress

1 Answers1