WPNext was created with the goal of combining the development style of ReactJS/NextJS with the community support of WordPress, to rapidly create WordPress themes completely built with React. Along with this, the admin UI/UX concept was pulled from JayDMS that allows the user to easily construct pages with React components. This boilerplate includes a hero and blog component as a start.
This boilerplate uses Gulp JS to build and run development. Run all commands within the theme folder.
Install
$ npm install
To build and make modifications to WPNext builder within the WordPress admin UI, use the commands below. All related files will be under /admin/development
.
Build CSS & JS for WPNext Builder
$ gulp --type builder
Build CSS & JS for WPNext Builder while in development
$ gulp dev --type builder
Build CSS & JS for WPNext Builder for production
$ gulp --type builder --prod
To build and make modifications to the Front-End CSS & images, use the commands below. All related files will be under /assets/img
or /assets/scss
.
Build CSS & Images for Front-End
$ gulp --type next
Build CSS & Images for Front-End while in development
$ gulp dev --type next
Build CSS & Images for Front-End for production
$ gulp --type next --prod
All components that will appear within the WPNext Builder live under /components
directory. However, the files need to follow a certain structure and need to be linked to be included into the build. Use the command below which will create and link files as necessary.
Create new component
$ gulp new-component --name [componentName]
Use NextJS commands as needed.
$ npm run dev
$ npm run build
$ npm start
Do NOT forget
Make sure you modify name of the directory used for the theme folder /admin/development/jsx/vendors/jodit-react.jsx
You will need two URLs to make this theme work. The first URL would be for accessing the WordPress admin and it's contents. The second URL for the Front-End which is run by NextJS. Use the vhost-example.txt
example below for the second URL. Also, you'll need to change the home URL within the WordPress admin settings. Ex: wp.yourdomain.local & yourdomain.local
.
<VirtualHost *:80>
ServerName yourdomain.local
DocumentRoot "c:/path/to/themes/wp-next"
<Location />
ProxyPass http://localhost:3000/
</Location>
<Directory "c:/path/to/wp-content/themes/wp-next">
...
</Directory>
</VirtualHost>
If you would like to support WPNext and it's development, please star this project to bring awareness. Also, please support RM Digital Services with your donations for engineering and development services.