WordPress.org

Forums

Pagination of unordered lists on a standard page? (13 posts)

  1. SpencerCE89
    Member
    Posted 1 year ago #

    I hope I do an ok job explaining this.

    Looking through my theme files, I can see that index.php, search.php, tags.php, categories.php, archive.php, and so on and so forth use the if(have_posts) code to bring up posts, and then there is a div with:

    <?php if (function_exists("pagination")) {
    
                                    pagination($additional_loop->max_num_pages);
    
                                } ?>

    for the pagination. It shows 24 posts per page, and then starts a new one.

    I'm wondering if there is a way to apply this same effect to an unordered list that I have on another page.

    I have a chunk of code in a custom theme file (page-a.php) which displays all the terms starting with the same letter from one of my taxonomies as icons, similar to how they show up on my index, archive, and tag pages, etc :

    <?php
    $terms = get_terms("character");
    $count = count($terms);
    $letter = 'A';
    if ( $count > 0 ){
       $ul = "<ul>";
       foreach ( $terms as $term ) {
          if ( preg_match("/^$letter/i",$term->name) ) {
             echo $ul;
             $ul = '';  // only display once
             echo '<li><div class="spacer"></div><a href="' . get_term_link($term) . '">'. $term->name . '</a> <a href="' . get_term_link($term) . '"><img src="/images/characters/A/'.$term->slug.'".jpg/></a></li>';
          }
       }
       if ( $ul == '') {
          echo "</ul>";
       }
    }
    ?>

    As of right now, they are all showing up on one page. Often times there can be dozens, even hundreds of terms, and so I'd like it to create a new page according to the number set in the reading settings like it does with all the others pages. Twenty four results, then automatically create a new page for the next 24.

    Is there any way to achieve this?

  2. keesiemeijer
    moderator
    Posted 1 year ago #

    Try it with this:

    <?php
    $letter = 'A';
    
    $paged_terms = false;
    
    // current page number
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    
    // get posts per page as set in the reading settings
    $posts_per_page = get_option( 'posts_per_page' );
    
    // get all terms starting with the letter
    $terms = get_terms( "character", array( 'name_like' => $letter ) );
    
    // check if terms where found
    if ( !empty( $terms ) && !is_wp_error( $terms ) ) {
    
    	// get paged terms
    	$paged_terms = array_slice( $terms, ( $paged-1 ) * $posts_per_page, $posts_per_page );
    	if ( $paged_terms ) {
    
    		// display terms
    		echo "<ul>";
    		foreach ( $paged_terms as $term ) {
    			echo '<li><div class="spacer"></div><a href="' . get_term_link( $term ) . '">'. $term->name . '</a> <a href="' . get_term_link( $term ) . '"><img src="/images/characters/A/'.$term->slug.'".jpg/></a></li>';
    		}
    		echo "</ul>";
    
    		// create a fake query for pagination functions
    		$fake_query = new WP_Query;
    		$fake_query->max_num_pages = ceil( count( $terms ) / $posts_per_page );
    
    		// display pagination
    		if ( function_exists( "pagination" ) ) {
    			pagination( $fake_query->max_num_pages );
    		}
    
    	}
    }
    
    if ( !$paged_terms ) {
    	_e( 'Sorry, no terms where found.' );
    }
    ?>
  3. SpencerCE89
    Member
    Posted 1 year ago #

    Hi, thanks for the reply. That does seem to apply pagination, however there are still a few issues.

    The first one, which I suspect is the easiest to solve, it needs to be styled to match the other pages where pagination is used. I can't figure out what chunk of the above code needs to go into the <div class="paginator"> tags. I seem to break the code, getting a parse error whenever I try to insert it myself.

    The second one is that, while they are split into pages, I get results for every term within the taxonomy, and not just the terms that start with the same letter.

    If you could give me a hand with those as well I'd appreciate it.

    Thanks in advance :)

  4. keesiemeijer
    moderator
    Posted 1 year ago #

    What is the code for the paginator tags in your theme?

    There is a typo in the code to get all tags by a letter. Change this:

    $terms = get_terms( "character", array( 'name_like' => $letter ) );

    to this

    $terms = get_terms( "character", array( 'name__like' => $letter ) );
  5. SpencerCE89
    Member
    Posted 1 year ago #

    That seems to have solved it.

    This is the code from my css file for the paginator class:

    .paginator { width: 700px; margin: 20px 25px; }
    .paginator span, .paginator a { display: block; float: left; margin: 2px 2px 2px 0; padding: 6px 10px 5px 10px; text-decoration: none; width: auto; color: #ffffff; background: #201f20; }
    .paginator a:hover { color: #ffffff; background: #fb479c; }
    .paginator .current { padding: 6px 10px 5px 10px; background: #fb479c; color:#ffffff; }
  6. SpencerCE89
    Member
    Posted 1 year ago #

    I may have misunderstood that. That's the code that is used to style it. This is the actual chunk that brings up the pagination on the other pages in my theme:

    <div class="paginator">
    
    <?php if (function_exists("pagination")) {
    
                                    pagination($additional_loop->max_num_pages);
    
                                } ?>
    
                        </div>

    Not sure which one you were asking for.

  7. keesiemeijer
    moderator
    Posted 1 year ago #

    Try changing this:

    // display pagination
    if ( function_exists( "pagination" ) ) {
    	pagination( $fake_query->max_num_pages );
    }

    to this:

    // display pagination
    echo '<div class="paginator">';
    if ( function_exists( "pagination" ) ) {
    	pagination( $fake_query->max_num_pages );
    }
    echo '</div>';
  8. SpencerCE89
    Member
    Posted 1 year ago #

    Thanks for your patience. A few things are still a little wonky.

    The chunk of code I originally posted is within a div called "charactericon", and I think the pagination is inheriting some of it's characteristics from that (text size, etc) instead of inheriting it from the paginator div. Is there a way to stop it from doing that?

    Also with the previous code, my icons were pretty flush with the page title, being 2 or 3 pixels underneath it. When I replace my previous code with your code (pasting it in the same charactericon div) it's bumped down 20 or so pixels.

    Any advice for this?

    Again, thanks for your patience. You are a life saver.

  9. SpencerCE89
    Member
    Posted 1 year ago #

    I've been working on this a day or so, and I found that I can manually set the text size for the pagination, bringing it down to 12px from the 22px it was inheriting from that "charactericon" div. However, the display block that it appears in remains the same size as when the text was 22px.

    I'm still having issues with the spacing too. I misspoke when I originally described the problem. Usually, the space between the title and the icons is about 20 pixels, but with your code it is bumped down two or three pixels, so it's jarring to the eye when switching between that page and pages that have the correct spacing. What could be causing it to be bumped down a few pixels like that?

    I can't know for sure, but I think that the problem may be because the pagination is within the charactericon div. For the rest of my theme, the pagination is outside of that div and the spacing and text issues are nonexistent.

    Here's my code as it is right now:

    <?php get_header(); ?>
    
        <div class="main">
    
            <div class="homecontent">
    
                <div class="homeposts">
    
                <?php if(have_posts()) { ?>
    
                    <h2 class="post-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><?php wp_title(); ?></h2>
    
    				<div class="charactericon">
    <?php
    $letter = 'A';
    
    $paged_terms = false;
    
    // current page number
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    
    // get posts per page as set in the reading settings
    $posts_per_page = get_option( 'posts_per_page' );
    
    // get all terms starting with the letter
    $terms = get_terms( "character", array( 'name__like' => $letter ) );
    
    // check if terms where found
    if ( !empty( $terms ) && !is_wp_error( $terms ) ) {
    
    	// get paged terms
    	$paged_terms = array_slice( $terms, ( $paged-1 ) * $posts_per_page, $posts_per_page );
    	if ( $paged_terms ) {
    
    		// display terms
    		echo "<ul>";
    		foreach ( $paged_terms as $term ) {
    			echo '<li><div class="spacer"></div><a href="' . get_term_link( $term ) . '">'. $term->name . '</a> <a href="' . get_term_link( $term ) . '"><img src="/images/characters/A/'.$term->slug.'".jpg/></a></li>';
    		}
    		echo "</ul>";
    
    		// crate a fake query for pagination functions
    		$fake_query = new WP_Query;
    		$fake_query->max_num_pages = ceil( count( $terms ) / $posts_per_page );
    
    		// display pagination
    		echo '<div class="paginator">';
    		if ( function_exists( "pagination" ) ) {
    			pagination( $fake_query->max_num_pages );
    		}
            echo '</div>';
    	}
    }
    
    if ( !$paged_terms ) {
    	_e( 'Sorry, no terms where found.' );
    }
    ?>
    
      </div>
    
                <div class="clear"></div>
    
                    <?php }
    
                    else { ?>
    
                        <h2>Sorry, no posts matched your criteria</h2>
    
                    <?php } ?>
    
                </div>
    
            </div>
    
            <div class="clear"></div>
    
        </div>
    
    <?php get_footer(); ?>

    Again, when I've tried to move bits of the code around myself I just end up breaking it. I'd be curious to see if these problems go away if the pagination was outside of the charactericon div.

  10. keesiemeijer
    moderator
    Posted 1 year ago #

    Can you post a link to a page with this problem.

    What is normally in the "charactericon" div?

  11. SpencerCE89
    Member
    Posted 1 year ago #

    Well, the charactericon div is what I'm using to style the results in the UL. It's not used anywhere else on my site except there, but it basically mimics the look of the rest of the pages on my site.

    I did a bit more testing last night and the spacing issue only appears when I add the paginator div to that bit of the code.

    I'd rather not post my page publicly. I have privacy concerns and it's not something I want this username connected to. Is there a way to contact your privately?

  12. SpencerCE89
    Member
    Posted 1 year ago #

    Been testing a bit more and I've noticed that changing the top margin for the paginator moves -everything- from the above php code, which is why the spacing is weird.

    This is the paginator css:

    .paginator { width: 700px; margin: 20px 25px; }
    .paginator span, .paginator a { display: block; float: left; margin: 2px 2px 2px 0; padding: 6px 10px 5px 10px; text-decoration: none; width: auto; color: #ffffff; background: #201f20; }
    .paginator a:hover { color: #ffffff; background: #fb479c; }
    .paginator .current { padding: 6px 10px 5px 10px; background: #fb479c; color:#ffffff; }

    When I change that 20px margin, everything moves with it, instead of just the paginator div. So if I give it a 200px margin, all of my icons that are generated by the UL get bumped down 200 px, when it should just be bumping down the paginator div. It's acting as if it's all part of the same div or something.

  13. SpencerCE89
    Member
    Posted 1 year ago #

    I've continued to try and solve this problem with no results. Not sure what I could try next.

    I've never run into this problem before. I can't think of what would cause this paginator div to control the position of the charactericon div that it's within.

    Any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic