I have a custom function which allows users to choose between next/previous links and pagination and I'm attempting to add CSS classes to the next/previous links. I've tried this multiple ways and keep crashing my theme.

How do I insert CSS classes into the previous and next link?

// Pagination
function my_theme_navigation() 
    global $shortname;

    if( get_option( $shortname . '_next_prev_or_paginate' ) == 'Next' ) : 
        // the block for next-prev navigation 
        previous_posts_link ('Newer');
    else : 
        // the block for pagination
        global $wp_query; 
        $big = 999999999; // need an unlikely integer       
        echo paginate_links( 
                'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ), 
                'format' => '?paged=%#%', 
                'current' => max( 1, get_query_var('paged') ), 
                'total' => $wp_query->max_num_pages 

For an example, check the bottom of this page: http://themeforward.com/demo2/

  • I'dont understand your question, you need the CSS classes in the HTML generated by paginate_links?
    – m4t1t0
    Nov 11, 2012 at 9:37
  • I need to add CSS classes to the next and previous links which only display when the link does. Nov 12, 2012 at 1:36

3 Answers 3


You could do this with jQuery. Like so ...


I would use a pragmatic approach and add the custom class to a container element:

function my_theme_navigation() 
    if ( empty( $GLOBALS['paged'] ) or 2 > $GLOBALS['paged'] )

    // Yes, we have at least one link.
    echo '<div class="custom">'; 

    // do the work … 

    echo '</div>';
  • Would there be an away to approach this where the div class is dropped if there is no link? For example, if there is no "next" link because there is not any additional posts. Nov 11, 2012 at 23:00
  • @siouxfan45 See my update, I have added an additional test.
    – fuxia
    Nov 11, 2012 at 23:07
  • Maybe I inserted it in the wrong place, but when I tried this all links disappeared. snippi.com/s/89x5zim Nov 12, 2012 at 0:14

The paginate_links function doesn't accept parameters for CSS styling itself, and I'm not sure that it's a very bright idea to push some CSS from within your custom function.

If you have different elements displayed based on options, why don't you add the CSS for both of them in your main CSS file? Then the element would be styled by default if printed, and won't be visible at all if not (due to your condition)?

If you want to keep the CSS file short for some reason or have a large number of selectors for the styling, you could call inside of your conditional the wp_enqueue_style function to load an extra stylesheet with the changes. There is an argument for dependency so that this could be loaded after your theme's CSS.

For some black magic tricks you could hook custom CSS to wp_head and print the CSS there, but it's definitely NOT a best practice but rather something to be used for very dynamic user options (where you could fetch data from database options or export files to be used as CSS scripts).

  • While I understand what you're saying, I was seeking an answer with a more direct response code-wise. Nov 11, 2012 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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