Forums

WordPress › Support » Themes and Templates

How do I use images for Previous and Next links? (2 posts)

  1. kaethy
    Member
    Posted 4 years ago #

    I want to use button images for the Previous and Next links at the bottom of my blog page.
    This is the code.
    <?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
    How would I rewrite it to show my buttons instead of the text?

  2. pepen2710
    Member
    Posted 4 years ago #

    add a class or id for both navigation, (example):

    <div class="navigation">
<div id="nav1"><?php next_posts_link('&laquo; previous') ?></div>
<div id="nav2"><?php previous_posts_link('next &raquo;') ?></div>
</div>

    in your style.css add some code below (example):

    .navigation{width:500px;float:left;color:#ffba00;}
#nav1{background:url(images/your-image1.gif)no-repeat top left;height:35px; width:120px;text-indent:-1000px;}
#nav2{background:url(images/your-image2.gif)no-repeat top left;height:35px; width:120px;text-indent:-1000px;}

    note:text-indent here use to remove text but still readable if user disable css from their browser menu.
    hope this will help you...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags