Elf - WordPress REST API Theme is a Starter theme created using HTML5 and plain Vanilla JavaScript code without the use of JavaScript libraries or frameworks.
The Theme uses WordPress only as a CMS, and separates entirely the front-end, using the WordPress REST API to get information from databases. The front-end is built only using plain vanilla JavaScript code and HTML5 and is defined only by your aesthetic view and imagination. For a back-end any standard WordPress theme such as Twenty8teen, Twenty Seventeen or Twenty Sixteen can be used.
Unlike Single Page Application (SPA), WP REST API theme Elf creates semantic HTML5 files to the server and send them to the browser (client) for interpretation. This ensures easy and accurate indexing by robots. The names of the HTML5 files correspond to the slugs created by WordPress's back-end theme. For these reasons, Elf - WordPress REST API Theme is SEO optimized.
"When in doubt, the Mobile Friendly Test tool is invaluable for testing that your chosen approach does what you're hoping for. It shows a visual preview of how any page appears to Google's crawler, the serialized HTML content found (after JavaScript executed), and any errors encountered during rendering."
Rendering on the Web
The theme fully complies with the above Google requirements for submitting content from sites and apps. By clicking on the following links you can see how Google's crawler displays the Elf theme homepage, a single category page and a single post page. Please refresh the test to see the actual result!
Elf - WordPress REST API Theme is designed in the most simplified way, and can therefore be used as a starting point by anyone who has basic HTML5, CSS3 and JavaScript skills.
The Theme is accompanied by detailed documentation and has a semantic and validated code.
You can create your WordPress site or web application using only WordPress as CMS /bacк-end/ without any PHP knowledge.
Any programming language that can use HTTP queries and interpret JSON, can interact with WordPress through the REST API.
We have chosen the most popular and most common - JavaScript.
Elf - WordPress REST API Theme loads premade HTML5 template files which using vanilla JavaScript retrieve data from the database.
The Theme is using the built-in WordPress routes and endpoints. Only one point has been added- to access the WordPress menu. This way, most of the processing is done in the browser, without unnecessary requests to the server.
WordPress 4.7 comes with REST API endpoints for posts, comments, terms, users, meta, and settings that are built in. There is no need for plugins to perform these roles.
The database queries return result as JSON file processed in the browser by JavaScript. In that way, retrieving information from WordPress is happening a lot faster.
The external JavaScript and CSS files are loaded after the browser interprets the HTML pages, and do not slow down loading.
Elf - REST API WordPress Theme is not a Single Page Application. All HTML files exist on the server.
Elf is built using a semantic and W3C validated HTML5 code. The Title and Meta description of each document is loaded in accordance with WordPress Title and Meta description, or according to the title of the page, the category, the tag or the post.
The Theme uses "Mobile First".
Each basic function of the theme is executed by plain JavaScript code, which is placed in a separate file. These files may or may not be included in the theme depending on the desired functionality.
There is also an option where several JavaScript files are merged into one to reduce the requests to the server and further increase the performance of the theme.
Elf - WP REST API Theme works with Google Chrome, Mozilla Firefox, Opera, Internet Explorer and Edge, and all browsers that support JavaScript.
Queries to the WP REST API are processed through AJAX and support the old versions of Internet Explorer.
This starter theme also works on all modern mobile browsers.
The new WordPress REST API code has been verified by many Security specialists.
The information available through the WordPress REST API is now disposable to the public, both from the website itself and via RSS. All you have to do is use the latest version of WordPress.
Version 1.1 of Elf - WP REST API Theme is free and can be downloaded, redistributed and / or modified under the terms of the GNU Lesser General Public License as published by the Free Software Foundation.
This starter theme will have long-term support, development and refinement by our team.
This starter Theme works with WordPress 4.7 (and latest versions), as the WP REST API is built-in and fully integrated. The theme does not use any rest api plugins.
Elf - WP REST API Theme has been intentionally created with minimal CSS3 to show its functionality.
The Elf theme is built entirely using HTML5, CSS3 and JavaScript. Since its front-end is completely independent of WordPress, the Live Customizer cannot be used. Therefore, you need to use CSS3 and your imagination in order to adapt this starter theme to your needs.
Not all types of sites and applications require Comments, therefore they are not yet included in the Theme.
Our team is currently working on the development, and the Comments section will be included in the next version of the Theme.
Initial knowledge on HTML5, CSS3 and JavaScript is required in order to adapt the Elf theme to the specific requirements of a particular WordPress site or application. The premade Modules in the Theme can be rearranged so that the desired functionality and design are achieved.
The only limitation is the limits of your imagination.
Elf - The WP REST API Theme generates HTML5 files for each category, tag, or post that has been requested, which are stored on the server. When a large number of files are accumulated, they can be deleted without blocking the work of the Theme. This may result in a temporary decrease in website ranking in the search engines.
Elf - WP REST API starter Theme uses the REST API - embedded WordPress endpoints. Only one endpoint is added to retrieve and load the created WordPress menu. This PHP function should be added at the end of the functions.php file of the WordPress theme which is used.
Depending on the item selected in the menu, the sitebar, or in the link, the Theme creates using a PHP file with an extension .html a name corresponding to the menu and the related content (page, category, subcategory, tag, post or site search) and load it into the browser. The templates of HTML5 files are pre-rendered, and using the plain vanilla JavaScript code and the built in REST API, the WordPress database queries are executed. The result of the query is returned as a JSON file which is interpreted by JavaScript in the browser. This ensures the fast and reliable work of the theme.
The theme settings are stored in the file settings.json, that is read when starting the theme. At the end of the file index.html is included another file - index-ALL.js - the JavaScript code that ensures the functioning of the theme.
When starting the theme, the getSettings function reads the theme settings from the settings.json file. Then the getWPMenu function reads through the REST API the menu created by the WordPress back-end theme, and displays it in the nav class = "wp-menu" container of the HTML file. The recentPosts function reads through the REST API in the WordPress database and displays the last posts in section class = "content".
The sidebar function reads the most recently published posts, categories, and tags from the databases, and displays them respectively in the containers section class = "sidebar-recent posts", section class = "sidebar-categories" and section class="sidebar-tags". In addition, these scripts track and process the events related to the menu and the sidebar.
Let's imagine that a category titled "Travel to Europe" with identification of category ID = 10, is included in the menu or in the sitebar, and it is selected.
A script from getWPMenu function / or sidebar function / recognizes that this is a category, reads the category name and category ID, and starts category.php. The code in this file creates the travel-to-europe.html file, copies the category template file category-source.html into it, and assignes to the variable file the value of the category ID / file = 10 / and finally load the travel-to-europe.html in the browser.
travel-to-europe.html contains a JavaScript code that uses the REST API to retrieve information from the WordPress database for the posts in this category. travel-to-europe.html displays all posts belonging to this category, as well as all standard WordPress themes. If you select a specific post, such as "Travel to Italy", single.php is launched and similar to category.php, the code in it creates the file travel-to-italy.html and loads it into the browser.
A similar algorithm is also used if a tag or a page is selected from the menu / sidebar /.
The WordPress REST API provides API endpoints for WordPress data types such as posts, comments, terms, users, meta, and settings. These endpoints allow remote interaction with the site by sending queries and receiving response in JSON (JavaScript Object Notation) files.
This allows developers to create, read, and update WordPress content using JavaScript in client-side or external applications, not written in PHP.
The WordPress REST API is revolutionary for WordPress and is the biggest step in making WordPress a true framework for applications.
It creates the possibility for other sites and applications to extract and store WordPress content, whether they use it or not. As a result, WordPress as a content management system can be used with any framework or programming language.
The Built-in REST API allows WordPress to communicate to other technologies, but that's not all. Other sites and applications can use the REST API to dynamically load content from WordPress databases.
The WordPress REST API can be used to feed client-side JavaScript pages as part of a WordPress theme or plug-in, or to be used by front-end user who is completely separate from the back-end.
The WordPress REST API provides public data accessible to each client anonymously, as well as private data only available after authentication. This allows the creation of alternative dashboards to manage the site, as well as building single-page or other applications for the site stored with information from it.
The combination of REST and JSON creates a robust mechanism for creating powerful applications using WordPress as a back-end.
For example, mobile apps that require data exchange between the client (mobile device) and the server. Given the limitations of bandwidth used for data transfer, the use of JSON is a really good solution.
In the creation of traditional WordPress themes using PHP, different types of cycles and custom data requests were used.
Now, it is possible to separate the site or the application /front-end/ from WordPress and to develop them only by using HTML5, CSS3 and JavaScript.
Take a look at Elf - WP REST API Theme !
With two words: WordPress REST API creates new opportunities for web and applications developers like no other content management system.
Regardless of how its capabilities will be used, this is a new step forward in the development of websites and applications.
What will be its realization depends only on our imagination.