Single Page Application WordPress Starter Theme available for free
We are happy to introduce them.es Starter SPA – a free WordPress Starter Theme using Material Design Web components to build Single Page Applications!
What is included?
Polymer is an Open-Source project maintained by Google which provides custom Material Design elements, built by the Polymer team, ready to use in applications.
Web Components are a new way (or the future way) for writing Web applications. They are a set of standards that allow for the creation of reusable widgets or components in Web documents and Web applications. The intention behind them is to bring component-based Software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements.
- Custom Elements
- Shadow DOM
- HTML Imports
- HTML Templates
(derived from Wikipedia.org)
“SPA” approach
Modern Web Applications like Single Web Apps, which can be developed using the them.es SPA Starter Theme, are separating the data from the presentation by having a model layer that handles data and a view layer that reads from the models. All pages (or views) can be accessed without having to load the data from the server.
A Router makes sure to map an URL path to its corresponding view. The Starter Theme contains the Page.js Router which already has been configured in an SEO friendly way (using Friendly URLs).
No worries if the explanation is too sophisticated for you. Setting up your Web app is as simple as creating a WordPress menu and adding your pages. The magic described above is done in the background.
Installing the Starter Theme
Please note that this Theme is not a typical WordPress Theme. At first glance there are less Source files compared to other WordPress Themes. But don’t be misled by that.
The look and feel of the Theme is mainly achieved by using Web Components and not by implementing Template files. Furthermore Blog posts are loaded into the view by using the WP REST API Plugin.
Server-side scripts are only needed on first page load and the Page Template basically only exists of a single index.php (and the functions.php) file. Pretty neat!
- Open the them.es Starter SPA website and Download the Starter Theme
- Setup a new WordPress instance
- Install the WP REST API Plugin and activate it
- Install the latest Polymer library and required Components in your Theme using the included Bower configuration
- Upload the Starter Theme with all required components and activate it on your WordPress instance
- Add Pages and Posts
- Add the Main Navigation Menu
- Now it’s up to you to modify existing Elements or implement new ones
Feel free to contribute on GitHub. The Source Code is freely available under GPLv2+.