Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Wordpress Pagination WordPress

  • SOLVED

I have wordpress pagination working using:


<?php
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
) );
?>

the problem is the code is outputting single quotes instead of double quotes and so I can't style with css.

Example output:
<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://www.jules-photographer.com/articles/page/2/'>2</a>
<a class='page-numbers' href='http://www.jules-photographer.com/articles/page/3/'>3</a>
<a class='page-numbers' href='http://www.jules-photographer.com/articles/page/4/'>4</a>
<a class="next page-numbers" href="http://www.jules-photographer.com/articles/page/2/">Next &raquo;</a>

Any thoughts?

2012-01-26 by julesphoto

Answers (6)

2012-01-26

Luis Abarca answers:

You can styles, with single or double quotes.


.page-numbers {
/* your styles */
}

You can also wrap the pagination in a DIV

<div id="pagination">
<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://www.jules-photographer.com/articles/page/2/'>2</a>
<a class='page-numbers' href='http://www.jules-photographer.com/articles/page/3/'>3</a>
<a class='page-numbers' href='http://www.jules-photographer.com/articles/page/4/'>4</a>
<a class="next page-numbers" href="http://www.jules-photographer.com/articles/page/2/">Next &raquo;</a>

</div>

And add styles like this


#pagination span {}
#pagination a {}

Luis Abarca comments:

Yep, you can add styles, maybe yor styles are overwrited by other rules in your stylesheet, so you can use !important to check


.page-numbers {
color: #00f !important;
}

.page-numbers:hover {
color: #f00 !important;
}

2012-01-26

rizaljohn answers:

I don't think you can't add style on single quote. Do you have the link?

2012-01-26

Hai Bui answers:

Hi,

It doesn't matter if it outputs single quotes or double quotes, you can add css styles either way.

2012-01-26

Ross Wilson answers:

Why can you not style this type of output. I was able to style your html here:
[[LINK href="http://jsfiddle.net/2Pf9c/"]]http://jsfiddle.net/2Pf9c/[[/LINK]]

2012-01-26

John Cotton answers:

Hi Julian

I never noticed that before, but you're absolutely right, that function mixes single and double quotes.

But why does it stop you using css? A class attribute is a class attribute which you use....

You could always wrap a str_replace or preg_replace around the function if you really wanted the consistency.

julesphoto comments:

Wow another thing learned... I had no idea that you could style with either single or double quotes.. just rushed to the assumption that it was wrong. Still I would prefer if it was double quote to keep everything consistent. I have no idea how to wrap in the str_replace to format as I want.

2012-01-26

idt answers:

You can style regardless of single or double quotes.

a.page-numbers{
/* page number styles */
}
a.current {
/* style for current page link */
}
a.next {
/* Style for next page link */
}