Skip to content

Latest commit

 

History

History
138 lines (76 loc) · 5.24 KB

README.md

File metadata and controls

138 lines (76 loc) · 5.24 KB
Raw

wordpress-react

Componentized single-page Wordpress bootstrapped theme built with React and Flux, routing with react-router, and bundling with Webpack.

Features

  • No requirement to install any Wordpress plugins, works out-of-the-box
  • No requirement for special .htaccess settings
  • 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 dev and production builds (accessed with the ?dev URL 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() and wp_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.

Installation

  1. Download or clone this repository into your Wordpress 'themes' folder

  2. Activate the theme in wp-admin

  3. cd into this theme folder

  4. Run npm install

  5. Build with webpack:

    a. npm run dev to build the dev version

    b. npm run prod to build the production version

  6. Set your WP Permalinks settings to Post name

That's all!

Notes

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.

Examples

Example of production build (default):

https://zenitht.com/wp/

Example of dev build accessed with dev param:

https://zenitht.com/wp/?dev

Example of page not in the menu:

https://zenitht.com/wp/page-not-in-menu/

Example of accessing page via Plain permalink type:

https://zenitht.com/wp/?p=35

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

Custom React components in JSX templates examples

screenshot_0

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/.

Query param examples

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

Plugin test examples

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/

License

This package is licensed under MIT license. See LICENSE for details.