The Portfolio Page Template pagination may be backwards

Hi Jason!

Pagination can be a little tricky sometimes. The ‘Previous’ link is set up to display older projects, since they’re listed in the order they were published. Under this system, the first page (your home page) shows the most recent items, and then as you move to page 2, 3, etc, you see older (previous) projects.

It is possible to reverse that, by replacing the paging function.

First, you’ll want to set up a child theme. That way the modifications you’re making will be protected the next time the theme gets updated.

Once your Child Theme is in place, we’ll drop a modified version of the original paging function into your child functions.php file:

function sketch_paging_nav( $max_num_pages = '' ) {
	// Get max_num_pages if not provided
	if ( '' == $max_num_pages )
		$max_num_pages = $GLOBALS['wp_query']->max_num_pages;

	// Don't print empty markup if there's only one page.
	if ( $max_num_pages < 2 ) {
		return;
	}
	?>
	<nav class="navigation paging-navigation clear" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'sketch' ); ?></h1>
		<div class="nav-links">

			<?php if ( get_previous_posts_link( '', $max_num_pages ) ) : ?>
			<div class="nav-previous"><?php previous_posts_link( __( '<span class="meta-nav">Previous</span>', 'sketch' ), $max_num_pages ); ?></div>
			<?php endif; ?>

			<?php if ( get_next_posts_link( '', $max_num_pages ) ) : ?>
			<div class="nav-next"><?php next_posts_link( __( '<span class="meta-nav">Next</span>', 'sketch' ), $max_num_pages ); ?></div>
			<?php endif; ?>

		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}

Activate the child theme with that function and you’ll have ‘Next’ on the right to bring you to page 2, and ‘Previous’ on the left to bring you back to the first page.

One other thing – this will alter the pagination on the entire site, included blog posts if you have them.

If the site includes a blog and you don’t want that pagination reversed as well we can do that. It’ll take a bit more code, so let me know if that’s what you need to do ??

Hi Shireling,

Thanks for helping me out here.

Yes, I would like this pagination adjustment to only apply to the portfolio and not the blog as I will have both content sources.

More code is fine by me if I can get the behavior I seek. ??

Cheers, Jason

Cool. In that case, we’ll want the above function to be customized to just portfolios, so we’ll give it a different name. Use this in your child theme’s functions.php instead:

function sketch_my_portfolio_paging_nav( $max_num_pages = '' ) {
	// Get max_num_pages if not provided
	if ( '' == $max_num_pages )
		$max_num_pages = $GLOBALS['wp_query']->max_num_pages;

	// Don't print empty markup if there's only one page.
	if ( $max_num_pages < 2 ) {
		return;
	}
	?>
	<nav class="navigation paging-navigation clear" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'sketch' ); ?></h1>
		<div class="nav-links">

			<?php if ( get_previous_posts_link( '', $max_num_pages ) ) : ?>
			<div class="nav-previous"><?php previous_posts_link( __( '<span class="meta-nav">Previous</span>', 'sketch' ), $max_num_pages ); ?></div>
			<?php endif; ?>

			<?php if ( get_next_posts_link( '', $max_num_pages ) ) : ?>
			<div class="nav-next"><?php next_posts_link( __( '<span class="meta-nav">Next</span>', 'sketch' ), $max_num_pages ); ?></div>
			<?php endif; ?>

		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}

The only difference is the name. Next, we’ll need to call that function in the portfolio page template.

Locate the portfolio-page.php file in the parent theme folder and make a copy in your child theme. Now your child theme has its own portfolio template!

Locate this snippet near the end of the file:

<?php
   sketch_paging_nav( $project_query->max_num_pages );
   wp_reset_postdata();
?>

and swap out the function name so we’re calling that custom pagination, like this:

<?php
   sketch_my_portfolio_paging_nav( $project_query->max_num_pages );
   wp_reset_postdata();
?>

Let me know how it goes!

Very helpful Chad. I’ve made child themes before and have some experience with WordPress’ code and web development in general. I’ll give it a go and confirm here if it worked for me or not.

Unfortunately I’m hung up on creating the child theme and have not been able to try out the re-coded pagination. I’m using the following style.css in my new ‘sketch-child’ directory:

/*
Theme Name: Sketch Child
Description: A clean, responsive portfolio theme with options for a custom site logo, a featured content slider, and lots of room to share your work. This child theme changes the portfolio page pagination to move forward rather than backward through the projects.
Version: 1.0.0
Author: Jason Tyde
Author URI: https://www.jasontyde.com
Template: sketch
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sketch-child
Tags: featured-images, full-width-template, one-column, photography, portfolio, right-sidebar, rtl-language-support, theme-options, translation-ready, two-columns
*/

