Headless WordPress + Sapper Pages and Navigation (Part 3)
Tags: svelte, javascript, sapper, wordpress
Published: 2020-08-15 18:19:12

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/581q639n16qpkse0eqhj.png)

#### 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.

```js
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`.


```html
<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.

```html
<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
```html
<script>
	export let segment;
	export let pageData;
</script>
```

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


```html
{#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.