Posted by jonathan-t on July 2, 2008 at 8:10pm
Have searched extensively but still can't figure out how to theme the default pager.
Am using Drupal 5.x and Zen sub-themes. For one of these sub-themes (and that sub-theme only!) I need to change the appearance and default text-strings of the pager. I would like to do this within the sub-theme templates.
Presumably, the pager is displayed by the "print $content_bottom" line in the page.tpl.php template.
1) Where is $content_bottom" actually generated?
2) How can I override the pager text strings (First, Previous, Next, Last, etc) in the template?
Any help will be greatly appreciated.
Comments
...
Actually, content_bottom is simply a region in the zen theme. The pager will be part of the $content variable. If you want to customize the look of the pager, you'll want to override the theme_pager function in your theme's template.php file.
www.roopletheme.com
Thanks for your patience. I
Thanks for your patience. I obviously still have a lot to learn.
The link you gave looks like it may be helpful (if I can figure out how to use it!) What's confusing me is that the theme_pager function doesn't show up anywhere in the Zen template.php files. Since the function isn't there, how does a pager show up at all?
In order to override the default pager do I merely copy into the template, the code example from the link you pointed me to, and change the variables to suit? Or is something else involved?
...
You won't find theme_pager in the zen theme... it's provided by Drupal core. You can read about theme overrides here, but the basic idea is that Drupal provides a lot of default functionality in the form of themeable functions. If you want to alter this functionality, copy the default themeable function into your theme's template.php file, change the name from theme_function-name to yourthemename_function-name, and alter the function as you wish.
So, for example, here's the default implementation of theme_pager:
<?php
function theme_pager($tags = array(), $limit = 10, $element = 0, $parameters = array()) {
global $pager_total;
$output = '';
if ($pager_total[$element] > 1) {
$output .= '<div class="pager">';
$output .= theme('pager_first', ($tags[0] ? $tags[0] : t('« first')), $limit, $element, $parameters);
$output .= theme('pager_previous', ($tags[1] ? $tags[1] : t('‹ previous')), $limit, $element, 1, $parameters);
$output .= theme('pager_list', $limit, $element, ($tags[2] ? $tags[2] : 9 ), '', $parameters);
$output .= theme('pager_next', ($tags[3] ? $tags[3] : t('next ›')), $limit, $element, 1, $parameters);
$output .= theme('pager_last', ($tags[4] ? $tags[4] : t('last »')), $limit, $element, $parameters);
$output .= '</div>';
return $output;
}
}
?>
If I wanted to change the text for the pagers in my copy of the zen theme, I would paste this code into the theme's template.php file and modify it to look like this:
<?php
function zen_pager($tags = array(), $limit = 10, $element = 0, $parameters = array()) {
global $pager_total;
$output = '';
if ($pager_total[$element] > 1) {
$output .= '<div class="pager">';
$output .= theme('pager_first', ($tags[0] ? $tags[0] : t('[Start]')), $limit, $element, $parameters);
$output .= theme('pager_previous', ($tags[1] ? $tags[1] : t('[Previous]')), $limit, $element, 1, $parameters);
$output .= theme('pager_list', $limit, $element, ($tags[2] ? $tags[2] : 9 ), '', $parameters);
$output .= theme('pager_next', ($tags[3] ? $tags[3] : t('[Next]')), $limit, $element, 1, $parameters);
$output .= theme('pager_last', ($tags[4] ? $tags[4] : t('[End]')), $limit, $element, $parameters);
$output .= '</div>';
return $output;
}
}
?>
Note the modified function name, which is critical to making this work.
If all you want to do is change the appearance of the pagers, you can probably do this with CSS, usually by adding your CSS code to the theme's style.css file. For example, here's a sample set of CSS definitions that will alter the pager display to somewhat (but not too much :) ) resemble the pagers used at drupal.org:
.pager a,
.pager strong.pager-current {
padding:0.5em;
}
.pager {
padding:10px 0px 3px;
}
.pager div {
padding:0em;
display:inline;
}
.pager strong,
.pager a,
.pager a:link,
.pager a:visited {
margin:0px 0.15em 0px 0.15em;
background-color:#fff;
border:1px solid #c11f03;
font-weight: bold;
}
div#page .pager a:hover {
text-decoration:none;
color:#fff;
background-color:#c11f03;
font-weight: bold;
}
.pager strong {
background-color:#c11f03;
color:#fff;
font-weight: bold;
}
You will, of course, want to customize the colors, font sizes, etc. to obtain your desired results.
www.roopletheme.com
Thanks so much!
The lightbulb just went off in my head. Your explanation was exactly what I needed. It's one of those fundamental concepts that has had me stumped for several days. Though I'd read about theme overrides before, I just didn't "get" it. Now that I see how it works, it should help me with several other areas as well. Thanks for taking the time to lead me through it.
hi there, does the method
hi there, does the method also work with D6 with a custom theme template?
subscribing
add
Where to copy theme_pager() from
Also if you want to copy the theme_pager() code (in drupal 7 at least) it is in the includes/pager.inc directory of your drupal installation. Took me forever to find it but it does tell you in the API docs.
Now if only I could figure out why I can't get it to work in drupal 7. Can anyone help? I pasted this code from the pager.inc but now I get an error
/**
* Returns HTML for a query pager.
*
* Menu callbacks that display paged query results should call theme('pager') to
* retrieve a pager control so that users can view other results. Format a list
* of nearby pages with additional query results.
*
* @param $variables
* An associative array containing:
* - tags: An array of labels for the controls in the pager.
* - element: An optional integer to distinguish between multiple pagers on
* one page.
* - parameters: An associative array of query string parameters to append to
* the pager links.
* - quantity: The number of pages in the list.
*
* @ingroup themeable
*/
function a3_pager($variables) {
$tags = $variables['tags'];
$element = $variables['element'];
$parameters = $variables['parameters'];
$quantity = $variables['quantity'];
global $pager_page_array, $pager_total;
// Calculate various markers within this pager piece:
// Middle is used to "center" pages around the current page.
$pager_middle = ceil($quantity / 2);
// current is the page we are currently paged to
$pager_current = $pager_page_array[$element] + 1;
// first is the first page listed by this pager piece (re quantity)
$pager_first = $pager_current - $pager_middle + 1;
// last is the last page listed by this pager piece (re quantity)
$pager_last = $pager_current + $quantity - $pager_middle;
// max is the maximum page number
$pager_max = $pager_total[$element];
// End of marker calculations.
// Prepare for generation loop.
$i = $pager_first;
if ($pager_last > $pager_max) {
// Adjust "center" if at end of query.
$i = $i + ($pager_max - $pager_last);
$pager_last = $pager_max;
}
if ($i <= 0) {
// Adjust "center" if at start of query.
$pager_last = $pager_last + (1 - $i);
$i = 1;
}
// End of generation loop preparation.
$li_first = theme('pager_first', array('text' => (isset($tags[0]) ? $tags[0] : t('« first')), 'element' => $element, 'parameters' => $parameters));
$li_previous = theme('pager_previous', array('text' => (isset($tags[1]) ? $tags[1] : t('‹ previous')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));
$li_next = theme('pager_next', array('text' => (isset($tags[3]) ? $tags[3] : t('next ›')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));
$li_last = theme('pager_last', array('text' => (isset($tags[4]) ? $tags[4] : t('last »')), 'element' => $element, 'parameters' => $parameters));
if ($pager_total[$element] > 1) {
if ($li_first) {
$items[] = array(
'class' => array('pager-first'),
'data' => $li_first,
);
}
if ($li_previous) {
$items[] = array(
'class' => array('pager-previous'),
'data' => $li_previous,
);
}
// When there is more than one page, create the pager list.
if ($i != $pager_max) {
if ($i > 1) {
$items[] = array(
'class' => array('pager-ellipsis'),
'data' => '…',
);
}
// Now generate the actual pager piece.
for (; $i <= $pager_last && $i <= $pager_max; $i++) {
if ($i < $pager_current) {
$items[] = array(
'class' => array('pager-item'),
'data' => theme('pager_previous', array('text' => $i, 'element' => $element, 'interval' => ($pager_current - $i), 'parameters' => $parameters)),
);
}
if ($i == $pager_current) {
$items[] = array(
'class' => array('pager-current'),
'data' => $i,
);
}
if ($i > $pager_current) {
$items[] = array(
'class' => array('pager-item'),
'data' => theme('pager_next', array('text' => $i, 'element' => $element, 'interval' => ($i - $pager_current), 'parameters' => $parameters)),
);
}
}
if ($i < $pager_max) {
$items[] = array(
'class' => array('pager-ellipsis'),
'data' => '…',
);
}
}
// End generation.
if ($li_next) {
$items[] = array(
'class' => array('pager-next'),
'data' => $li_next,
);
}
if ($li_last) {
$items[] = array(
'class' => array('pager-last'),
'data' => $li_last,
);
}
return '<h2 class="element-invisible">' . t('Pages') . '</h2>' . theme('item_list', array(
'items' => $items,
'attributes' => array('class' => array('pager')),
));
}
}
Figured it out. Woot!
I had to replace all instances of » › ‹ « with 'normal' characters. I guess my zen theme is checking for plain text??