And have copied & edited the following code into the child’s functions.php:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'sketch-style' for the Sketch theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

When I activate the child theme and reload a page the parent’s style is not being inherited properly. I think there may be an error in the $parent_style variable, but my experiments have not solved it. The referenced page describing how to build a child theme has not helped me solve this issue either. Nor has reading the wp_enqueue_style() function description gotten me there.

There may be some style dependencies I’m not handling properly, yet I don’t know how to pull them all in just yet.

Can you please help me get the child theme working just like the parent?

Thanks for your help.

I suggest a simpler enqueuing function – this is from the Codex:

add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
  function my_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Also, best practice is to not add a closing PHP tag in functions.php as it can cause other issues.

Hi Kathryn,

Thanks for your help.

I tried the enqueuing function your propose and I’m seeing the same result.

I think all these different versions of the enqueuing function are missing something with respect to dependencies.

How can I uncover the dependencies and ensure they all get enqueued?

To be safe, I just set up a child theme from scratch, copy and pasting Kathryn’s snippet into the functions.php file and it loaded everything up.

Double check that you don’t have a closing ?> tag after function, then try deactivating the child theme and re-activating it.

If that doesn’t work, copy and paste the contents of your child theme’s functions.php in your next reply ??

Unfortunately Kathryn’s enqueue function does not load everything up for me, although it loads much of the styling. These two full-page images show the differences.

The Sketch parent:

My Sketch child:

While much of the styling is reproduced in the child, a quick review shows that the background color and the social menu are not being rendered accurately. So there is some style that is not coming through and I do not know how to pull it into the child. Please help.

My child’s function.php:

<?php

function sketch_child_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'sketch_child_scripts' );

Two questions: 1) How do I identify which .css (and maybe .js) files are missing? 2) How do I successfully enqueue them in the child?

Thanks to both of you for all your help with this child-creation issue.

Excellent, thanks for the screenshots.

The background color is normal – that setting is theme based, so when you switch to your child theme, you’ll need to reset the color in your Customizer.

The Social Links menu is something different.

It looks like you’ve removed the footer attribute that normally appears over on the left in the footer? (screenshot) Perhaps something from that change is causing an issue. Try eliminating that change.

It might also be a good idea to delete the parent them and install it fresh.

You bet. A picture says a 1000 words and all. ??

I was able to modify the theme-specific background color successfully.

Unfortunately removing and reinstalling Sketch as the parent theme did not resolve the issue with the Social menu.

Yet, the information you provided about the theme-specific colors led me to make another couple theme-specify changes: 1. I reassigned the logo image I was using and 2. I reassigned the existing Header & Social menus to the appropriate theme locations in the Customizer and that resolved the rendering issues I’ve noticed so far.

I’ll now do a deeper review of the child to see if I can find any more rendering discrepancies. If I do not find any I will turn my attention back to the pagination issue that started the thread. If I do find any I will share those details and ask for more help.

You’ve been great and I appreciate your help Chad!

• This reply was modified 7 years, 11 months ago by Jason Tyde.

Also, I’d like to remove these screenshot images from my web server, yet if I do the image links above will break. Is there a web server associated with these forums that I may upload this images to for preservation of the thread integrity?

Is there a web server associated with these forums that I may upload this images to for preservation of the thread integrity?

There isn’t, but you can upload the screenshots to a service like Cloudup, Imgur or Snaggy.

Thanks Kathryn, I just setup a Cloudup account and uploaded the screenshots there.

However I note that I am unable to edit the posts with the screenshots embedded in them due to the edit timeout. Is there any way I can change these posts so that the images will not be broken links when I remove the files from my personal web server? If you can change those image links I can provide URLs to Cloudup.

Next up, I will return to the original idea that started this post which was to adjust the pagination of the Portfolio Page Template used by the Sketch template. Rather than page forward as I originally wished for I may just change the nav language from ‘Previous’ to ‘Older Projects’ and ‘Next’ to ‘Newer Projects’ to give a clearer sense of how a user is moving through my project timeline.

Hi Chad & Kathryn,

I tried out the code snippets above that Chad provided for me to modify the portfolio navigation of the site. They work great to adjust the navigation.

Yet, the featured project slider is broken in the child and now erroneously appears on pages 2,3,… with broken image links on the portfolio template. Clicking on the missing image from the improperly-appearing featured project slider on pages 2,3,… takes me to the home page.

This error with the slider is likely to have been present all along with the child theme and I’m only noticing it now after having returned to this project of adjusting the Portfolio Page Template navigation via a child theme.

I did a preliminary look at the code for the Sketch Portfolio Page template to attempt to identify why this error is occurring and solve it without any success. With your advanced knowledge can you please help me resolve the broken slider on pages 2,3,… in the child?

Thanks, Jason