Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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');
        next_posts_link('Older');
    else : 
        // the block for pagination
        global $wp_query; 
        $big = 999999999; // need an unlikely integer       
        echo paginate_links( 
            array( 
                'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ), 
                'format' => '?paged=%#%', 
                'current' => max( 1, get_query_var('paged') ), 
                'total' => $wp_query->max_num_pages 
            ) 
        ); 
    endif; 
}

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

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

3 Answers 3

up vote 2 down vote accepted

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

$("a:contains('Newer')").addClass('YourNewerClassHere');
$("a:contains('Older')").addClass('YourOlderClassHere');
share|improve this answer

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'] )
        return;

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

    // do the work … 

    echo '</div>';
}
share|improve this answer
    
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. –  AndrettiMilas Nov 11 '12 at 23:00
    
@siouxfan45 See my update, I have added an additional test. –  toscho Nov 11 '12 at 23:07
    
Maybe I inserted it in the wrong place, but when I tried this all links disappeared. snippi.com/s/89x5zim –  AndrettiMilas Nov 12 '12 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).

share|improve this answer
    
While I understand what you're saying, I was seeking an answer with a more direct response code-wise. –  AndrettiMilas Nov 11 '12 at 22:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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