├── .babelrc ├── LICENSE ├── README.md ├── _config.yml ├── footer.php ├── functions.php ├── header.php ├── inc ├── page-footer.php ├── page-header.php └── wp_head.php ├── index.php ├── package.json ├── page-CustomPage1.php ├── page-history.jsx ├── page-history.php ├── page.php ├── screenshot.png ├── single.php ├── src ├── css │ └── main.css ├── index.jsx └── js │ ├── API.jsx │ ├── Actions │ └── ServerActions.jsx │ ├── AjaxDispatcher.jsx │ ├── AppDispatcher.jsx │ ├── Components │ ├── Footer.jsx │ ├── Menu.jsx │ └── Page.jsx │ ├── Constants.jsx │ └── Stores │ └── DataStore.jsx ├── style.css ├── webpack.dev.config.js └── webpack.prod.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | "stage-0", 5 | "es2015" 6 | ], 7 | plugins: [ 8 | [ 9 | 'wildcard', { 10 | 'exts': ["jsx"] 11 | }, 12 | 'include', { 13 | 'nostrip': true 14 | } 15 | ] 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-present ZENITHTECH, LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wordpress-react 2 | Componentized single-page [Wordpress](https://wordpress.com/) bootstrapped theme built with [React](https://facebook.github.io/react/) and [Flux](https://facebook.github.io/flux/), routing with [react-router](https://github.com/ReactTraining/react-router/tree/master/packages/react-router), and bundling with [Webpack](https://github.com/webpack/webpack). 3 | 4 | ## Features 5 | - No requirement to install any Wordpress plugins, works out-of-the-box 6 | - No requirement for special `.htaccess` settings 7 | - Ability to create regular Wordpress custom templates, and include shortcodes, JS, and PHP 8 | - Ability to create custom JSX React component templates (See [Custom JSX templates examples](#custom-react-components-in-jsx-templates-examples)) 9 | - Ability to use multiple menus (eg. header menu, footer menu) 10 | - Menus built on the client-side from flat trees 11 | - Separate `dev` and `production` builds (accessed with the `?dev` URL query param) (See [Examples](#examples) below) 12 | - Maintains non-WP URL query params thoughout the app (See [Query param examples](#query-param-examples) below) 13 | - Requested pages are cached for the session and not requested again 14 | - Ability to differ cached pages from non-cached 15 | - Ability to access pages not in the menu and maintain routing 16 | - Ability to access pages via any standard permalink type (See [Notes](#notes) below) 17 | - Dynamic `` tag, `wp_head()` and `wp_footer()` hooks 18 | - Ability install and use WP plugins regularly (See [Plugin test examples](#plugin-test-examples) below) 19 | - 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 20 | 21 | ---- 22 | 23 | This is an experimental theme. Not recommended for use on a live site. 24 | 25 | ---- 26 | 27 | ## Installation 28 | 29 | 1. Download or clone this repository into your Wordpress 'themes' folder 30 | 2. Activate the theme in wp-admin 31 | 3. `cd` into this theme folder 32 | 4. Run `npm install` 33 | 5. Build with webpack: 34 | 35 | a. `npm run dev` to build the dev version 36 | 37 | b. `npm run prod` to build the production version 38 | 39 | 6. Set your WP Permalinks settings to Post name 40 | 41 | That's all! 42 | 43 | ---- 44 | 45 | ## Notes 46 | 47 | 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. 48 | 49 | ---- 50 | 51 | ## Examples 52 | 53 | Example of production build (default): 54 | 55 | [https://zenitht.com/wp/](https://zenitht.com/wp/) 56 | 57 | Example of dev build accessed with `dev` param: 58 | 59 | [https://zenitht.com/wp/?dev](https://zenitht.com/wp/?dev) 60 | 61 | Example of page not in the menu: 62 | 63 | [https://zenitht.com/wp/page-not-in-menu/](https://zenitht.com/wp/page-not-in-menu/) 64 | 65 | Example of accessing page via Plain permalink type: 66 | 67 | [https://zenitht.com/wp/?p=35](https://zenitht.com/wp/?p=35) 68 | 69 | Example of page with JS alert in content in Text editing mode: 70 | 71 | [https://zenitht.com/wp/level-1/](https://zenitht.com/wp/level-1/) 72 | 73 | Example of [custom template](page-CustomPage1.php) page, with multiple JS tags, and PHP: 74 | 75 | [https://zenitht.com/wp/page-using-custom-template/](https://zenitht.com/wp/page-using-custom-template/) 76 | 77 | Example of page with status set as 'Draft' 78 | 79 | [https://zenitht.com/wp/?page_id=1859](https://zenitht.com/wp/?page_id=1859) 80 | 81 | 82 | 83 | ## Custom React components in JSX templates examples 84 | 85 | ![screenshot_0](https://zenitht.com/screenshots/wp-react/screenshot_0.png) 86 | 87 | Example of custom JSX React component template, consisting of [page-history.jsx](page-history.jsx) and [page-history.php](page-history.php) pair: 88 | 89 | [https://zenitht.com/wp/history/](https://zenitht.com/wp/history/) 90 | 91 | See more details at [https://zenitht.com/wp/jsx-custom-templates/](https://zenitht.com/wp/jsx-custom-templates/). 92 | 93 | 94 | 95 | ## Query param examples 96 | 97 | Example of production build accessed with `page_id&someParam` params, maintaining `someParam` param: 98 | 99 | [https://zenitht.com/wp/?page_id=35&someParam=123123](https://zenitht.com/wp/?page_id=35&someParam=123123) 100 | 101 | Example of dev build accessed with `dev&p` params, maintaining `dev` param: 102 | 103 | [https://zenitht.com/wp/?p=35&dev](https://zenitht.com/wp/?p=35&dev) 104 | 105 | Example of dev build accessed with `dev&page_id` params, maintaining `dev` param: 106 | 107 | [https://zenitht.com/wp/?page_id=35&dev](https://zenitht.com/wp/?page_id=35&dev) 108 | 109 | Example of dev build accessed with `page_id&dev&p&someParam` params, maintaining `dev&someParam` params: 110 | 111 | [https://zenitht.com/wp/?page_id=35&dev&someParam=123123](https://zenitht.com/wp/?page_id=35&dev&someParam=123123) 112 | 113 | 114 | 115 | ## Plugin test examples 116 | 117 | Example of [wordpress-zSlider](https://github.com/zenithtech/wordpress-zSlider) within custom template: 118 | 119 | [https://zenitht.com/wp/wordpress-zslider-test/](https://zenitht.com/wp/wordpress-zslider-test/) 120 | 121 | Plugin test using BWS Captcha WP plugin: 122 | 123 | [https://zenitht.com/wp/bws-captcha-shortcode-plugin-test/](https://zenitht.com/wp/bws-captcha-shortcode-plugin-test/) 124 | 125 | Plugin test using ConvertPlug WP plugin: 126 | 127 | [https://zenitht.com/wp/wp-plugin-test-convertplug/](https://zenitht.com/wp/wp-plugin-test-convertplug/) 128 | 129 | Plugin test using Ninja Forms WP plugin: 130 | 131 | [https://zenitht.com/wp/plugin-test-ninja-forms/](https://zenitht.com/wp/plugin-test-ninja-forms/) 132 | 133 | 134 | ---- 135 | 136 | ## License ## 137 | 138 | This package is licensed under MIT license. See [LICENSE](LICENSE) for details. 139 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-architect -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | __( 'Top Menu', 'react-theme-menu' ) 19 | ) ); 20 | 21 | add_theme_support( 'html5', array( 22 | 'search-form', 23 | 'comment-form', 24 | 'comment-list', 25 | 'gallery', 26 | 'caption', 27 | ) ); 28 | 29 | add_theme_support( 'post-formats', array( 30 | 'aside', 31 | 'image', 32 | 'video', 33 | 'quote', 34 | 'link', 35 | 'gallery', 36 | 'status', 37 | 'audio', 38 | 'chat', 39 | ) ); 40 | 41 | } 42 | 43 | } 44 | add_action( 'after_setup_theme', 'wpReact_setup' ); 45 | 46 | function override_draft_post_type( $query ) { 47 | $query->set( 'post_status', array( 'publish', 'draft' ) ); 48 | } 49 | add_action( 'pre_get_posts', 'override_draft_post_type' ); 50 | 51 | function override_draft_post_type_single( $posts, $wp_query ) { 52 | if ( count( $posts ) ) 53 | return $posts; 54 | 55 | if ( !empty( $wp_query->query['p'] ) ) { 56 | return array ( get_post( $wp_query->query['p'] ) ); 57 | } 58 | } 59 | add_filter( 'the_posts', 'override_draft_post_type_single', 10, 2 ); 60 | 61 | function disable_wp_emojicons() { 62 | // all actions related to emojis 63 | remove_action( 'admin_print_styles', 'print_emoji_styles' ); 64 | remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); 65 | remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); 66 | remove_action( 'wp_print_styles', 'print_emoji_styles' ); 67 | remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); 68 | remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); 69 | remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 70 | // filter to remove TinyMCE emojis 71 | add_filter( 'emoji_svg_url', '__return_false' ); 72 | // add_filter( 'tiny_mce_plugins', 'disable_emojicons_tinymce' ); 73 | } 74 | add_action( 'init', 'disable_wp_emojicons' ); 75 | 76 | function my_deregister_scripts(){ 77 | wp_deregister_script( 'wp-embed' ); 78 | } 79 | add_action( 'wp_footer', 'my_deregister_scripts' ); 80 | 81 | function get_wp_installation(){ 82 | $full_path = getcwd(); 83 | $ar = explode("wp-", $full_path); 84 | return $ar[0]; 85 | } 86 | 87 | add_action( 'wp_ajax_nopriv_react_get_page', 'react_get_page' ); 88 | add_action( 'wp_ajax_react_get_page', 'react_get_page' ); 89 | function react_get_page() { 90 | 91 | if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) { 92 | 93 | $html = ''; 94 | $wpFooter = ''; 95 | $wpHead = ''; 96 | 97 | if( isset($_POST['page_id']) && $_POST['page_id'] != 'false' ) { 98 | $post_id = $_POST['page_id']; 99 | } 100 | 101 | if( isset($_POST['uri']) && $_POST['uri'] != 'false' ) { 102 | $post_id = url_to_postid($_POST['uri']); 103 | } 104 | 105 | $post_status = get_post_status( $post_id ); 106 | $page_template = get_post_meta($post_id, '_wp_page_template', true); 107 | $post_type = get_post_type($post_id); 108 | 109 | 110 | if($post_type == 'page'){ 111 | if($page_template == 'default'){ 112 | 113 | ob_start(); 114 | global $post; 115 | $post = get_post($post_id); 116 | setup_postdata($post); 117 | include_once('inc/wp_head.php'); 118 | $wpHead = ob_get_clean(); 119 | wp_reset_postdata($post); 120 | if(ob_get_length()){ 121 | ob_end_clean(); 122 | } 123 | 124 | ob_start(); 125 | $via_ajax = true; 126 | global $post; 127 | $post = get_post($post_id); 128 | setup_postdata($post); 129 | $content = $post->post_content; 130 | $content = apply_filters('the_content', $content); 131 | $html = str_replace(']]>', ']]>', $content); 132 | do_action('wp_footer'); 133 | $wpFooter = ob_get_clean(); 134 | wp_reset_postdata($post); 135 | if(ob_get_length()){ 136 | ob_end_clean(); 137 | } 138 | 139 | } else { 140 | 141 | ob_start(); 142 | global $post; 143 | $post = get_post($post_id); 144 | setup_postdata($post); 145 | include_once('inc/wp_head.php'); 146 | $wpHead = ob_get_clean(); 147 | wp_reset_postdata($post); 148 | if(ob_get_length()){ 149 | ob_end_clean(); 150 | } 151 | 152 | ob_start(); 153 | $via_ajax = true; 154 | include $page_template; 155 | $html = ob_get_clean(); 156 | if(ob_get_length()){ 157 | ob_end_clean(); 158 | } 159 | 160 | ob_start(); 161 | global $post; 162 | $post = get_post($post_id); 163 | setup_postdata($post); 164 | do_action('wp_footer'); 165 | $wpFooter = ob_get_clean(); 166 | wp_reset_postdata($post); 167 | if(ob_get_length()){ 168 | ob_end_clean(); 169 | } 170 | 171 | } 172 | } 173 | 174 | if($post_type == 'post'){ 175 | 176 | ob_start(); 177 | global $post; 178 | $post = get_post($post_id); 179 | setup_postdata($post); 180 | include_once('inc/wp_head.php'); 181 | $wpHead = ob_get_clean(); 182 | wp_reset_postdata($post); 183 | if(ob_get_length()){ 184 | ob_end_clean(); 185 | } 186 | 187 | ob_start(); 188 | global $post; 189 | $post = get_post($post_id); 190 | setup_postdata($post); 191 | $content = $post->post_content; 192 | $content = apply_filters('the_content', $content); 193 | $html = str_replace(']]>', ']]>', $content); 194 | do_action('wp_footer'); 195 | $wpFooter = ob_get_clean(); 196 | wp_reset_postdata($post); 197 | if(ob_get_length()){ 198 | ob_end_clean(); 199 | } 200 | 201 | } 202 | 203 | if( $post_status == 'draft' && !is_user_logged_in() ){ 204 | 205 | $page_array = [ 206 | $post_id => [ 207 | 'page_id' => (int)$post_id, 208 | 'page_uri' => get_page_uri($post_id), 209 | 'the_title' => get_the_title($post_id), 210 | 'url' => get_page_link($post_id), 211 | 'html' => '


This page is not yet published.

', 212 | 'wp_footer' => $wpFooter, 213 | 'wp_head' => $wpHead, 214 | 'server_request_time' => strtotime(date('Y-m-d G:i:s')), 215 | 'page_template' => $page_template, 216 | 'post_type' => $post_type 217 | ], 218 | 'last_page_id' => (int)$post_id 219 | ]; 220 | 221 | } else { 222 | 223 | $page_array = [ 224 | $post_id => [ 225 | 'page_id' => (int)$post_id, 226 | 'page_uri' => get_page_uri($post_id), 227 | 'the_title' => get_the_title($post_id), 228 | 'url' => get_page_link($post_id), 229 | 'html' => $html, 230 | 'wp_footer' => $wpFooter, 231 | 'wp_head' => $wpHead, 232 | 'server_request_time' => strtotime(date('Y-m-d G:i:s')), 233 | 'page_template' => $page_template, 234 | 'post_type' => $post_type 235 | ], 236 | 'last_page_id' => (int)$post_id 237 | ]; 238 | 239 | } 240 | 241 | echo json_encode($page_array); 242 | 243 | } 244 | 245 | die(); 246 | 247 | } 248 | 249 | add_action( 'wp_ajax_nopriv_react_get_post_not_in_menu', 'react_get_post_not_in_menu' ); 250 | add_action( 'wp_ajax_react_get_post_not_in_menu', 'react_get_post_not_in_menu' ); 251 | function react_get_post_not_in_menu() { 252 | 253 | if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) { 254 | 255 | if( isset($_POST['uri']) && $_POST['uri'] != 'false' ) { 256 | $uri = basename(untrailingslashit($_POST['uri'])); 257 | 258 | 259 | $args = array( 260 | 'name' => $uri, 261 | 'numberposts' => 1, 262 | // 'post_type' => 'post', 263 | // 'post_status' => 'publish' 264 | ); 265 | 266 | $my_post = get_posts($args); 267 | 268 | if( $my_post ) { 269 | $post_id = $my_post[0]->ID; 270 | 271 | $my_post[0]->object_id = (string)$post_id; 272 | $my_post[0]->url = get_page_link($post_id); 273 | $my_post[0]->menu_item_parent = '0'; 274 | $my_post[0]->not_in_menu = true; 275 | echo json_encode($my_post[0]); 276 | } else { 277 | $page_by_path = get_page_by_path($uri); 278 | $post_id = $page_by_path->ID; 279 | 280 | $page_by_path->object_id = (string)$post_id; 281 | $page_by_path->url = get_page_link($post_id); 282 | $page_by_path->menu_item_parent = '0'; 283 | $page_by_path->not_in_menu = true; 284 | echo json_encode($page_by_path); 285 | } 286 | 287 | } 288 | 289 | } 290 | 291 | die(); 292 | 293 | } 294 | 295 | if( function_exists('acf_add_options_page') ) { 296 | acf_add_options_page(array( 297 | 'page_title' => 'zSlider Settings', 298 | 'menu_title' => 'zSlider', 299 | 'menu_slug' => 'zslider-slider', 300 | 'capability' => 'edit_posts', 301 | 'redirect' => false, 302 | 'icon_url' => 'dashicons-slides' 303 | )); 304 | } 305 | 306 | -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | 2 | > 3 | 4 | > 5 | 40 | 41 | 47 | 48 | 49 |
50 |
51 | 52 |
53 | -------------------------------------------------------------------------------- /inc/page-footer.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /inc/page-header.php: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /inc/wp_head.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | <?php echo get_bloginfo(), " – ", the_title(); ?> 6 | 7 | 8 | 9 | 10 | 11 | 12 | " href="feed/" /> 13 | 14 | 15 | 16 | 23 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenithtech/wordpress-react/798fc7afdd2122a5e51b44a58d44d0a988ec6b85/index.php -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wp-react", 3 | "description": "Single-page React/Flux Wordpress theme.", 4 | "version": "1.0.0", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Sami Shelah", 8 | "email": "sami.shelah@icloud.com" 9 | }, 10 | "dependencies": { 11 | "babel-plugin-wildcard": "^2.1.2", 12 | "flux": "^3.1.2", 13 | "immutability-helper": "^2.1.2", 14 | "react": "^15.4.2", 15 | "react-dom": "^15.4.2", 16 | "react-router": "^4.0.0", 17 | "react-router-dom": "^4.0.0" 18 | }, 19 | "devDependencies": { 20 | "babel": "^6.23.0", 21 | "babel-cli": "^6.24.0", 22 | "babel-core": "^6.24.0", 23 | "babel-loader": "^6.4.1", 24 | "babel-preset-env": "^1.2.2", 25 | "babel-preset-es2015": "^6.24.0", 26 | "babel-preset-react": "^6.23.0", 27 | "babel-preset-stage-0": "^6.22.0", 28 | "bootstrap": "^4.0.0-alpha.6", 29 | "css-loader": "^0.27.3", 30 | "extract-text-webpack-plugin": "^2.1.0", 31 | "file-loader": "^0.10.1", 32 | "html-loader": "^0.4.5", 33 | "less": "^2.7.2", 34 | "less-loader": "^4.0.2", 35 | "path": "^0.12.7", 36 | "style-loader": "^0.16.0", 37 | "svg-inline-loader": "^0.7.1", 38 | "uglify-js": "^2.8.16", 39 | "uglifyjs-webpack-plugin": "^0.3.1", 40 | "url-loader": "^0.5.8", 41 | "webpack": "^2.3.1", 42 | "webpack-assets-manifest": "^0.6.2" 43 | }, 44 | "scripts": { 45 | "prod": "webpack --colors --progress --config webpack.prod.config.js", 46 | "dev": "webpack --colors --progress --watch --config webpack.dev.config.js" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /page-CustomPage1.php: -------------------------------------------------------------------------------- 1 | 8 | 9 | 24 | 25 |
26 |

27 | Custom template page-CustomPage1.php 28 |

29 |

30 | This is custom template, you can include shortcodes, custom CSS, JS, and PHP. 31 |

32 | 33 |

34 | Time via PHP within custom template: 35 |

36 |
37 | 38 | 41 | 42 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /page-history.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | NavLink 4 | } from 'react-router-dom'; 5 | import API from './src/js/API.jsx'; 6 | import DataStore from './src/js/Stores/DataStore.jsx'; 7 | import ServerActions from './src/js/Actions/ServerActions.jsx'; 8 | 9 | class Item extends Component { 10 | constructor(props){ 11 | super(props); 12 | let _ = this; 13 | _.deletePageFromCache = _.deletePageFromCache.bind(_); 14 | } 15 | deletePageFromCache(id){ 16 | delete DataStore.data.pages_cache[id]; 17 | ServerActions.cacheUpdated(); 18 | console.log('Deleted page ' + id + ' from cache.'); 19 | } 20 | render(){ 21 | let _ = this, 22 | { url } = _.props, 23 | { PATHINFO_BASENAME, siteurl } = _.props.wp_vars.constants, 24 | toUrl = '/'+PATHINFO_BASENAME+url.replace(siteurl, ''); 25 | 26 | return ( 27 |
  • 28 |

    Page title: {_.props.the_title}

    29 |

    Page ID: {_.props.page_id}

    30 |

    Page URL: {toUrl}

    31 |

    Request time: {_.props.date_formatted}

    32 |

     

    33 |
    Delete from cache
    34 |
    • 35 | ); 36 | } 37 | } 38 | 39 | class History extends Component { 40 | constructor(props){ 41 | super(props); 42 | let _ = this; 43 | _.onCacheUpdated = _.onCacheUpdated.bind(_); 44 | } 45 | onCacheUpdated() { 46 | this.forceUpdate(); 47 | } 48 | componentWillMount() { 49 | let _ = this, 50 | ds = DataStore; 51 | ds.on('cacheUpdated', _.onCacheUpdated); 52 | } 53 | componentWillUnmount(){ 54 | let _ = this, 55 | ds = DataStore; 56 | ds.removeListener('cacheUpdated', _.onCacheUpdated); 57 | } 58 | componentDidUpdate(prevProps) { 59 | if (this.props.location !== prevProps.location) { 60 | API.transitionToCurrentPage(); 61 | } 62 | } 63 | render() { 64 | let _ = this, 65 | blogdescription = '', 66 | current_page_id = '', 67 | html = '
    ', 68 | pages_cache = DataStore.data.pages_cache, 69 | pages_cache_html = false; 70 | 71 | if( typeof _.props.current_page != 'undefined' && 72 | typeof _.props.current_page_id != 'undefined' && 73 | _.props.current_page_id == _.props.current_page.page_id 74 | ){ 75 | 76 | if( _.props.current_page_id.length > 0) { 77 | current_page_id = _.props.current_page_id; 78 | } 79 | 80 | if( typeof _.props.current_page.html != 'undefined' ) { 81 | html = _.props.current_page.html; 82 | } 83 | 84 | } 85 | 86 | pages_cache_html = Object 87 | .keys(pages_cache) 88 | .map( (currentValue, index, array) => { 89 | if(currentValue != 'last_page_id' && (_.props.current_page_id != currentValue.page_id)){ 90 | return pages_cache[currentValue]; 91 | } 92 | }) 93 | .map( (currentValue, index, array) => { 94 | if(typeof currentValue != 'undefined'){ 95 | var date = API.timeConvert(currentValue.server_request_time), 96 | dateSplit = date.split(/[- :]/), 97 | dateArr = new Date(dateSplit[0], dateSplit[1], dateSplit[2], dateSplit[3], dateSplit[4], dateSplit[5]), 98 | date_formatted = dateArr.toLocaleString('en-us', { month: "long" }) + ' ' + dateArr.getDate() + ', ' + dateArr.getFullYear() + ', ' + dateArr.getHours() + ':' + dateArr.getMinutes() + ':' + dateArr.getSeconds(); 99 | 100 | return ( 101 | 108 | ) 109 | } 110 | }); 111 | 112 | 113 | return ( 114 |
    115 |
    116 | { pages_cache_html.length > 1 ? 117 |
      {pages_cache_html}
    118 | : 119 |

    Cache is empty.

    120 | } 121 |
    122 | ); 123 | } 124 | } 125 | 126 | export default History; 127 | -------------------------------------------------------------------------------- /page-history.php: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | 26 |
    27 |


    Custom React component JSX WordPress template

    28 |

    29 | This is custom React component that shows the history of pages you visited retreived from the app cache: 30 |
    31 |
    32 |

    33 |
    34 | 35 | 36 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenithtech/wordpress-react/798fc7afdd2122a5e51b44a58d44d0a988ec6b85/screenshot.png -------------------------------------------------------------------------------- /single.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | 7 | a, 8 | a:active, 9 | a:focus, 10 | a:hover { 11 | text-decoration: none; 12 | } 13 | 14 | #wp-footer-hooks { 15 | display: block; 16 | position: absolute; 17 | height: 0; 18 | width: 0; 19 | overflow: hidden; 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | height: auto; 25 | } 26 | 27 | .btn { 28 | cursor: pointer; 29 | color: #fff; 30 | background-color: #0275d8; 31 | } 32 | 33 | /* START #react_header */ 34 | 35 | #site-navigation {} 36 | 37 | #react_header { 38 | position: relative; 39 | z-index: 999; 40 | } 41 | 42 | #react_header nav#top-menu, 43 | #react_header nav#top-menu ul { 44 | display: block; 45 | width: auto; 46 | position: relative; 47 | padding: 0; 48 | margin: 0; 49 | } 50 | 51 | #react_header nav#top-menu li ul.sub-menu { 52 | display: none; 53 | position: absolute; 54 | left: 0; 55 | z-index: 1; 56 | } 57 | 58 | #react_header nav#top-menu li ul.sub-menu>li { 59 | display: block; 60 | position: relative; 61 | background-color: #eee; 62 | } 63 | 64 | #react_header nav#top-menu>ul>li>ul.sub-menu li>ul.sub-menu { 65 | left: 100%; 66 | right: auto; 67 | top: 0; 68 | position: absolute; 69 | } 70 | 71 | #react_header nav#top-menu li { 72 | display: inline-block; 73 | position: relative; 74 | vertical-align: top; 75 | } 76 | 77 | #react_header nav#top-menu li:hover>a { 78 | background-color: #e7f4ff; 79 | } 80 | 81 | #react_header nav#top-menu li.menu-item-has-children:hover>ul.sub-menu { 82 | display: block; 83 | width: auto; 84 | } 85 | 86 | #react_header nav#top-menu li a { 87 | color: #0275d8; 88 | } 89 | 90 | #react_header nav#top-menu li a { 91 | display: block; 92 | line-height: 1; 93 | padding: 10px 20px; 94 | text-align: left; 95 | background-color: #eee; 96 | text-transform: uppercase; 97 | font-weight: 100; 98 | font-size: 16px; 99 | white-space: nowrap; 100 | } 101 | 102 | #react_header nav#top-menu li.menu-item-has-children>a:after { 103 | content: '▸'; 104 | position: relative; 105 | font-family: 'FontAwesome'; 106 | margin: 0; 107 | padding: 0 0 0 10px; 108 | height: 16px; 109 | width: 16px; 110 | display: inline-block; 111 | } 112 | 113 | #react_header nav#top-menu li.menu-item-has-children:hover>a:after { 114 | content: '▾'; 115 | } 116 | 117 | #react_header nav#top-menu li.current_page_item>a { 118 | color: #fff; 119 | background-color: #0275d8; 120 | } 121 | 122 | 123 | /* END #react_header */ 124 | 125 | 126 | /* START #react_page */ 127 | 128 | #react_page>article {} 129 | 130 | #react_page>article>.loading { 131 | margin: 100px auto; 132 | font-size: 20px; 133 | width: 1em; 134 | height: 1em; 135 | border-radius: 50%; 136 | position: relative; 137 | text-indent: -9999em; 138 | -webkit-animation: load5 1.1s infinite ease; 139 | animation: load5 1.1s infinite ease; 140 | -webkit-transform: translateZ(0); 141 | -ms-transform: translateZ(0); 142 | transform: translateZ(0); 143 | } 144 | 145 | @-webkit-keyframes load5 { 146 | 0%, 147 | 100% { 148 | box-shadow: 0em -2.6em 0em 0em #0275d8, 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.5), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.7); 149 | } 150 | 12.5% { 151 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.7), 1.8em -1.8em 0 0em #0275d8, 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.5); 152 | } 153 | 25% { 154 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.5), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.7), 2.5em 0em 0 0em #0275d8, 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 155 | } 156 | 37.5% { 157 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.5), 2.5em 0em 0 0em rgba(2, 117, 216, 0.7), 1.75em 1.75em 0 0em #0275d8, 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 158 | } 159 | 50% { 160 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.5), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.7), 0em 2.5em 0 0em #0275d8, -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 161 | } 162 | 62.5% { 163 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.5), 0em 2.5em 0 0em rgba(2, 117, 216, 0.7), -1.8em 1.8em 0 0em #0275d8, -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 164 | } 165 | 75% { 166 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.5), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.7), -2.6em 0em 0 0em #0275d8, -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 167 | } 168 | 87.5% { 169 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.5), -2.6em 0em 0 0em rgba(2, 117, 216, 0.7), -1.8em -1.8em 0 0em #0275d8; 170 | } 171 | } 172 | 173 | @keyframes load5 { 174 | 0%, 175 | 100% { 176 | box-shadow: 0em -2.6em 0em 0em #0275d8, 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.5), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.7); 177 | } 178 | 12.5% { 179 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.7), 1.8em -1.8em 0 0em #0275d8, 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.5); 180 | } 181 | 25% { 182 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.5), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.7), 2.5em 0em 0 0em #0275d8, 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 183 | } 184 | 37.5% { 185 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.5), 2.5em 0em 0 0em rgba(2, 117, 216, 0.7), 1.75em 1.75em 0 0em #0275d8, 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 186 | } 187 | 50% { 188 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.5), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.7), 0em 2.5em 0 0em #0275d8, -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.2), -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 189 | } 190 | 62.5% { 191 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.5), 0em 2.5em 0 0em rgba(2, 117, 216, 0.7), -1.8em 1.8em 0 0em #0275d8, -2.6em 0em 0 0em rgba(2, 117, 216, 0.2), -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 192 | } 193 | 75% { 194 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.5), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.7), -2.6em 0em 0 0em #0275d8, -1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2); 195 | } 196 | 87.5% { 197 | box-shadow: 0em -2.6em 0em 0em rgba(2, 117, 216, 0.2), 1.8em -1.8em 0 0em rgba(2, 117, 216, 0.2), 2.5em 0em 0 0em rgba(2, 117, 216, 0.2), 1.75em 1.75em 0 0em rgba(2, 117, 216, 0.2), 0em 2.5em 0 0em rgba(2, 117, 216, 0.2), -1.8em 1.8em 0 0em rgba(2, 117, 216, 0.5), -2.6em 0em 0 0em rgba(2, 117, 216, 0.7), -1.8em -1.8em 0 0em #0275d8; 198 | } 199 | } 200 | 201 | 202 | /* END #react_page */ 203 | 204 | 205 | /* START #footer */ 206 | 207 | #footer { 208 | background-color: #eee; 209 | padding-top: 20px; 210 | padding-bottom: 20px; 211 | } 212 | 213 | 214 | /* END #footer */ -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import update from 'immutability-helper'; 4 | import { 5 | BrowserRouter as Router, 6 | Route, 7 | browserHistory, 8 | IndexRedirect, 9 | IndexRoute 10 | } from 'react-router-dom'; 11 | import API from './js/API.jsx'; 12 | import DataStore from './js/Stores/DataStore.jsx'; 13 | import Menu from './js/Components/Menu.jsx'; 14 | import Page from './js/Components/Page.jsx'; 15 | import Footer from './js/Components/Footer.jsx'; 16 | import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 17 | import './css/main.css'; 18 | 19 | window.window_cache = API.clone(window); 20 | 21 | if(document.getElementById('react_header')){ 22 | class ReactHeader extends Component { 23 | constructor(props){ 24 | super(props); 25 | let _ = this; 26 | _.state = {}; 27 | _.onChange = _.onChange.bind(_); 28 | _.onGetPage = _.onGetPage.bind(_); 29 | } 30 | onChange() { 31 | let _ = this, 32 | appState = update(_.state, { 33 | $merge: { wp_vars: DataStore.getWpVars() } 34 | }); 35 | _.setState(appState); 36 | } 37 | onGetPage() { 38 | let _ = this, 39 | ds = DataStore, 40 | appState = update(_.state, { 41 | $merge: { 42 | current_page: ds.getCachedPage(ds.getCurrentPageID(), false) 43 | } 44 | }); 45 | _.setState(appState); 46 | } 47 | componentWillMount() { 48 | let _ = this, 49 | ds = DataStore; 50 | ds.on('change', _.onChange); 51 | ds.on('onGetPage', _.onGetPage); 52 | } 53 | componentWillUnmount(){ 54 | let _ = this, 55 | ds = DataStore; 56 | ds.removeListener('change', _.onChange); 57 | ds.removeListener('onGetPage', _.onGetPage); 58 | } 59 | render() { 60 | let _ = this, 61 | ds = DataStore, 62 | blogdescription = ''; 63 | 64 | if( ds.getWpVars('blogdescription') ) { 65 | blogdescription = ds.getWpVars('blogdescription'); 66 | } 67 | return ( 68 |
    69 |
    70 |

    {blogdescription}

    71 | 72 |
    73 |
    74 | ); 75 | } 76 | } 77 | 78 | ReactDOM.render(( 79 | 80 | 81 | 82 | ), document.getElementById('react_header') 83 | ); 84 | 85 | } 86 | 87 | if(document.getElementById('react_page')){ 88 | class ReactPage extends Component { 89 | constructor(props){ 90 | super(props); 91 | let _ = this; 92 | _.state = {}; 93 | _.onChange = _.onChange.bind(_); 94 | _.onPageChange = _.onPageChange.bind(_); 95 | _.onGetPage = _.onGetPage.bind(_); 96 | } 97 | onChange() { 98 | let _ = this, 99 | appState = update(_.state, { 100 | $merge: { wp_vars: DataStore.getWpVars() } 101 | }); 102 | 103 | _.setState(appState); 104 | } 105 | onPageChange() { 106 | let _ = this, 107 | ds = DataStore; 108 | 109 | _.setState({ current_page_id: ds.getCurrentPageID() }); 110 | 111 | if(ds.getCurrentPageID() != null) { 112 | API.AJAX_getPage(ds.getCurrentPageID(), ds.getCurrentPageURL()); 113 | } 114 | } 115 | onGetPage() { 116 | let _ = this, 117 | ds = DataStore, 118 | appState = update(_.state, { 119 | $merge: { 120 | current_page: ds.getCachedPage(ds.getCurrentPageID(), false) 121 | } 122 | }); 123 | 124 | _.setState(appState); 125 | } 126 | componentWillMount() { 127 | let _ = this, 128 | ds = DataStore; 129 | 130 | ds.on('change', _.onChange); 131 | ds.on('onPageChange', _.onPageChange); 132 | ds.on('onGetPage', _.onGetPage); 133 | } 134 | componentWillUnmount(){ 135 | let _ = this, 136 | ds = DataStore; 137 | 138 | ds.removeListener('change', _.onChange); 139 | ds.removeListener('onPageChange', _.onPageChange); 140 | ds.removeListener('onGetPage', _.onGetPage); 141 | } 142 | render() { 143 | let _ = this; 144 | 145 | return ( 146 | 147 | ); 148 | } 149 | } 150 | 151 | ReactDOM.render(( 152 | 153 | 154 | 155 | ), document.getElementById('react_page') 156 | ); 157 | 158 | } 159 | 160 | if(document.getElementById('footer')){ 161 | class ReactFooter extends Component { 162 | constructor(props){ 163 | super(props); 164 | let _ = this; 165 | _.state = {}; 166 | _.onChange = _.onChange.bind(_); 167 | _.onGetPage = _.onGetPage.bind(_); 168 | } 169 | onChange() { 170 | let _ = this, 171 | appState = update(_.state, { 172 | $merge: { wp_vars: DataStore.getWpVars() } 173 | }); 174 | _.setState(appState); 175 | } 176 | onGetPage() { 177 | let _ = this, 178 | appState = update(_.state, { 179 | $merge: { 180 | current_page: DataStore.getCachedPage(DataStore.getCurrentPageID(), false) 181 | } 182 | }); 183 | 184 | _.setState(appState); 185 | } 186 | componentWillMount() { 187 | let _ = this, 188 | ds = DataStore; 189 | ds.on('change', _.onChange); 190 | ds.on('onGetPage', _.onGetPage); 191 | } 192 | componentWillUnmount(){ 193 | let _ = this, 194 | ds = DataStore; 195 | ds.removeListener('change', _.onChange); 196 | ds.removeListener('onGetPage', _.onGetPage); 197 | } 198 | render() { 199 | let _ = this; 200 | 201 | return ( 202 |