How do I insert CSS into a function?

1 Views

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?

Read More
// 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/

Post Views: 1

Related posts

Leave a Reply

3 comments

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

    $("a:contains('Newer')").addClass('YourNewerClassHere');
$("a:contains('Older')").addClass('YourOlderClassHere');

  2. 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>';
}

  3. 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).