[Resolved] Wanderlust Site – Custom Post navigation

[FunkyCss]

Hi , i have created before a couple of days my new site with GP , and i would like to create at the bottom of the pages a navigation as Wanderlast Custom Post navigation .

But my site is with pages and not with posts , can i use the php code directly to my site , or should i change it ?

There is a a way i can make this with a more simple way ? i love the creativity in Wanderlust and how simple and easy to navigate posts , i have never worked with blogs only with pages and i would really love a small tip how to set up this .

Thanks in advance for your wonderfull work.

[Tom]

Hi there,

So you want to set up next/previous page links in your regular pages? Not sure if WP can do that, but I’ll take a look.

Can you link me to the example you’re wanting to emulate?

[FunkyCss]

Hey Tom , Sorry i accidentally wrote Wanderlust , i wanted to say Volume ! in the site library , i am so sorry for the misanderstanding!

Yes i want to make next previous like in the Volume , looks fantastic and is so nice for someone to navigate on posts .

So i have a website , where i have 3 steps for the person that is navigating the site i thought this will be cool , in general will be cool to have this option . Is not something that is killing me to fix but i thought will be a nice idea ! 🙂

[FunkyCss]

Tom , is the navigation next previous that you have used in most of the GP site library , just now DISPATCH and has the same navigation ! is awesome

[David]

Hi there,

so glad you like the GP Sites. As Pages don’t have dates or taxonomies the next and previous will be based purely on the Page ID. So you will need to make sure you create the pages in the order you want them displayed. So i adapted the Volume Nav to do this.

Steps:

1. Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

1.1 In the Hook Content add this Code:

<?php
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
   $pages[] += $page->ID;
}

$current = array_search(get_the_ID(), $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
$featured_img_prev_url = get_the_post_thumbnail_url($prevID, 'small'); 
$featured_img_next_url = get_the_post_thumbnail_url($nextID, 'small'); 
?>

<div class="page-navigation">
<?php if (!empty($prevID)) { ?>

<a class="nav-button" style="background: linear-gradient(0deg,rgba(52,62,71,0.6),rgba(52,62,71,0.3)),url('<?php echo $featured_img_prev_url ?>');" href="<?php echo get_permalink($prevID); ?>"
  title="<?php echo get_the_title($prevID); ?>"><?php echo get_the_title($prevID); ?>
	<span class="nav-tag prev">PREVIOUS</span>
	</a>

<?php }
if (!empty($nextID)) { ?>

<a class="nav-button" style="background: linear-gradient(0deg,rgba(52,62,71,0.6),rgba(52,62,71,0.3)),url('<?php echo $featured_img_next_url ?>');" href="<?php echo get_permalink($nextID); ?>" 
 title="<?php echo get_the_title($nextID); ?>"><?php echo get_the_title($nextID); ?>
	<span class="nav-tag next">NEXT</span>
	</a>
<?php } ?>
</div><!-- .navigation -->

1.2 Select the after_content hook
1.3 Check the Execute PHP Check Box
1.4 On the display rules set it to the Pages > All Pages.

2. Add this CSS:

@media (min-width: 768px) {
    .page-navigation {
        display: flex;
        box-sizing: border-box;
    }
}

.page-navigation .nav-button {
    display: block;
    position: relative;
    box-sizing: border-box;
    flex: 1 0 50%;
    padding: 9% 3%;
    background-size: cover !important;
    background-position: center center !important;
    font-size: 20px;
    color: #ffff;
}

.page-navigation .nav-button .nav-tag {
    position: absolute;
    top: 0;
    font-size: 12px;
    background-color: red; /* Change color of the next previous label */
    padding: 1% 2%;
}

.page-navigation .nav-button .nav-tag.prev {
    left: 0;
}

.page-navigation .nav-button .nav-tag.next {
    right: 0;
}

[FunkyCss]

Hi David !

This is working like a charm ! no issues at all and yep all is good !

My only issue is that the order is not right , but because the site is on Development , i am going to start it again so the pages will take the right ID and the navigation is going to work right!

I Apreciate your help so much ! thank you !!!!!!!!

i will change the topic in the right name so the next will want to make this will find it on the forum !

[David]

Awesome – glad to be of help

[Author]

Posts