Page Navigation in Articles

My site writes articles that sometimes require multiple pages. How can I code it so that when my readers need to click on page one or page two, it looks similar to this:



instead of this:



Example: http://tvsourcemagazine.com/2013/01/bes ... a-edition/

Also, I'd like to move the page navigation in articles above the related posts/contect.

Hi,

I'm not sure what do you want to achieve.. Your first screenshot it's a pagination from e.g category, second screen show article pagination (if you want this pagination you have to use <!--nextpage--> quicktag inside the post).

If you want to change the second pagination, edit /gavern/helpers/helpers.layout.fragments.php gk_post_links() function ( around line 289 ).
http://codex.wordpress.org/Function_Reference/wp_link_pages

Regards to pagination moving, are you using a plugin with related posts and social? First of all I need to know these plugins, but i think that you have to edit News/content.php file and move

Code: Select all

<?php gk_post_links(); ?>

before this line:

Code: Select all

<?php gk_post_fields(); ?>

Hi Piotr,

I'd like to code my article pagination to be similar to that of the pagination in the category view.

Ok, so edit /gavern/helpers/helpers.layout.fragments.php an gk_post_links() function ( around line 289 ) change to this function:

Code: Select all

function gk_post_links() {
   global $tpl;
   
   wp_link_pages( array(
      'before' => '<div class="page-link">',
      'after' => '</div>',
      'next_or_number' => 'next',
      'nextpagelink'     => __('Next page'),
      'previouspagelink' => __('Previous page'), )
   );
}

Then, edit News/css/override.css file (Don't forget to enable override.css file in Theme Advanced options) and add this code:

Code: Select all

.page-link {
    overflow: hidden;
    padding-bottom: 15px;
}

.page-link a {
    -webkit-appearance: none!important;
   background: #3299e2;
   border: none;
   -webkit-border-radius: 0px; /* For iOS browsers */
   color: #fff!important;
   cursor: pointer;
   display: block;
   float: left;
   font-size: 14px;
   font-weight: 400;
   height: 42px;
   line-height: 42px;
   margin: 0 5px 2px 2px;
   padding: 0 25px;
   text-align: center;
   -webkit-transition: all .1s ease-out;
      -moz-transition: all .1s ease-out;
        -o-transition: all .1s ease-out;
           transition: all .1s ease-out;
}

.page-link a:last-child {
    float: right;
}

.page-link a:hover {
    background: #212121;
    -webkit-border-radius: 0px;
    color: #fff;
}

Thank you,

I made the changes in the helper file so it looks like this now: http://tvsourcemagazine.com/2013/06/pho ... n-stage/2/

After making the changes, my "Pages" title has been bumped to the right. How can I set it so "Page" is set to the left, and the page numbers follow afterwards while still maintaining the new CSS?

Ex: Page: 1 2 3 4 5 6

The solution I gave you is to achieve similar to that of the pagination in the category view effect - Previous Page, Next Page only 2 buttons.

If you want all numbers and maintain CSS styling you have to do more work: e.g. here is the tutorial.

Unfortunately, WP function - wp_link_pages has a problem with the current pages number. The “1″ or "2" current pages aren’t wrapped in an HTML tag so there is no way to style it, so try the solution from tutorial.