Next/WP with Imran Sayed


Uncategorized

Updated Aug 27th, 2021

New Project on YouTube August 2021 here

Start Back-end

Create WP Instance as Back-End and install woo commerce plugin.

Install Headless CMS plugin from imrahsayed GitHub by cloning or downloading zip file. This plugin is essentially a traditional WP theme? Gives extra features like Rest API endpoint not available out of the box.

Start Front-end

Install Next JS

Get rid of all but footer and ingle headline

set up taliwind css via talwindcss.com/docs/guides/nextjs

There is a next/tailwind example but skip since we need to bring in SASS anyway

npm install sass

then install tailwind and postCSS

config file in next project

postcss.config.css

Also a next.config.js file

tailwind.config.js file

good cheatshet for tailwind at nardcave.com/tailwind-cheat-sheet

create a “src/styles/index.scss” file

#3 Header Footer Rest API Endpoint

Create menu in the front-end

Can go to the appearance-customizer for site identity for things like logo, title, tagline, social links, copyright text, etc, (More of what is included in the plugin?).

Access to the header/footer via endpoint

wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer

Note that you can switch this out for primary

Widgets in Headless CMS plugin theme sidebar1 and sidebar2

Adjust site address URL in WP_Admin-Settings to have site homepage different from WP installation directory

recommends using backend as a subdomain which is what I was thinking made the most sense as well

Shows snyk.io as security scan for your site, provides checklist you can work through.


Top