Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : How to implement this code into wordpress

[mixers31]

I would like to add next / previous buttons on my post pages similar to DamnLol. I found this code code online but its for Blogger. Can someone help me with converting this to Wordpress? Here's the code:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.blog-pager-newer-link,.blog-pager-older-link
{
position:absolute;
top:1px;
z-index:999;
color:transparent !important;
width:55px;
height:66px;
background-color:red;
}

.blog-pager-newer-link {
position:absolute;
right:-27px; /* Change this value to change the position of newer post link */
top:50px; /* Change the position from top */
background:url('http://www.damnlol.com/img/buttons.png');
background-position:55px 0px;
background-color:transparent !important;
}
.blog-pager-newer-link:active {
background:url('http://www.damnlol.com/img/buttons.png');
background-position:55px 67px;
}

.blog-pager-older-link {
position:absolute;
left:-67px; /* Change this value to change the position of older post link */
top:50px; /* Change the position from top */
background:url('http://www.damnlol.com/img/buttons.png');
background-color:transparent !important;

}
.blog-pager-older-link:active {
background:url('http://www.damnlol.com/img/buttons.png');
background-position:0px 67px;
}
</style>
</b:if>

Thanks guys

[james-r]

Hello mixers31!

You would be better off changing that code to use the CSS classes in WordPress. Because WordPress finds each page using a database, you would need to use a plugin like the following:

codex.wordpress.org/Next_and_Previous_Links

You would then need to get the classes used by WordPress for their Next and Previous links and style them to have those images for the links. Looking at the CSS code you provided, you would have to change the classes .blog-pager-newer-link , .blog-pager-older-link, and the others for to use the WordPress classes.

Unfortunately, that will require you to know CSS code and how it works. You would be better off looking in the WordPress plugins to see if there is a version you like already set up.


<<signature to be set up in your profile>>

[solarblunet]

Here is some wordpress code to help you out buddy :-P you'll thank me.

Add to functions.php:
function pagination($pages = '', $range = 4)
{
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}

if(1 != $pages)
{
echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}

if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
echo "</div>\n";
}
}

Add to your css file:
.pagination {
clear:both;
position:relative;
font-size:11px;
line-height:13px;
}

.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}

.pagination a:hover{
color:#fff;
background: #3279BB;
}

.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}


Now call where you want it in your template, and modify accordingly.
<?php if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
} ?>