How to Add Numeric Pagination for Sparkling WordPress theme

Sparkling
1

Does anybody know how to add numeric pagination into center of current Sparkling paging navigation?

2

To enable numeric pagination for Sparkling WordPress theme you should follow these simple steps:

  1. Install and activate plugin called WP-PageNavi. You can read more about it here.

  2. Nothing will appear once you will install this plugin because this theme is not optimized to work with it my default but it is not big deal. Now you should replace this function inside index.php and archive.php:

<?php sparkling_paging_nav(); ?>

With this function that is from WP-PageNavi itself:

<?php wp_pagenavi(); ?>

Some styling might be required as there is absolutely no styling included with this theme to support this plugin but these changes are entirely up to you.

These modification can also be done via Child Theme. A sample Child Theme for Sparkling can be downloaded from here. Once you have Child Theme installed and activated, you can copy/paste both index.php and archive.php files from Parent Theme to Child Theme folder and then edit these files there. That way these changes will remain in place even after theme update.

3

Thank you!

I added this CSS for my web:

.wp-pagenavi a.nextpostslink{
float: right;
}

.wp-pagenavi a.previouspostslink{
float: left;
}

.wp-pagenavi .pages, .wp-pagenavi .extend{
    display: none;
}

.wp-pagenavi{
text-align: center;
}

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited, .wp-pagenavi span.current{
  display: inline-block;
  color: #f1c40f;
  background-color: #fff;
  border-radius: 4px;
  padding: 2px 10px;
  border: 1px solid #E8E8E8;
  -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
       -o-transition: all 0.5s;
          transition: all 0.5s;
  font-size: 18px;
  text-decoration: none;
  text-transform: uppercase;
}

.wp-pagenavi a:hover{
  background-color: #f1c40f;
  border: 1px solid #f1c40f;
  color: #fff;
}

@media (max-width: 992px) {
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited, .wp-pagenavi span.current{
  margin-bottom: 40px;
  }
}
4

@fasty

Awesome! Thank you for posting your solution here!

Will use this thread as reference to others looking to add numeric pagination for this theme.

5

Thanks fasty for posting your css, it was super easy to tweak for my own child theme. And thanks to Aigars for the code to make numeric pagination work in my Dazzling child theme!

6

i m using dazzling theme and i do all steps but i can’t find numeric pagination in th page where i put the books what must i do more??