Skip to content
This repository has been archived by the owner on Jan 1, 2023. It is now read-only.

Templates

Tyler Barnes edited this page Jan 5, 2019 · 3 revisions

The dropdown on the post and page edit screen is populated from a json file that WP gets from your git repo via API. This templates file is generated each time you run gatsby develop or gatsby build. This file lives at /wordsby/data/templates.json in your git repo. To sync your templates in WP, go to development -> sync templates. When your gatsby site is built, the page data has template data attached and the template that was selected in WP is used to build each gatsby page.

Template naming

Templates are named in WP by replacing underscores and dashes from the filename with spaces. template-name.js in gatsby becomes Template name in WP.

Template hierarchy

For the most part the WP template hierarchy is overkill. Wordsby just includes a few parts of a hierarchy to make dev easier. This will likely be expanded a bit as the project evolves.

Pages, posts, and custom post types template hierarchy

Using the default template in WP admin will cause wordsby to grab the src/templates/index.js file.

Setting another template from the dropdown will make wordsby check for src/templates/[template-name].js and fallback to src/templates/index.js.

Make sure you create a basic index.js to prevent your site from being broken by admins.

Single Page and Post type template hierarchy

To create a template for a post type, add it to src/templates/single/[post_type].js and set the post to use the default template. If there is nothing found there, Wordsby will use the default Gatsby template at src/templates/index.js. If you set your post to a template besides "Default Template" in wp admin, the hierarchy in the last section applies.

Archive page template hierarchy

To set up an archive page:

  • Go to the page/post that you want to make an archive
  • Check the archive metabox on the page or post you want to be an archive page
  • Set the posts per page, and post type in the same metabox.

Wordsby will look for src/templates/archive/[post_type_slug].js. If it isn't found, it will grab src/templates/archive/index.js.

Taxonomy archive template hierarchy

If you don't have a src/templates/taxonomy directory, Wordsby will not generate taxonomy archives or term pages.

If you have a taxonomy folder, Wordsby will look for src/templates/taxonomy/archive/[taxonomy_name].js. If it isn't found it'll grab src/templates/taxonomy/archive/index.js

If you're creating taxonomy archive or term pages, be sure to include an index.js to prevent your site from being breakable by admins.

Taxonomy term template hierarchy

The rules surrounding the taxonomy directory are the same as above.

If you have a taxonomy folder, Wordsby will look for src/templates/taxonomy/single/[taxonomy_name].js. If it isn't found it'll grab src/templates/taxonomy/single/index.js

Here's a directory overview of what you just read

├──src/
│   ├── templates/
│   │   ├── index.js
│   │   ├── home.js
│   │   ├── archive/
│   │   │   ├── index.js
│   │   │   ├── post.js
│   │   ├── single/
│   │   │   ├── page.js
│   │   │   ├── custom_post_type.js
│   │   ├── taxonomy/
│   │   │   ├── archive/
│   │   │   │   ├── index.js
│   │   │   │   ├── taxonomy_name.js
│   │   │   ├── single/
│   │   │   │   ├── index.js
│   │   │   │   ├── taxonomy_name.js
└────────────────────────────────