I want to add next and previous buttons to my blog page template so if someone goes to my template page they can move forward or backward the same way they can on my non-templated blog page which has the pagination feature built in.
I read the following Forum Entries featuring @hammerhouse’s guide tutorials:
and
I followed the instructions as best I could, but it turned out pretty disastrously. When I published the site my entire blog content disappeared, except for the name of the current post. At first, there were no buttons in sight either, but I commented out the code to correct that. So now the buttons show, but the linking doesn’t function. I redid this numerous times but the result remains the same.
In the designer view, there is a long list of post titles. I don’t want that on my page. I just want two buttons that go to my next and previous posts.
So I have questions for anyone who is kind enough to respond:
Should I have created a new collection list “Dynamic Lists” or do I use my current Blog Post collection (which is what I tried)? If I need to create a new collection exactly what collection fields do I include.
When I added a text link to my “Dynamic Item”, set the link to Current Post
and set the text to the post’s Name field. There was a long list of my blog title names. Is this what should happen? Not what I wanted.
Then I was to add IDs to buttons. What buttons. Are these just randomly placed at the bottom of the page? This is what I did and gave each button it’s proper ID.
The rest I was able to follow. There was a link to an example but that no longer works.
Please help someone. I really don’t want to have to manually place links on each collection page. I like the fact that this allegedly does everything automatically.
One thing you can do is using a reference field. Go to the blog collection settings > add two reference fields for next and previous > connect both to the blog collection > add two buttons for the blog post > link previous button to previous blog post > link next button to next blog post.
So what I could see, is that you missed step B from the Hammerhouse Post. There was no Text Link in you Collection List. For better understanding: Your site will have a collection list referring to your CMS where your blogs are stored, so not a new CMS. The hammerhourse Collection List is to get the IDs for the previous and next blog posts, so it is something which is running in the background. Thats why it is set to display: none in the script.
So regarding your questions:
I am not sure what you mean, I can not see a collections list for your Blog post. Only the one with the ID post_list and this one is for the hammer house script. Have a look at my share link and go to my motion design or videography template page.
Yes this will happen, but you will not see it on your published site. You see it in the Designer, because the script with display: none will only be running on the published site. If it bothers you to see it in the designer, you can add a class to your collations list wrapper and set it to display:none. I did that, in the navigator have a look at “PP CL Wrapper Pseudo”. This is my hammerhouse Collection List by the way.
You did this right. These IDs will be given to the visible buttons you actually want to use to get to the previous and next blog. So leave that as it is.
I have something to add here, which is not mentioned in the hammerhouse script: Webflow sorts the order of the Collection List automatically. Maybe it is right for your case, for mine it was not. In order to modify that, you have to set the sort order. You do it like this:
You click on the hammerhouse collection list and in the settings (where you see the ID “post_list”) you set the Sort Order as you wish.
In my case it is a project Number field I added to my CMS. When you want to refer the prev-next-buttons regarding the date of your blog post, than you would have to set it to “Wp post date” and I guess “largest to smallest”, but maybe “smallest to largest”, I am not quite sure, just test it by clicking on your previous and next buttons and see if it is the right blog post you want to refer.
Ok that was a lot of text, I hope that helps.
And while I am at it right now, @hammerhouse thank you very much for the script!
Thank you, thank you, thank you. It worked. I truly appreciate your taking the time to help me out.
I had actually followed the instructions and clicked on the “Dynamic Item” and then clicked on the “text link”. I didn’t see the text link installed and just assumed that was the way it was supposed to be.
It turns out that first you need to connect the collection list to a collection before adding elements. So once I got that straightened out it worked perfectly.
The other thing I goofed up on, was testing this out on the template page once I published it. There I received a 404 error. But when I loaded my site and navigated to a page it worked perfectly.
I’m a very happy camper, of course until my next big snafu.
Thanks Peter. You can see in the following comment I got it to work. I was considering the method you suggested if I couldn’t get the code to work. The advantage of the code is that it all works automatically, and fortunately it works now.
I appreciate your taking the time to reach out and offer your assistance.
Glad I could help! I needed this forum and the people in the past for help, too and I was always happy when somebody took the time to help me out. I wanted to give something back
When you test your site, also try to empty your browser cache now and then. Sometimes when I tested my site, I saw no changes but actually I had already solved the problem but I could not notice it because the browser used the cache
Hi Peter, thanks for sharing this. I have done the steps but the buttons don’t click through to either older or newer posts. I have attached a screenshot showing how I have it setup.
