I am making a one page wordpress site. There is a section of the website displaying content via category posts. There is only one post displaying at a time and I am using the following default code to have Next/Prev links appear:

<div class="alignleft"><?php next_posts_link('&laquo; Next Recipe') ?></div>
<div class="alignright"><?php previous_posts_link('Previous Recipe &raquo;') ?></div>

When the previous post is clicked, it loads the previous post properly, however since this is a one page site, it goes to the top of the page upon refresh.

Is there a way when that link is clicked, to make it refresh the page in the same location, or to target that I would like? Even better, a way to make this do a page refresh using AJAX? I've crawled google and haven't found anything.

I suppose this is similar: http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/, however I haven't been able to execute that with my custom theme.

  • How do you have a one-page site if you are not already using AJAX?
    – s_ha_dum
    May 27, 2013 at 18:20
  • I have 4 pages and I use the get_pages and conditional statements to get 4 of the pages. I have the links at the top pointing to anchor tags above each page in the code. It's actually really simple how I have it setup.
    – James
    May 27, 2013 at 18:23
  • I guess you don't mean "single page interface" which is what it sounded like to me.
    – s_ha_dum
    May 27, 2013 at 18:28
  • Ah, my apologies for the explanation. Essentially this is a website that has an about section, a section that displays content using custom fields and category posts (so the user can essentially update the content by making a new post). A section that has more information, and a contact. It's quite simple at the core of it. Basically a simple website, but displaying the content on one page instead of four. I've figured out that bit, I am trying to solve the prev/next issue so when clicked it stays in that region of the page instead of going to the top on refresh.
    – James
    May 27, 2013 at 18:30

1 Answer 1


You can alter the links for next_post_link and previous_post_link with a filter.

function alter_npppl_wpse_100919($link) {
  return preg_replace('/href="([^"]+)"/','href="$1#something"',$link);

The URL you get will be the default URL plus #content. If your site is generating /page/2/ then the final URL will be /page/2/#content. If you don't want that trailing slash-- the one before the #-- you will have to pass the match through a callback.

function alter_npppl_noslash_cb_wpse_100919($match) {
  return 'href="'.untrailingslashit($match[1]).'#content"';
function alter_npppl_v2_wpse_100919($link) {
  return preg_replace_callback('/href="([^"]+)"/','alter_npppl_noslash_cb_wpse_100919',$link);
function alter_npppl_wpse_100919($link) {
  return preg_replace('/href="([^"]+)"/','href="$1#something"',$link);

If you site is using the trailing slash I would not remove it. You will likely end up with unnecessary redirects if you do.

#something can be any id on the page. If you had <div id="content" then adding #content should cause that div to scroll into view on page load.

  • I put this in my function.php. After this is inserted, should I expect the permalink if I view source to change from page/3/ to page/3#something ?
    – James
    May 27, 2013 at 18:38
  • page/3/#something actually, but basically yes.
    – s_ha_dum
    May 27, 2013 at 18:48
  • @James : See the edit. See the Codex for getting starting with AJAX and there are a lot of questions here about it too. Search, see what you can come up with and then my advise would be to start a new question with your code, working or not, and a specific question about a problem with it.
    – s_ha_dum
    May 27, 2013 at 19:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.