This theme aims to be a starting point to develop a Polymer SPA applications using Wordpress to feed it.
It's based on the Polymer's team Polymer starting Kit.
It is still in development stage and some bugs may appear.
- Clone this repository in your server;
git clone https://github.com/trofrigo/polymer-theme.git - Install the theme's bower dependencies. Execute
bower installin the root of this project. In order to this, Bower must be installed. - Install and activate this theme into your Wordpress installation.
- Create a page called Blog. This is needed in order to be able to edit the blog's title and description.
NOTE: After the first installation, you may need go to the Polymer theme admin's application into the Wordpress backoffice and save this configuration for a very first time.
If you are using a Wordpress installation previous to the 4.7.3 version, you have to install the WP REST API plugin as well.
In order to improve the user final experience and daily blog's workflow, some plugins and third party software may be installed.
Varnish caches all the API requests, improving the speed transition between pages.
WP EDITOR let you edit and create files and directories inside yours Wordpress backoffice. This allows you to create edit custom element's files.
The whole Polymer's application can be found into the src/ folder. There you will find three folders admin/, core/
and templates/.
The admin/ folder contains all the admin's application that allows you to edit the themes's
configuration.
All the templates must be placed into the templates/ folder. This templates ships with some of them:
template-blog.htmltemplate-blog-detail.htmltemplate-page-detail.html
Theme's core is placed into the core/ folder. There you will find some elements used by this theme,
that you can reuse in your own templates or elements.
Once this theme is installed, you will find inside your Wordpress backoffice a new option, polymer-theme:
Inside this new page you will find 3 tabs:
This first tab manages some general settings, as for example:
- SPA icons. Allows you to define several icons sizes.
- Theme color. That's the color used for some browser to color its navbar.
- Google Tag Manager. By default, this theme ships with Google Tag Manager ready to use.
Every time that this theme try to resolve a url, uses some to rules to infer a proper template. Those general rules can be overwritten to any page or post in your site.
Every time that a post or page is created, or every time that a new template is added into the src/templates/ folder,
it will appear as an option inside the select elements.
This theme uses the Google's UniFlow element to work with the inner state of the application. There are two kind of values inside the application state, those required by the application itself and those required by the user.
Every element that implements the UniFlow.StateAware, will be notified every time that the state changes.
If the user needs to set a value, it can be add in this section. Those values will be available inside the custom attribute of the application's state.
<dom-module id="my-element">
<template>
<style></style>
<h1>state.custom.myValue</h1>
</template>
Polymer({
is: 'my-element',
behaviors: [
UniFlow.StateAware
]
});
</dom-module>
Every time the route changes, the shell tries to infer the most appropriate template. To do this, the shell fetch the information that Wordpress has for this url using the polymer-theme-route. This information is eventually passed to the template, that is the info that is typically into the Wordpress's Loop.
Once the template is selected, the shell call to an init(item) method that the template must implement. That method receives a param with the Loop's info.
At this point, the shell waits to the template to fire a method called ready, that notifies that template is ready to be shown.
In a simple example, a template receives the Loop info, bind it, and notifies that is ready to go.
Polymer({
is: 'post-detail',
init: function (item) {
this.set('item', item);
this.fire('ready');
}
});
In a more complex example, a template that renders a page, may need to find all page's children. In this case the template needs to fetch this children information in order to be ready.
Polymer({
is: 'page-children',
init: function (item) {
this.wp.pages().param('parent', item.id)
.then(function (response) {
this.set('children', response);
this.fire('ready');
}.bind(this));
}
});
NOTE: in this last example, the templates uses the polymer-theme-wp-api to fetch this information.
This theme tries to mimic the Wordpress template behaviour. Every time the route changes, theme's router will find
what the taxonomy and the slug of the next view is. Once those params are determined, the shell will try to find a
template for the view.
First of all, will look for custom rule for this slug,
if this rule does not exist, will resolve into templates/template-{taxonomy}-detail.html.
This hierarchy allows the user to set a default view for a taxonomy detail (typically post-detail and page-detail)
and also overwrite it for any special post just creating a new rule.
- First theme's version
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Copyright (c) 2017 Rodrigo Sancho
Licensed under the MIT license.