Tangible Views

Tangible Views is a minimal theme based on Bootstrap.

Its purpose is to let you build entire sites with templates.

Unlike most themes, it only provides an empty HTML document, and loads templates from a views folder based on the URL request.

Loops and Logic documentation sites, such as this one, are all built with the Tangible Views theme.

Views folder

The folder containing templates is called the "views folder".

It can be in one of the following paths.

  • Folder at wp-content/views

  • Child theme

    Define the parent theme in style.css with property Template.

    /*
    Theme Name:  Site theme
    Description: Site-specific child theme
    Template:    tangible-views
    Version:     0.0.1
    */

    An advantage of this approach is that you can switch between multiple child themes. It also allows editing templates with the theme editor in the admin.

Routing

The views folders' structure corresponds to the requested URL routes.

For example, let's say the current page is at the following URL:

https://example.com/courses/test-course/lessons/test-lesson

Everything after the site URL is the route: courses/test-course/lessons/test-lesson.

The router searches for a matching folder, from the deepest level (most specific) up to the root.

  • courses/test-course/lessons/test-lesson
  • courses/test-course/lessons
  • courses/test-course
  • courses
  • Root folder

Any of the above folders can have index.html as the main template to render the page.

Template partials

Each page is built from a folder of one or more template partials.

The main one is index.html, which is the page body.

  • common.html

  • header.html

  • index.html

  • footer.html