Custom Slider-Style Pagination

  • I have run into a bit of a problem with my current design… I run everything (minus the individual posts) in a three-column grid format.

    I thought it would be really nifty to have slider-style pagination flip through the post pages (I have a maximum of 9 posts displaying per grid, as desired).

    Here is what I have so far: https://ohmybonbon.com/

    And here is what I am trying to accomplish (pagination below main index post grid): https://ohmybonbon.com/2/ombb01.png

    Is there a way to accomplish a slider-style pagination as shown in my design draft, preferably without a plugin?

    Any help on this would be immensely appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)

  • you just need a pagination function first then style it using css. you can do this w/o plugin but you need to edit yout theme files.

    Thread Starter Ashley Michèlle

    (@ashleymichelle)

    Blacklizt – Thank you!

    I have run into some errors with the pagination, unfortunately…

    I can not quite figure where to insert the <?php echo paginate_links( $args ) ?> line into my main index code:

    <?php get_header(); ?>
</div><div id="gridContainer">
<?php
$slug = 'information';
$category = get_category_by_slug($slug);
query_posts($query_string . '&cat=-' . $category->cat_ID);
?>
<?php
$c = 1; //init counter
$bpr = 3; //boxes per row
if(have_posts()) :
	while(have_posts()) :
		the_post();
?>
			<div class="gridpost" id="post-<?php the_ID(); ?>">
				<a href="<?php the_permalink(); ?>"><div class="postImage" id="fade">
					<div class="postData"><div id="gridTitle"><?php the_title(); ?></div></div><?php the_post_thumbnail('grid-post-image'); ?></a>
				</div>
<?php if($c%3 == 0){
	$c = 'last';
	}else{
	$c = '';
 	}
	$c++;
?>
			</div>

<?php
if($c == $bpr) :
?>

<div class="clr"></div> 

<?php
$c = 0;
endif;
?>

<?php
        $c++;
	endwhile;
endif;
?>

<div class="clr"></div>

</div>

<?php get_footer(); ?>

    It is not showing up at all, regardless of where I place it. I can only assume it’s user error on my part, so any help would be immensely appreciated!

    Thread Starter Ashley Michèlle

    (@ashleymichelle)

    Also, this is the theme function I am calling:

    global $wp_query;

$total_pages = $wp_query->max_num_pages;

if ($total_pages > 1){

  $current_page = max(1, get_query_var('paged'));

  echo '<div class="page_nav">';

  echo paginate_links(array(
      'base' => get_pagenum_link(1) . '%_%',
      'format' => '/page/%#%',
      'current' => $current_page,
      'total' => $total_pages,
      'prev_text' => 'Prev',
      'next_text' => 'Next'
    ));

  echo '</div>';

}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom Slider-Style Pagination’ is closed to new replies.