IXION Theme: Pagination support

  • Unknown's avatar
    mshumacher · Member ·

    Hi,

    I’ve discovered an issue with the recent IXION theme.
    Pagination is not implemented in a usable fashion.

    Here is an example of how pagination currently looks & works and how it could look & work.

    Lack of decent pagination support poses an issue for all wordpress.com bloggers using this theme.

    I would like to raise a feature request for proper pagination implementation in this otherwise great theme.

    This enhancement is quite simple:
    add a function to the themes functions.php (as described in this wordpress.org article)

    I’m providing an example of the pagination function to achieve the looks I linked to above: 

    function pagination() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages <= 1 )
		return;

	$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
	$max   = intval( $wp_query->max_num_pages );

	/**	Add current page to the array */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Add the pages around the current page to the array */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) <= $max ) {
		$links[] = $paged + 2;
		$links[] = $paged + 1;
	}

	echo '
      ' . "n";

	/**	Previous Post Link */
	if ( get_previous_posts_link() )
		printf( '
    • %s
      • ' . "n", get_previous_posts_link() );

	/**	Link to first page, plus ellipses if necessary */
	if ( ! in_array( 1, $links ) ) {
		$class = 1 == $paged ? ' class="active"' : '';

		printf( '
    • %s
      • ' . "n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

		if ( ! in_array( 2, $links ) )
			echo '
    • …
      • ';
	}

	/**	Link to current page, plus 2 pages in either direction if necessary */
	sort( $links );
	foreach ( (array) $links as $link ) {
		$class = $paged == $link ? ' class="active"' : '';
		printf( '
    • %s
      • ' . "n", $class, esc_url( get_pagenum_link( $link ) ), $link );
	}

	/**	Link to last page, plus ellipses if necessary */
	if ( ! in_array( $max, $links ) ) {
		if ( ! in_array( $max - 1, $links ) )
			echo '
    • …
      • ' . "n";

		$class = $paged == $max ? ' class="active"' : '';
		printf( '
    • %s
      • ' . "n", $class, esc_url( get_pagenum_link( $max ) ), $max );
	}

	/**	Next Post Link */
	if ( get_next_posts_link() )
		printf( '
    • %s
      • ' . "n", get_next_posts_link() );

	echo '
    ' . "n";

}

    It’s also required to call the function in the themes index.php or loop.php files (typically near the bottom of where it says “Older posts” or “Older entries”)
    Like so: 

    <?php if (function_exists("pagination")) {
    pagination();
} ?>

    Let me know whether this is feasible and how I can raise a feature request to get this added.
    This simple fix will make an already great theme – amazing.

    Thank You
    Martin
    martinshreder.com

  • staff-loquaciousloon · Staff ·

    Hi @mshumacher!

    Looking at the code you’ve provided, this sounds like it’s for single posts/pages that are using the

    <!--nextpage-->

    pagination method to split the content, is that correct?

    (Also, all other pagination on WordPress.com uses an “Older Posts” or similar button, and not numbered pages).

    If so, I see a few main differences between the examples:

    – the next/previous links
    – the ellipses (…) in the middle rather than listing each page individually

    While the current setup is a different implementation, it should be fully functional for navigating between pages – unless there’s something else that’s causing the links to not work.

    The structure of the pagination links is built into the theme, and (barring a bug or other issue) isn’t something that there are plans to alter at this stage – you could (with a Premium Plan or Business Plan) use Custom CSS to style the links more to your liking.

    Let me know if I’ve missed part of the issue, or if I can help any further :)

  • Unknown's avatar
    mshumacher · Member ·

    Hi staff-loquaciousloon!

    You are correct, I am talking about splitting content with the nextpage tag.

    I am working on a post that will span 30+ pages.
    With the default pagination implementation I will have 30+ individual page links at the end of my post which turns it into a UI nightmare from a readers perspective.

    I’m on the Premium Plan and CSS customizations only allow tweaking pagination links, the theme, however, outputs some plaintext as part of the pagination div. There are no CSS classes or even HTML tags assigned to this plaintext, meaning no customizations are possible.

    Example of the resulting HTML:
    <div class="page-links">Pages: <a href="https://martinshreder.wordpress.com/?p=1949&preview=true">1</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=2&preview=true">2</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=3&preview=true">3</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=4&preview=true">4</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=5&preview=true">5</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=6&preview=true">6</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=7&preview=true">7</a> 8 <a href="https://martinshreder.wordpress.com/?p=1949&page=9&preview=true">9</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=10&preview=true">10</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=11&preview=true">11</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=12&preview=true">12</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=13&preview=true">13</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=14&preview=true">14</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=15&preview=true">15</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=16&preview=true">16</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=17&preview=true">17</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=18&preview=true">18</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=19&preview=true">19</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=20&preview=true">20</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=21&preview=true">21</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=22&preview=true">22</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=23&preview=true">23</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=24&preview=true">24</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=25&preview=true">25</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=26&preview=true">26</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=27&preview=true">27</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=28&preview=true">28</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=29&preview=true">29</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=30&preview=true">30</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=31&preview=true">31</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=32&preview=true">32</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=33&preview=true">33</a> <a href="https://martinshreder.wordpress.com/?p=1949&page=34&preview=true">34</a></div>
    Visual result with custom CSS aplied: Image

    I understand that nothing is broke, per-se, but perhaps this can be classified as a UI bug or UI enhancement.

    Thanks
    Martin
    martinshreder.com

  • staff-loquaciousloon · Staff ·

    Hey @mshumacher

    I see your point on the HTML, that does make styling more difficult.

    The function generating the page links is a WordPress Core function: wp_link_pages().

    Adding a customized pagination structure like the one that you’ve proposed would change to many working sites, but you could propose an enhancement on the core function, but opening an enhancement ticket over on WordPress.org:

    https://make.wordpress.org/core/

    If you create a ticket, be sure to change the Type to Enhancement, and reference the function I’ve mentioned above as the one you have an idea for improving :)

  • The topic ‘IXION Theme: Pagination support’ is closed to new replies.