Code Monkey home page Code Monkey logo

picard's Introduction

Picard

Picard is an experimental prototype WordPress theme that makes use of React and the new WP-API. It means, that instead of loading new page every time you click a link, it uses background AJAX requests to WP REST API to fetch data without reloading the page.

Please note, it is STRONGLY recommended that this theme is not used in any production environment. It is purely for educational and testing purposes. This theme is under development so it is not recommended that you rely on any aspect of it.

Installation

1. Working WordPress installation

First, prepare a proper WordPress environment:

  • You will obviously need a working WordPress installation,
  • You will also need WP REST API. It is a plugin (with plans to incorporate into the WordPress core) that creates REST API to be used by the theme. Plugin is currently NOT in plugins repository, you have to upload the files manually. Install and activate the WP REST API plugin (make sure that you are using the master branch โ€“ the default is currently develop),
  • Set your permlink structure to /%year%/%monthnum%/%day%/%postname%/.

2. Theme building (for team building go to your local meetup)

Unlike other themes, this one uses a build process. JavaScript is an interpreted language, but we need to take certain steps (like transpiling React JSX syntax or SASS CSS syntax) to take the files from development phase to production. You will need the following tools:

  • node.js and npm - node is an command line JavaScript interpreter that is used for build process. npm stands for node package manager. You can install both from nodejs.org,
  • gulp is a build system running on node. Once you install node and npm, type npm install -g gulp to install gulp in your system (-g flag installs package globally so you will now have gulp command in your command line).

Next, you have to set up the theme:

  1. Download the theme files to wp-content/themes directory of your WordPress installation. You can clone this repository (git clone [email protected]:Automattic/Picard.git) or just press download on the right side - also here (remember to unzip).
  2. In Picard directory, run npm install to install the node dependencies. npm will take care of the rest (npm installs dependencies listed in the package.json file).
  3. In Picard directory, run gulp build to compile the JavaScript and SASS. Gulp will know what to do, because proper actions are listed in the gulpfile.js,
  4. In Picard directory, run gulp watch to actively develop the theme and have the styles and JS files automatically update. Watch command listens for file changes and starts build process every time you save a source file.

Contributing

Pull requests and issues are very much welcome!

Todos

A not exhaustive list of all things Picard still needs to do:

  1. Work with different permalink structures.
  2. Allow user to set a static front page.
  3. Allow user to use sidebars and widgets.
  4. Support all permalinks (archives, search etc)

picard's People

Contributors

jacklenox avatar iamtakashi avatar thomasguillot avatar kwight avatar fklein-lu avatar ataylorme avatar artpi avatar michaeldcain avatar dbspringer avatar michaelarestad avatar karmatosed avatar

Watchers

James Cloos avatar Eri Mehmeti avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.