While answering a topic on the WordPress Support forum lead us to look at the Twenty Eleven function ‘twentyeleven_content_nav( $nav_id )’ in the functions.php file.
A lot of the functions in the parent theme can be replaced with functions in the child theme, we will see comments like /* To override this link in a child theme */, but this function does not have this option, we have raised a ticket with WordPress Trac and hope it will be included at a later date.
Google it
First steps as always was to search the forum and Google for a solution, there were a few answers, the answer with the Google Ranked #1 is a suggestion just to edit the twenty eleven themes functions.php file, this is not good advice as future theme upgrades will delete and replace the themes files that is why we use a child theme for all our work.
The next few answers were to create a function in the child theme and call the new function in the files after copying them across, this is one of the correct ways to tackle this, but we know that there are a few out there that do not feel ready to tackle functions.php in a child theme.
Registered members can download a child theme with all four files populated with the WP Pagenavi code.
We already use the WP PageNavi here at Digital Raindrops and we added code to our template page, so we will use this as an alternative solution.
You may download the file here or visit the All Downloads page for other files.
Lets look at the function twentyeleven_content_nav(), this checks to see if our list has more than a single page, if so it outputs the previous and next page links.
/**
* Display navigation to next/previous pages when applicable
*/
function twentyeleven_content_nav( $nav_id ) {
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo $nav_id; ?>">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
<div class="nav-previous"><?php next_posts_link( __( '<span>←</span> Older posts', 'twentyeleven' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>→</span>', 'twentyeleven' ) ); ?></div>
</nav><!-- #nav-above -->
<?php endif;
}
We need to add a little conditional code in our pages, we want to check to see if wp_pagenavi is active and output the WP Pagenavi code.
We copy four files from the twenty eleven theme to our child theme, archive.php, author.php category.php and index.php as these pages have content (loop) lists, we open the files and find the lines that output the links and replace these with our code.
We will find two lines one before and one after the loop code.
<?php twentyeleven_content_nav( 'nav-above' ); ?> <?php twentyeleven_content_nav( 'nav-below' ); ?>
Lets look ath the nav-above code that will replace the line, this is a simple bit of conditional code that looks to see if WP Pagenavi is active, we add two blocks to each of our four files.
<?php /* Start wp-pagenavi support */ ?>
<?php if(function_exists('wp_pagenavi') ) : ?>
<?php wp_pagenavi(); ?>
<?php else: ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>
<?php endif; ?>
<?php /* End wp-pagenavi support */ ?>
We download and activate the WP Pagenavi plugin, we will find a settings page in the Admin area, we will leave you to look at the different settings, we are also using the built in Pagenavi stylesheet, we can add our own style in our child themes style.css.
Lets look at the different pages that we have altered.
archive.php
author.php
category.php
index.php
Notices
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Membership
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.
I have had a difficult time building a client website using twenty
eleven mostly due to problems with page pagination. I have a far
amount of WordPress experience and can overcome most issues quickly.
I did the same as you described in this article, gogggling for answers
and finding that many offering answers not actually tried their
proposed solution on twenty eleven and in the end wasting more of my
time and effort.. I needed to read your article a few times over,
then I just decided to copy your page templates to my child theme
directory which finally worked and gave me great relief after so much
time lost. Many thanks for a well though out and intelligently
informative solution.
Charles
director new-web-sites.com
Hi Charles,
Thanks for the comment, your experience with finding code snippets but not solutions is why this Website was launched, it is very frustrationg getting half a solution to a problem.
Thanks
David
Thank you, I truly appreciate it I am able to find a solution that provides me with everything I need to know as is found above. I am in the process of re-building my site using a TwentyEleven child theme in a test environment and I’ve spent a lot of time wading through help files that were less than helpful. I am sure I speak for a number of others when I say that it is truly refreshing to find a solution so clearly and fully explained.
I wanted to add that the tags.php file can also be edited and for those that have very little content and would like to test that this is really working, just change the test for the max_num_pages to 0 while making the changes. Once you’ve verified everything is working, change it back to 1. I will be using excerpts instead of full pages, so I found this to be helpful.
Thanks for this.
A user on my forums asked how to ad Wp-PageNavi support to pages and the method I had been using made it difficult to do this, so I referred to this post and plan to update my theme to use it.
thanks for the informative article. I quickly incorporated page navi into a child them, and am testing the navigation on my category archives. I still have the same problem for which I’ve been trying to find a solution – how do I stop the page links referring back to the entire post stream, and not the category post stream. So, one of my category archives shows posts for cat=4 for example. But, the page 2 link on that category shows index.php?paged=2. This reverts back to displaying the second page of ALL posts. Any thoughts much appreciated!
Pingback: Easily add Wp-PageNavi to Twenty Eleven | Zeaks Blog
I installed a child theme and tried to edit the functions.php. Now I can’t get out of it or go to my site. I get: Parse error: syntax error, unexpected T_ENDIF in /home/content/92/8103192/html/wp-content/themes/twentyeleven-pagenavi/functions.php on line 28. Any suggestions?
I fixed it, but I still don’t know what I did wrong. I don’t have the setup completed yet. I probably should never have started with this.
Hi Shelia,
We have a new version of this post, using a function, check it out!
http://digitalraindrops.net/2012/04/twenty-eleven-and-the-pluggable-functions/
I can’t seem to get my sidebars with this child theme. I’ve researched it, and put in the code I found, but no luck. I had a theme extension plugin on the parent theme and it’s still there, but I don’t know if it’s working.
Hi,
Thanks for the instructions…. I have a question, how can I define how many posts should be displayed on each page?
I have added the plugin and I would like to have only 5 posts on each page but cannot find this.
Thanks,
Ramtin