WordPress - How to add anchor to previous/next page links

Question

I have a gallery at the top of my WordPress theme and the blog posts are below it. Each time I go to the next page it goes to the top which I don't want. I would like to add an anchor called #blog just below the gallery and add it to previous/next page links. Where in the code should I put #blog to make this work?

Answer 1

You should be able to do this with two adjustments. The first will be creating the anchor and the second will be adjusting the links to use the anchor.

Anchors can be referenced as <a> tags with a name attribute or almost any tag with an id attribute. I would say that a majority of WordPress themes already have an anchor you can use in #content . Navigate to any of your blog posts and view the source code. Search for id="content" in the source code and verify that it exists. If it doesn't, find an id where your actual post content is and you can use that one. If you can't find one, you'll need to create one.

In your WordPress theme files, look for a file called single.php . This is typically the file that governs how single posts are rendered. This is the file that you'll edit to add the anchor (if necessary) and adjust the links.

If you were not able to find an id to use (be it 'content' or anything else), you'll want to find where your content is being called for output and add an id to whatever HTML tag is wrapped around it.

For example, a stripped down version of my file looks like this:

<div id="primary">
  <div id="content">
    <?php while ( have_posts() ) : the_post(); ?>
      <div class="entry-content">
       <?php the_content(); // this is your post content ?>
      </div><!-- .entry-content -->
    <?php endwhile; // end of the loop. ?>
  </div>
</div>

There are a variety of methods for outputting the link, so it really depends on the theme and the version of WordPress. In the single.php file, look for functions related to "next_post" and "previous_post". Most of the functions used for creating the links automatically write the entire link tag ( <a> ) for you, so there's no way to intercept the link and change it.

You'll need to write the links yourself. The below code shows how to get the information and create the links. It assumes you'll be using id="content" as your anchor reference.

  <?php
  $prev_post = get_previous_post();
  if (!empty( $prev_post )): ?>
    <a href="<?php echo get_permalink( $prev_post->ID ); ?>#content"><?php echo $prev_post->post_title; ?></a>
  <?php endif; ?>

  <?php
  $next_post = get_next_post();
  if (!empty( $next_post )): ?>
    <a href="<?php echo get_permalink( $next_post->ID ); ?>#content"><?php echo $next_post->post_title; ?></a>
  <?php endif; ?>

This should create the links you're looking for that automatically jump the page past the images and to the post content.