Skip to content

Latest commit

 

History

History
213 lines (160 loc) · 8.75 KB

setup.md

File metadata and controls

213 lines (160 loc) · 8.75 KB

Setup

The following will help you setup Next.js WordPress.

Table of Contents

Requirements

Next.js Setup

Install

npx create-next-app nextjs-wordpress --example https://github.com/gregrickaby/nextjs-wordpress

ENV Variables

Copy .env.sample to .env

cp .env.sample .env

That's it for Next.js. You're ready to move on to the WordPress setup.

WordPress Setup

All WordPress commands must be run from inside the /wordpress directory. Docker Desktop needs to be running as well.

Install

1) Customize ENV Variables (optional)

This step can be done at a later time. Open the /apps/wordpress/.env file in your code editor.

2) Run Install Script

From inside the /wordpress directory, run the following command:

chmod +x install.sh && ./install.sh

This script pulls down and starts each container. Composer will download the required plugins, WordPress will be configured, and finally the script add an entry to your host file.

Note: You will be prompted to enter your password so the script can edit your /etc/hosts file

3) Log into WordPress

View the WordPress dashboard at: https://nextjswp.test/wp-admin/

  • username admin
  • password password

Use the credentials above, unless you've customized the WORDPRESS_USERNAME and WORDPRESS_PASSWORD variables in the /apps/wordpress/.env file.

4) Create Application Password

In order for Next.js to POST comment and reaction data back to WordPress, it needs to authenticate using an application password.

  1. Navigate to your Profile page in the WordPress dashboard under Users --> Profile
  2. Scroll down to the Application Password section
  3. Type any name to the New Application Password Name field
  4. Click the "Add New Application Password" button: screenshot of how to add a new application password username
  5. Copy the password that was generated and paste into .env: screenshot of new application password
  6. Open the .env file in the root of this project
  7. Paste the Application Password next to the WORDPRESS_APPLICATION_PASSWORD key: screenshot of the application password in the ENV file

5) Import ACF Fields Groups

In order for post reactions to work, you'll need to import the ACF fields.

  1. Navigate to the WordPress dashboard under Custom Fields --> Tools
  2. Under "Import Field Groups" click the "Choose File" button and select the acf-export-post-fields.json file from the /wordpress directory: screenshot of how to import field groups
  3. Click the "Import JSON" button

That's it! WordPress should now be setup and ready to go.

Custom Post Types and Fields

The front-end has support for a "Books" custom post type with custom fields. This is just a simple example, so feel free to edit or remove as needed.

Import Book CPT

  1. Visit the CPT UI tools page: https://nextjswp.test/wp-admin/admin.php?page=cptui_tools

  2. Copy and paste the following JSON into the "Import Post Types" field:

    {
  "book": {
    "name": "book",
    "label": "Books",
    "singular_label": "Book",
    "description": "",
    "public": "true",
    "publicly_queryable": "true",
    "show_ui": "true",
    "show_in_nav_menus": "true",
    "delete_with_user": "false",
    "show_in_rest": "true",
    "rest_base": "",
    "rest_controller_class": "",
    "rest_namespace": "",
    "has_archive": "false",
    "has_archive_string": "",
    "exclude_from_search": "false",
    "capability_type": "page",
    "hierarchical": "false",
    "can_export": "false",
    "rewrite": "true",
    "rewrite_slug": "",
    "rewrite_withfront": "true",
    "query_var": "true",
    "query_var_slug": "",
    "menu_position": "",
    "show_in_menu": "true",
    "show_in_menu_string": "",
    "menu_icon": "dashicons-book-alt",
    "register_meta_box_cb": null,
    "supports": ["title", "editor", "thumbnail", "custom-fields"],
    "taxonomies": [],
    "labels": {
      "menu_name": "My Books",
      "all_items": "All Books",
      "add_new": "Add new",
      "add_new_item": "Add new Book",
      "edit_item": "Edit Book",
      "new_item": "New Book",
      "view_item": "View Book",
      "view_items": "View Books",
      "search_items": "Search Books",
      "not_found": "No Books found",
      "not_found_in_trash": "No Books found in trash",
      "parent": "Parent Book:",
      "featured_image": "Featured image for this Book",
      "set_featured_image": "Set featured image for this Book",
      "remove_featured_image": "Remove featured image for this Book",
      "use_featured_image": "Use as featured image for this Book",
      "archives": "Book archives",
      "insert_into_item": "Insert into Book",
      "uploaded_to_this_item": "Upload to this Book",
      "filter_items_list": "Filter Books list",
      "items_list_navigation": "Books list navigation",
      "items_list": "Books list",
      "attributes": "Books attributes",
      "name_admin_bar": "Book",
      "item_published": "Book published",
      "item_published_privately": "Book published privately.",
      "item_reverted_to_draft": "Book reverted to draft.",
      "item_scheduled": "Book scheduled",
      "item_updated": "Book updated.",
      "parent_item_colon": "Parent Book:"
    },
    "custom_supports": "",
    "enter_title_here": "",
    "show_in_graphql": "1",
    "graphql_single_name": "Book",
    "graphql_plural_name": "Books"
  }
}

  3. Click the "Import" button.

Import Book Custom Fields

  1. Visit the ACF tools page: https://nextjswp.test/wp-admin/edit.php?post_type=acf-field-group&page=acf-tools
  2. Under the Import settings, click "choose file" and select /apps/wordpress/acf-export-cpt-fields.json
  3. Click the blue "Import" button

Up Next

Learn more about Local Development