Componentized single-page Wordpress bootstrapped theme built with React and Flux, routing with react-router, and bundling with Webpack.
- No requirement to install any Wordpress plugins, works out-of-the-box
- No requirement for special
.htaccesssettings - Ability to create regular Wordpress custom templates, and include shortcodes, JS, and PHP
- Ability to create custom JSX React component templates (See Custom JSX templates examples)
- Ability to use multiple menus (eg. header menu, footer menu)
- Menus built on the client-side from flat trees
- Separate
devandproductionbuilds (accessed with the?devURL query param) (See Examples below) - Maintains non-WP URL query params thoughout the app (See Query param examples below)
- Requested pages are cached for the session and not requested again
- Ability to differ cached pages from non-cached
- Ability to access pages not in the menu and maintain routing
- Ability to access pages via any standard permalink type (See Notes below)
- Dynamic
<head>tag,wp_head()andwp_footer()hooks - Ability install and use WP plugins regularly (See Plugin test examples below)
- PageSpeed results near 100% out-of-the-box (while plugins deactivated): https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fzenitht.com%2Fwp%2Fblog%2F&tab=desktop
This is an experimental theme. Not recommended for use on a live site.
-
Download or clone this repository into your Wordpress 'themes' folder
-
Activate the theme in wp-admin
-
cdinto this theme folder -
Run
npm install -
Build with webpack:
a.
npm run devto build the dev versionb.
npm run prodto build the production version -
Set your WP Permalinks settings to Post name
That's all!
For internal routing purposes it's recommended above to set Permalinks to Post name. A user would still be able to access any page if they arrive to a page under other permalink types.
Example of production build (default):
Example of dev build accessed with dev param:
Example of page not in the menu:
https://zenitht.com/wp/page-not-in-menu/
Example of accessing page via Plain permalink type:
Example of page with JS alert in content in Text editing mode:
https://zenitht.com/wp/level-1/
Example of custom template page, with multiple JS tags, and PHP:
https://zenitht.com/wp/page-using-custom-template/
Example of page with status set as 'Draft'
https://zenitht.com/wp/?page_id=1859
Example of custom JSX React component template, consisting of page-history.jsx and page-history.php pair:
https://zenitht.com/wp/history/
See more details at https://zenitht.com/wp/jsx-custom-templates/.
Example of production build accessed with page_id&someParam params, maintaining someParam param:
https://zenitht.com/wp/?page_id=35&someParam=123123
Example of dev build accessed with dev&p params, maintaining dev param:
https://zenitht.com/wp/?p=35&dev
Example of dev build accessed with dev&page_id params, maintaining dev param:
https://zenitht.com/wp/?page_id=35&dev
Example of dev build accessed with page_id&dev&p&someParam params, maintaining dev&someParam params:
https://zenitht.com/wp/?page_id=35&dev&someParam=123123
Example of wordpress-zSlider within custom template:
https://zenitht.com/wp/wordpress-zslider-test/
Plugin test using BWS Captcha WP plugin:
https://zenitht.com/wp/bws-captcha-shortcode-plugin-test/
Plugin test using ConvertPlug WP plugin:
https://zenitht.com/wp/wp-plugin-test-convertplug/
Plugin test using Ninja Forms WP plugin:
https://zenitht.com/wp/plugin-test-ninja-forms/
This package is licensed under MIT license. See LICENSE for details.