Pagination of unordered lists on a standard page?

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.' );
}
?>

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 ??

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 ) );

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; }

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.

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>';

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.

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.

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

What is normally in the “charactericon” div?

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?

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.

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?