Best way to add to and/or customize pagination

[Eleven Sites]

Hi Jason,

I’m playing around with modifying the themeblvd pagination to add a search form after the pagination. I’m unable to get it to work. I tried the pluggable function route and the add action route, but no dice. There must be something I’m missing regarding this function, because the following code only shows the search form and not the pagination.

function my_pagination() {
	echo themeblvd_get_pagination();
	echo get_search_form(); 
}
remove_all_actions ('themeblvd_pagination');
add_action ('themeblvd_pagination', 'my_pagination');

I may need to further customize the pagination, I’d want it to change everywhere.

Please let me know the best way to do this.

Thanks,

Lindsay

Topic

[Jason Bobich]

Hi Lindsay,

I can help you with this but can you first try to explain what you’re looking to customize about breadcrumbs, other than just adding the search form?

[Eleven Sites]

Hi Jason,

In addition to the search form, the client would like to customize the pagination to say “Page # of #”. I have the following code that I’ve used in the past to do this.

function custom_pagination() {
	global $wp_query;
	$total = $wp_query->max_num_pages;
	// only bother with the rest if we have more than 1 page!
	if ( $total > 1 ) {
		// get the current page
		if ( !$current_page = get_query_var('paged') )
		$current_page = 1;
		// structure of "format" depends on whether we're using pretty permalinks
		 if( get_option('permalink_structure') ) {
		 	$format = '&paged=%#%';
			} else {
			$format = 'page/%#%/';
			} 
		echo '<span class="custom_pagination">Page '.$current_page.' of '.$total.'</span> ';
		echo paginate_links(array(
		'base' => get_pagenum_link(1) . '%_%',
		'format' => $format,
		'current' => $current_page,
		'total' => $total,
		'mid_size' => 10,
		'prev_next'          => False,
		'prev_text'          => __(''),
		'next_text'          => __(''),
		'type' => 'plain'
		));
		}
	}

[Jason Bobich]

When you’re trying to make edits like this you want to see exactly what you’re editing and look at the function of the theme you’re trying to manipulate. Trying to just guess is like driving a car with a blindfold – very difficult. 🙂

So, if you were to search for function themeblvd_get_pagitation in the theme directory with a text editor, you’ll find right away where this function in the theme is and you can look at it. Next, you’ll see that this is a function which returns a string of the outputted HTML, which is filterable with themeblvd_pagination.

There are a lot of ways you can accomplish your customization, but this would be your most basic setup:

function my_pagination( $html ) {
    // Edit the $html string however you want ...
    return $html;
}
add_filter('themeblvd_pagination', 'my_pagination');

Here’s how I would probably do your customization:

function my_pagination( $html ) {

    global $wp_query;
    $total = $wp_query->max_num_pages;

    if ( ! $current_page = get_query_var('paged') ) {
        $current_page = 1;
    }

    // Add current page after <div class="pagination">
    $html = str_replace(
        '<div class="pagination">',
        '<div class="pagination"><span class="label">Page '.$current_page.' of '.$total.'</span>',
        $html
    );

    // Add search form in there after <div class="pagination-wrap">
    $html = str_replace(
        '<div class="pagination-wrap">',
        '<div class="pagination-wrap">'.get_search_form(false),
        $html
    );

    return $html;
}
add_filter('themeblvd_pagination', 'my_pagination');

Note: When working with filters, the basic PHP function, str_replace() is a very, very handy one to understand in a lot of instances; I find myself using it a lot.

http://php.net/manual/en/function.str-replace.php

And this should get you started with CSS styling, with above example.

.pagination-wrap {
  padding: 20px 0;
}
.pagination-wrap .tb-search {
  float: right;
}
.pagination-wrap .pagination {
  float: left;
  margin: 4px 0;
}
.pagination-wrap .pagination .label {
  color: #666;
}

[Author]

Replies