1

How can I add a class to the first li.pager-item and a different class to the last li.pager-item for for a Views pager?

I know that I need to make a theme override of theme_pager https://api.drupal.org/api/drupal/includes!pager.inc/function/theme_pager/7

However I cant figure out what PHP to change.

  • Just add your style in Row class of the view. Maybe it can help – Артем Apr 27 '15 at 20:08
  • No the rows are part of the views results results. The pager is separate. – Evanss Apr 27 '15 at 20:54
  • The pager creates a few different types of items. It usually creates numbers to click on. But, depending on where you are it can also create the first, prev, next, and last links. All of those are put into the same list. Do you want to add a class to the first item, no matter what type it is, or are you trying to get at the first number? – RoloDMonkey Apr 29 '15 at 19:10
2
+50

If you implement theme_pager you'll be expected to create the entire pager render array from scratch using several theme function - theme_pager_first, theme_pager_previous, theme_pager_next and theme_pager_last. That seems like entirely too much work for adding one class.

Since theme_pager calls theme_item_list at the very end to build the final render array, you can use hook_preprocess_HOOK to modify the pager render array before drupal renders it into HTML.

function THEME_preprocess_item_list(&$vars) {
  // make sure we're dealing with a pager item list
  if (isset($vars['attributes']['class']) && in_array('pager', $vars['attributes']['class'])) {
    // make sure there are items
    if (count($vars['items'])) {
      $vars['items'][0]['class'][] = 'test';
    }
  }
}

Clear the cache after adding this hook.

UPDATE: find the first li.pager-item:

function THEME_preprocess_item_list(&$vars) {
  // make sure we're dealing with a pager item list
  if (isset($vars['attributes']['class']) && in_array('pager', $vars['attributes']['class'])) {
    // loop the items and find the first .pager-item
    foreach ($vars['items'] as $index => $item) {
      if (in_array('pager-item', $item['class'])) {
        $vars['items'][$index]['class'][] = 'test';
        break;
      }
    }
  }
}

UPDATE2: find first and last li.pager-item:

function THEME_preprocess_item_list(&$vars) {
  // make sure we're dealing with a pager item list
  if (isset($vars['attributes']['class']) && in_array('pager', $vars['attributes']['class'])) {

    // loop the items and find the first and last .pager-item
    $first = FALSE;
    $last = NULL;
    foreach ($vars['items'] as $index => $item) {
      if (in_array('pager-item', $item['class'])) {

        // first
        if (!$first) {
          $vars['items'][$index]['class'][] = 'test';
          $first = TRUE;
        }

        // last
        $last = $index;
      }
    }

    if (!empty($last)) {
      $vars['items'][$last]['class'][] = 'test2';
    }
  }
}
  • If im not on the first page of the pagination then this class is added to li.pager-first, not the first li.pager-item. – Evanss Apr 29 '15 at 20:46
  • Updated the answer to include the code to find the first li.pager-item – Scott Joudry Apr 30 '15 at 2:00
  • Sorry, I updated the question. I also need a class on the last li.pager-item. Thanks – Evanss Apr 30 '15 at 8:38
  • Answer updated based on new requirements. – Scott Joudry Apr 30 '15 at 15:56
0

Scott Joudry's answer is correct. However when your on the first page of a view. The li has a class of pager-current not pager-item as it isnt a link. Therefore if you want to add a class to the the li that contains the text "1" then use this:

function THEMENAME_preprocess_item_list(&$vars) {
  // make sure we're dealing with a pager item list
  if (isset($vars['attributes']['class']) && in_array('pager', $vars['attributes']['class'])) {

    // loop the items and find the first and last .pager-item
    $first = FALSE;
    $last = NULL;
    foreach ($vars['items'] as $index => $item) {
      if ((in_array('pager-item', $item['class'])) or ( in_array('pager-current', $item['class']))) {

        // first
        if (!$first) {
          $vars['items'][$index]['class'][] = 'test';
          $first = TRUE;
        }

        // last
        $last = $index;
      }
    }

    if (!empty($last)) {
      $vars['items'][$last]['class'][] = 'test2';
    }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.