> For the complete documentation index, see [llms.txt](https://docs.vmgd.whatworks.com.au/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vmgd.whatworks.com.au/ict-team/making-changes-to-the-website/creating-a-new-page-template.md).

# Creating a New Page Template

1\. Set Up ACF Fields in WordPress

* Location: WP-Admin > Custom Fields > Add New Field Group
* Define fields as per the page design, ensuring types align with content (e.g., text, images).
* Set location rules to specify where these fields will appear.

2\. Create the Page and Assign Template

* Go to WP-Admin > Pages > Add New.
* Assign the relevant template in the "Page Attributes" section.

3\. Code the Template

* Create a New Branch
* Add a .php file in the WordPress theme folder.
* Create a folder in nextjs/src/components/pages/ matching the page name.
* Add a .tsx file for the page React component and a .graphql file for queries.

4\. Configure Layout and Data

* Use the .tsx file to set up the page layout and structure.
* Map GraphQL data to match ACF fields.

5\. Register the Template

* Add an entry in template-map.ts to link the WordPress template with the Next.js component.

6\. Write the GraphQL Query

* Use the .graphql file to define a query that fetches the ACF data for the page.