Add pagination
A key feature of any traditional, i.e. PHP-based, WordPress theme is the ability to paginate through the post listing. In this lesson we will look at implementing this feature in Frontity.
Click on the
More posts link in the menu to navigate to /page/2 and examine frontity.state in the console. You will notice that the data for the page has both previous and next properties.
Frontity in the console
If you do the same for the home path, i.e. '/', you will notice that it doesn't have a
previous property.We can use these properties to add pagination to our
<List> component. We will add a <PrevNextNav> component to style two buttons that enable us to page through the lists of posts.Change
list.js as follows. We're adding a <PrevNextNav> component which we use within the <List> component, and including buttons for the navigation.Note that we need to pass
actions into the <List> component.// File: /packages/my-first-theme/src/components/list.js
import React from "react"
import { connect, styled } from "frontity"
import Link from "@frontity/components/link"
const List = ({ state, actions }) => {
const data = state.source.get(state.router.link)
return (
<Items>
{data.items.map((item) => {
const post = state.source[item.type][item.id]
return (
<Link key={item.id} link={post.link}>
{post.title.rendered}
</Link>
)
})}
<PrevNextNav>
{data.previous && (
<button
onClick={() => {
actions.router.set(data.previous)
}}
>
« Prev
</button>
)}
{data.next && (
<button
onClick={() => {
actions.router.set(data.next)
}}
>
Next »
</button>
)}
</PrevNextNav>
</Items>
)
}
export default connect(List)
const Items = styled.div`
& > a {
display: block;
margin: 6px 0;
font-size: 1.2em;
color: steelblue;
text-decoration: none;
}
`
const PrevNextNav = styled.div`
padding-top: 1.5em;
& > button {
background: #eee;
text-decoration: none;
padding: 0.5em 1em;
color: #888;
border: 1px solid #aaa;
font-size: 0.8em;
margin-right: 2em;
}
& > button:hover {
cursor: pointer;
}
`
We've included conditional checks so that the 'Previous' button doesn't show on the first page and the 'Next' button doesn't show on the last page, as they're not needed in those locations. To do this we've used "short-circuit" evaluation.
Now that we have pagination we no longer need the 'More posts' option in the menu. Let's remove it.
// File: /packages/my-first-theme/src/components/index.js
// ...
const Root = ({ state, actions }) => {
// ...
<Header isPostType={data.isPostType} isPage={data.isPage}>
<HeaderContent>
// ...
<Menu>
<Link link="/">Home</Link>
<Link link="/about-us">About Us</Link>
</Menu>
</HeaderContent>
</Header>
<Main>
// ...
</Main>
// ...
};
Last modified 2yr ago