Results 1 to 3 of 3
  1. #1

    How to implement this code into wordpress

    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

  2. #2
    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>>
    Last edited by foobic; 02-12-2013 at 09:34 PM.

  3. #3
    Join Date
    Jan 2005
    Location
    Chicago
    Posts
    199
    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);
    } ?>

Similar Threads

  1. Is your wordpress blog hacked with base64 code, iframe code, etc? Let us clean it!
    By ipexperts in forum Other Web Hosting Related Offers
    Replies: 0
    Last Post: 02-10-2012, 09:49 PM
  2. Code Snippet in Wordpress
    By crazylane in forum Web Design and Content
    Replies: 1
    Last Post: 07-31-2009, 01:12 PM
  3. need to implement code in javascript
    By 3-rx in forum Programming Discussion
    Replies: 6
    Last Post: 12-06-2007, 08:27 PM
  4. Code to implement contextual Ads?
    By dbeck in forum Programming Discussion
    Replies: 0
    Last Post: 07-19-2005, 02:06 PM
  5. Code to implement contextual Ads?
    By dbeck in forum Hosting Security and Technology
    Replies: 0
    Last Post: 07-19-2005, 11:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •