Set up headless Wordpress CMS

[cjnbennett]

Basic Information

Set up a headless Wordpress CMS backend so that the client can easily edit the content. Useful information here.

Rough task list:

• Set up a Wordpress server with Docker (see official Docker image)
  • Dockerise Next.js frontend (see official Next.js Docker examples here)
  • Set up nginx reverse proxy
• Set up API interface for frontend (e.g. Wordpress REST API or wpgraphql)
• Integrate some frontend pages to query content from Wordpress server
  • Write documentation so others understand how to do this too
• Implement ISR (caching to improve performance)
• Before merging: check to see if any more documentation needs to be written / updated, and do so
• Deployment: (will need to be myself or another CFC committee member)
  • Write frontend deployment Dockerfile
  • Set up deployment hosting and CD for Docker

Other Information

[github-actions]

Branch issue-37-Set_up_headless_Wordpress_CMS created!

[cjnbennett]

For now I've just set up the default Wordpress REST API and not wpgraphql. We'll see if that needs to be changed when we get around to trying to integrate with the frontend.

[berry1104]

I'm a bit uncertain about what the final outcome of this issue should be. I have two questions:
1.Can the client edit the content on the web page directly, or do they need to use WordPress?
2.Do we need authentication to ensure that only the client can edit?

[cjnbennett]

The motivation for this issue is that the client needs a way to easily edit the content of the website. In a standard Next.js website, there's no easy way to do this (short of editing the code itself and redeploying). The current site is built in WordPress, so the client has some experience updating content through this interface so I think it'd be good to use WordPress as a CMS for our version as well. So, this issue revolves around essentially implementing WordPress into the site such that content is fetched from the WordPress database and can be easily updated via the WordPress admin UI.

So, in short:

1. They'll edit it through the WordPress admin portal (located at /wordpress, e.g. localhost/wordpress or starick.vercel.app/wordpress)
2. WordPress already implements an authentication portal for us

Right now WordPress has already been set up on this branch, it's now a matter of integrating it with the frontend. Frontend pages should pull content from the WordPress database using the WordPress REST API. Once you have some examples of this working, write some documentation for how to do it so others can do it as well.

I'll try show you in person tomorrow so it'll hopefully be a bit easier to understand. @sersangn has also already been working on this issue a little bit, so I'll make sure you find each other and are able to work together on the issue.

[berry1104]

Thanks for the explanation. I've got it now and am ready to proceed. Looking forward to discussing it further tomorrow!😊

[sersangn]

A potentially useful plugin that would make it more convenient to edit things in WordPress:
ACF Plugin by WP Engine