How do I insert CSS into a function?

Question

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/

I'dont understand your question, you need the CSS classes in the HTML generated by paginate_links? — m4t1t0
– m4t1t0, Commented 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. — AndrettiMilas
– AndrettiMilas, Commented Nov 12, 2012 at 1:36

Matthew Woodard · Accepted Answer · 2012-11-11 17:37:50Z

2

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

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

answered Nov 11, 2012 at 17:37

Matthew Woodard

2263 silver badges14 bronze badges

Add a comment |

fuxia · Accepted Answer · 2012-11-11 23:06:44Z

3

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

edited Nov 11, 2012 at 23:06

answered Nov 11, 2012 at 12:35

fuxia♦

107k39 gold badges256 silver badges463 bronze badges

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
– AndrettiMilas

2012-11-11 23:00:04 +00:00
Commented Nov 11, 2012 at 23:00
@siouxfan45 See my update, I have added an additional test.

fuxia
– fuxia ♦

2012-11-11 23:07:05 +00:00
Commented 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

AndrettiMilas
– AndrettiMilas

2012-11-12 00:14:02 +00:00
Commented Nov 12, 2012 at 0:14

Add a comment |

Mario Peshev · Accepted Answer · 2012-11-11 12:29:48Z

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. — AndrettiMilas
– AndrettiMilas, Commented Nov 11, 2012 at 22:52

Stack Exchange Network

How do I insert CSS into a function?

3 Answers 3

Your Answer

Hot Network Questions

How do I insert CSS into a function?

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions