I was creating a custom theme for a website that I work on – www.f1weekly.com – and I was getting some strange behavior with the default WordPress pagination.

Using the standard code, as found in the "default" theme included with WordPress, I used the following code to create my pagination links in my templates:

 

<div class="navigation">
<div class="alignleft"><?php next_posts_link(‘&laquo; Older Entries’) ?></div>
<div class="alignright"><?php previous_posts_link(‘Newer Entries &raquo;’) ?></div>
</div>

Suddenly I noticed that I was getting some strange results happening with the pagination links. Below is an example:

On a category page like http://www.f1weekly.com/category/podcasts/ the pagination to the second page should be http://www.f1weekly.com/category/podcasts/page/2/ but all my pagination links where going to http://www.f1weekly.com/page/2/ – which is the link for the second page of all posts, like the links on the home page.

This was driving me mad, and I just couldn’t figure it out.  I even rebuilt the theme from scratch.  Still no dice, but it did work correctly when I was loading the "default" theme.

So, I did a comparison of the code I had in my header.php template against the "default" theme header.php.  I had additional JavaScript files link, some additional CSS files linked, and some other code such as Google Webmaster Tools verification Meta tags.

On review of the code, nothing jumped out at me.  So I started again, this time removing anything that I had which the "default" theme did not.  Suddenly the pagination worked like it should.  Success!  Well sort of…

Now I started to add in my extra code one line at a time.  Still working… until I got to the following:

 

<? if($_server[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][‘REQUEST_URI’] == "/"){ ?>
<script src="/scripts/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="/scripts/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<? } ?>

This code was there to only output the Adobe Spry TabbedPanels code on the home page, but this PHP condition was somehow re-setting something that was causing my pagination nightmare.  I have since removed this and I am simply including the SpryTabbedPanels.js and SpryTabbedPanels.css on all pages.  The offset of having those files load on all pages, whether or not they are needed, beats not having working navigation.

My thanks on this fix goes out to Eric Baker, as he gave a helping hand on this one!

 

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]