Headless WordPress + Sapper Pages and Navigation (Part 3)

Fetching pages are not so different from getting the posts from WordPress.

This article will cover two methods of getting the pages much like the posts we can make use of the [slug] to obtain the page data using the API https://YOUR-DOMAIN/wp-json/wp/v2/pages to obtain the page.

The API endpoint also has slug as a parameter to get a particular page.

Accessing Pages in Sapper

Hard-coded links are usually bad code but if your site has a very few pages then in my opinion it is fine with a bit of automation of populating the page data.

└───routes
│   │   index.svelte
│   │   about.svelte
│   │   _layout.svelte
|   |   _error.svlete
|   |   [slug].svelte <----
│   └───blog
│       │   [slug].svelte
│       │   index.svelte
│       │   ...

We can add a new [slug].svelte on the routes directory and add a similar code from the previous post.

export async function preload({params, query}) {
        const res = await this.fetch(`https://YOUR-DOMAIN/wp-json/wp/v2/pages?slug=${params.slug}`)
        const data = await res.json()
        return {
            page: data[0]
        }
    }

WordPress default installation comes with a Sample Page and has the slug sample-page. Heading to http://localhost:3000/sample-page should get you the page from WordPress and if this doesn't work, make sure in your WordPress dashboard permalink is set to %postname%.

Adding Pages to the Menu

To get rid of any hard-coded links we can add the pages on WordPress to the menu on the Sapper application is easy, We need to modify the _layout.svelte which is responsible for general layout and invoking the data in the navigation bar on top it's file is in src/componente/Nav.svelte.

<script context="module">
    export async function preload() {
        const res = await this.fetch(`https://YOUR-DOMAIN/wp-json/wp/v2/pages`)
        const data = await res.json()
        return {
            data
        }
    }
</script>

Since this is exported we can also run the code on the same svelte file and also use on another component instance and we can enable Nav.svelte and _layout.svelte talk with each other with what data needs to go into the menu. We can do so like this.

<script>
    export let data;
    import Nav from '../components/Nav.svelte';
    export let segment;
    export let pageData = [];
    data.map(e=>{
        let obj = 
        {
            id:e.id,
            slug:e.slug
        }

        pageData.push(obj)
    })
</script>

On the Nav.svelte

<script>
    export let segment;
    export let pageData;
</script>

To the list of existing menus add this snippet that compares and adds the active class

{#each pageData as page }
    <li><a rel=prefetch aria-current="{segment === page.slug ? 'page' : undefined}" href="{page.slug}">{page.slug}</a>
    </li>
{/each}

Now not only we have almost all frequently used features on WordPress but also an amazing frontend.

The next part in the series will be getting pages from WordPress menu and totally isolating WordPress frontend and only use it for it's backend.