Add Wp PageNavi to Twenty Twelve Theme

Here’s how you can add Wp-PageNavi to a twenty Twelve child theme.

It’s not much different than how we added to Twenty Eleven. Open or create a functions.php for your child theme, and paste this code into it. If you’re creating a new functions.php don’t forget to add the opening php tag.

// WP-PageNavi
function twentytwelve_content_nav( $nav_id ) {
	global $wp_query;
	if ( $wp_query->max_num_pages > 1 ) : ?>
				<?php /* add wp-pagenavi support for posts */ ?>
		<?php if(function_exists('wp_pagenavi') ) : ?>
			<?php wp_pagenavi(); ?>
			<br />
		<?php else: ?>
		<nav id="<?php echo $nav_id; ?>">
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'tto' ); ?></h3>
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'tto' ) ); ?></div>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">←</span>', 'tto' ) ); ?></div>
		</nav><!-- #nav-above -->
	<?php endif; ?>
	<?php endif;
}

Once you’ve added this, install and activate Wp-PageNavi. If it’s not installed, it will display the default page navigation.

Here’s a bit of CSS you can use to style it as well.

/* WP-PageNavi CSS ------------------- */
.wp-pagenavi {
	clear: both;
	margin-bottom: 20px;
}
.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #BFBFBF;
	padding: 5px 8px;
	margin: 2px;	
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
}
.wp-pagenavi span.extend { 
	background:none;
	border:none;
}
.wp-pagenavi a, .wp-pagenavi span.current, .wp-pagenavi span.pages {
	border:1px solid #ccc;

}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #686868;
	color:#333333;
}
.wp-pagenavi a,.wp-pagenavi span.current,.wp-pagenavi span.pages {
	background: rgb(239, 239, 239);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.wp-pagenavi a:hover,.wp-pagenavi span.current {
	-webkit-box-shadow: 0 1px 1px #666;
	-moz-box-shadow: 0 1px 1px #666;
	box-shadow: 0 1px 1px #666;
}

37 thoughts on “Add Wp PageNavi to Twenty Twelve Theme

  1. Thomas

    Hello, thank you for trying to help – but your script seems to kill my functions.php.
    I replace the entire function for my pagination with it and get a blank screen (frontend and backend).

    What I can do, is comment the function out and replace it by the wp-pagenavi-tag.

    If your snippet is okay – where exactly will I have to put it?

    Best regards
    Thomas

    1. Zeaks

      Hi Thomas. You should not have to remove anything from your functions.php unless you have your own custom pagination. Are you adding this to Twenty Twelves functions.php or to a child theme as described in the post?

  2. Lori

    Thanks for this. Haven’t tried it yet. I’d really like to have a sidebar on my site.

    I am SO new at this that I don’t know how to “Open or create a functions.php ”

    I am using the Twenty Eleven theme but I’m so hesitant to change to the child theme because I lost a lot of content when experimenting with different themes,

    Will the content remain the same if I switch to the child theme.

    And could you please tell me or show in a screen shot how to open or create a functions.php.

    Thanks! Lori

    1. Zeaks

      Hi Lori. Your theme already has a sidebar, you just need to add widgets to it in Appearance > widgets. If you want the sidebar to display on post pages (when you click a post) here’s a tutorial for that. http://zeaks.org/code-snippets/add-sidebar-to-post-view-in-twenty-eleven-theme/

      A functions file is just a .php file in your theme folder which can be opened with Notepad. If you don’t know how to create one, you can copy one from any theme folder, open it, and remove the contents and use it in your child theme.
      Here’s more info on making child themes and there’s blank examples you can download and use at the bottom http://zeaks.org/create-a-wordpress-child-theme/

      You shouldn’t loose any content by switching themes. The only thing that will reset is your widgets, menus, and header image but they can easily be added back.

      If you need help with your child theme, feel free to use the forums of the contact link at the top.

      1. Lori

        Hi Zeak, Thanks so much for your reply. Yes, my theme had a sidebar when I started and then I began to get rid of the widgets and then everything was gone on the sidebar. Not sure exactly what I did.

        I go into appearance and add widgets but non show up.

        When I put “sidebar” into my search engine a random page comes up that is not on my site, but there is a sidebar there and a few things from my site. I think I messed it up somehow.

        Any suggestions? The tech support people at Blue Host don’t don’t how to fix it.

        I was hoping there was an easier way than adding a .php file which you said can be opened with notepad. I don’t even know what Notepad is. If there isn’t an easier way, I’ll try changing themes like you suggested.

        Your very generous for offering people help!

        Thanks! Lori

    1. Zeaks

      Hi Jame. Search result pages display a page nav at the top and bottom in Twenty twelve theme. The function in this tutorial will show wp-pagenavi anywhere that the default page nav would be displayed.

      If you want to remove it, copy search.php from Twenty Twelve to your child theme folder, then open it and remove the line

      < ?php twentytwelve_content_nav( 'nav-above' ); ?>
  3. more

    Hi! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s
    new to me. Anyhow, I’m definitely delighted I found it and I’ll be bookmarking and checking back often!

  4. Sandusk Buzzhead

    Great post. Also loved your 3 widget post for twenty twelve. Nice. Just a couple questions on this one. Why all the code for the functions.php file and not just the shortcode installation instructions as suggested on the wp-navi plugin page?

    Second question . . . your CSS is great and much appreciated but it’s not changing the style on my site at all. I just copied / pasted your code into my style.css in my child theme . . . and no change to the page navigation links.

    Also, the plugin seems to work on my search results, but not on my blog (my site is mostly pages). For the blog posts, the old navigation links are still active.

    Thanks again for the great information.

    1. Zeaks

      Hi Sandusk. The code added to functions hooks wp-pagenavi into twenty twelves default navigation. If it’s installed an active it will use it, if it’s not, then it’ll use the regular navigation. The instructions say to add

      < ?php wp_pagenavi(); ?>

      which is basically what you’re doing, but using an if statement it will show it if it’s there, and show the old nav if it’s not.

      To use the CSS, you may need to uncheck “use wp-pagenavi Css” in the plugin options.

      Pagenavi should display anywhere that twentytwelve_content_nav is called and there is more than one page of posts to display. It will not display pages because pages are not numbered in the way posts are and the plugin is not designed for pages, it will display multipart pages, but that’s different than numbering separate pages.

  5. Sandusk Buzzhead

    One more thing . . . the page navigation only goes up to page 5! Not sure why that is. I haven’t tried the standard wp-navi installation instructions but may give that a try. Even when I click in the settings to show 50 pages, it still only shows 5 pages.

  6. Pingback: Cara Memasang WP PageNavi di Themes Twenty Twelve | SIGIT.PW

  7. Bogdan

    Thanks for the post. I know that it isn’t the subject of this post, but it could have helped few words about how to make a file functions.php in the child theme without errors. Just for beginners. :)
    Thanks again !

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*