Question 118691 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Navigation Next and previous page inside a button, how to do it in wordpress?

already searched, I tried everything but it didn’t work.
How do I include the function next page, or previous page in a button with image in wordpress?

like the picture below? no text, or title, just the image.
enter image description here

I tried several ways, merging

<?php previous_post_link(); ?> 
<?php next_post_link(); ?>

with

<a class="icon-container" href="#">

Thanks

Tags:

2

Answers


  1. 0

    previous_post_link() and next_post_link() both immediately display a link. What you want is the URL to the previous and next page, so you can wrap it around your image with a custom anchor tag.

    WordPress follows this pattern of prepending get_ in front of (most, but not all) functions to retrieve the value instead of directly displaying it.

    In your case, simply call get_previous_post_link() and get_next_post_link(), which returns the URL.

    For example:

    echo sprintf('<a class="icon-container" href="%s">', get_next_post_link());
    Login or Signup to reply.
  2. 0

    You can replace the default text for previous and next post links with your arrow images by passing custom format strings to the previous_post_link() and next_post_link() functions. Here’s how you can do it:

    First, upload your arrow images to your WordPress theme’s directory or any other location where you can access them through a URL. Make sure you have the URLs of the images ready.

    Now, replace the default previous_post_link() and next_post_link() functions with the following code:

    <?php
// Replace the image URLs with your actual arrow image URLs
$previous_arrow_image_url = 'path/to/your/previous-arrow-image.png';
$next_arrow_image_url = 'path/to/your/next-arrow-image.png';

// Custom format strings for previous and next post links with arrow images
$previous_link_format = '<img src="' . $previous_arrow_image_url . '" alt="Previous Post" />';
$next_link_format = '<img src="' . $next_arrow_image_url . '" alt="Next Post" />';

// Display the previous and next post links with the custom arrow images
previous_post_link('%link', $previous_link_format);
next_post_link('%link', $next_link_format);
?>

    Make sure to replace ‘path/to/your/previous-arrow-image.png‘ and ‘path/to/your/next-arrow-image.png‘ with the actual URLs of your arrow images.

    With this code, the previous and next post links will display the arrow images instead of the default text. The images will also have alt text to improve accessibility.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search