John Freeborn.com

I never write about stuff like this. But, I feel pretty damn good about figuring this out.

Here’s the problem. I’m working on a theme where I needed the last post thumb to be a image, that linked to the next page of posts. Normally you have a simple text link at the bottom, but we wanted an image instead. So, problem number 1 was replacing the 20th post thumb with an image.

This is an easy problem, right? I thought so. I looked into the code on index.php of this theme. GridPortfolio is the name of this theme, and it’s really easy to tweak and the theme is free. What I found was a complex little “while” statement that writes the news posts into the page. You tell it how many posts and how many per row–it does the rest. I’d already adjusted it for 5 rows with 4 per row. I talked to my buddy Adam Bert and he gave me some hints on how to target that last post. After fighting for a while, I was able to replace the last post with my new image–this created a new problem. What happens to that last post. Post number 20 just goes away, never to be seen again. This wasn’t the right way.

Another problem was how to replace the text link with an image. This seemed simple, but wasn’t. After the jump, there’s a full explanation of how I got that part to work.

WordPress has a built in solution for this. It creates simple text links for Next and Previous posts. But, it doesn’t do one important thing – it doesn’t actually evaluate when these should show up. Some code gets written either way. There are plugins with enhance WordPress’ next and previous abilities, but these were little more than shortcuts for text alterations–not the overhaul that I was seeking. I did find an example of someone who had a related issue with single post pages and the solution came into focus.

Standing on the shoulders of giants.

I took what he had done for single post pages and rewrote it for the index.php. Here’s what the standard WordPress Next/Previous block of code looks like…

<div><?php previous_post_link( '%link', '<span>' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div><?php next_post_link( '%link', '%title <span>' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>

Mr. Roger Johansen from 456 Barea St. did this…

<ul> <?php if (get_adjacent_post(false, '', true)): // if there are older posts ?>
<li>Previous post: <?php previous_post_link('%link'); ?></li>
<?php endif; ?> <?php if (get_adjacent_post(false, '', false)): // if there are newer posts ?>
<li>Next post: <?php next_post_link('%link'); ?></li>
<?php endif; ?>
</ul>

So, I took a few simple steps and about 25 rewrites to get to this…

<ul> <?php if (get_previous_posts_link(false, '', true)): // if there are older posts ?>
<li>Previous post: <?php previous_posts_link('Previous'); ?></li>
<?php endif; ?> <?php if (get_next_posts_link(false, '', false)): // if there are newer posts ?>
<li>Next post: <?php next_posts_link('Next'); ?></li>
<?php endif; ?>
</ul>

What is happening here? Instead of looking for a next or previous post, I’m looking for the “previous_posts_links” and the same goes for the “next_posts_links”. After that, I had to get the correct linking  and change the text to match my preferred naming. Hopefully, this can help someone else with a similar issue.

Read the rest of this entry »