Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

Picard

A prototype theme that uses React and WP-API

Subscribe to updates I use Picard


Statistics on Picard

Number of watchers on Github 626
Number of open issues 19
Average time to close an issue 3 months
Main language CSS
Average time to merge a PR 7 days
Open pull requests 7+
Closed pull requests 10+
Last commit almost 4 years ago
Repo Created almost 5 years ago
Repo Last Updated over 1 year ago
Size 1.2 MB
Organization / Authorautomattic
Contributors12
Page Updated
Do you use Picard? Leave a review!
View open issues (19)
View Picard activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Picard for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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 git@github.com: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 open issues Ask a question     (View All Issues)
  • almost 3 years Add customizer preview support
  • over 3 years gulp build fails with AssertionError: missing path
  • over 3 years Project roadmap?
  • over 3 years Uncaught TypeError: Cannot read property 'hasClass' of null
  • over 3 years Page Loading UX
  • almost 4 years Warnings on npm install
  • almost 4 years Server-Side Rendering
  • almost 4 years Spawns infinite customizer menus
  • about 4 years react-tools has been deprecated
  • over 4 years Add minify/uglify options to Gulp config
  • over 4 years Theme kills admin access if activated before WP REST API plugin
  • over 4 years Work with subfolder installs
  • over 4 years Autoprefixing in Gulp causes errors that block style.css compile.
  • over 4 years Identify components to componentize
Picard open pull requests (View All Pulls)
  • Update gulp-sass version
  • bump package versions
  • Adding Contributing.md
  • Add server-side rendering
  • Update Picard so that it uses v2 of WP-API
  • Checks whether the WordPress REST API plugin is active
  • Update gulp and npm packages, support ES6
Picard questions on Stackoverflow (View All Questions)
  • ReactJS / WP Picard theme error
  • How can you access the original tag or filename text in a mp3 with a MusicBrainz: Picard plugin?
  • Picard SamToFastq only extracts one read, then throws an error
  • Can the maximum image size of picard library be adjusted?
  • How to compare two releases in a MusicBrainz Picard plugin?
  • How to get consensus sequence from BAM file format on java (by means of Picard)
  • Optimizing calculation with lists of matrices within a Picard Iteration
Picard list of languages used
Other projects in CSS