Skip to content

Commit

Permalink
refactor: reorganize twig templates
Browse files Browse the repository at this point in the history
- put entire document structure in base template
- move header and footer elements into partials
- move skip-to-content links into landmark area
- move menu to partials
- move base template into layouts folder
- path to base template
- move example page template out of pages folder
- delete unused image file
- delete unused header and footer files
- add documentation for views folder structure
  • Loading branch information
dustin-jw committed Oct 17, 2023
1 parent c9a9c78 commit ae4fb6d
Show file tree
Hide file tree
Showing 18 changed files with 99 additions and 129 deletions.
2 changes: 1 addition & 1 deletion docs/example-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ There have been a few examples added to the start theme. They're intended to be

- Files:
- `src/php/example-page-template.php`
- `src/php/views/pages/example-page.twig`
- `src/php/views/example-page.twig`
- [Docs](https://developer.wordpress.org/themes/template-files-section/page-template-files/)

## Example Sidebar (footer)
Expand Down
46 changes: 23 additions & 23 deletions docs/structure.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
Project Structure
=================
# Project Structure

All the files regarding editing the theme can be found in the `src` directory. Inside this directory are three sub-directories:

JavasScript (`js/`)
-------------------
## JavasScript (`js/`)

The `js/` directory holds our individual JavaScript files. These are concatenated via [Babel][babel] with the build. Tests will check that JavaScript follows Sparkbox's [linting standards][sb-eslint].

Sass (`scss/`)
--------------
## Sass (`scss/`)

The `scss/` directory holds our styles for the site which are written using [Sass][sass] and follows a modified [BEMIT][bemit] approach to naming and organizing. Tests will check that SCSS follows Sparkbox's Sass [linting standards][sb-stylelint].

PHP (`php/`)
--------------
The `php/` directory holds the PHP template files for the WordPress theme. Other core, non-php files are included here as well. It structured to have a “lean” `functions.php` and include functionality in the `inc` subdirectory. This directory was built off of the [Underscores Starter Theme][underscores]. Tests will check that PHP files follow the [WordPress Coding Standards][wpcs].
## PHP (`php/`)

The `php/` directory holds the PHP template files for the WordPress theme. Other core, non-php files are included here as well. It structured to have a “lean” `functions.php` and include functionality in the `inc` subdirectory. This directory was built off of the [Underscores Starter Theme][underscores]. Tests will check that PHP files follow the [WordPress Coding Standards][wpcs].

### PHP Subdirectories

- `inc/` - Includes directory, to keep the `functions.php` file clean. Some important files to note are:
- `shortcodes/*.php` - Add shortcodes for the content editor to use
- `helpers/*.php` - Add helper functions here, separated by purpose
- `theme-scripts.php` - Add CSS and JavaScript files here.
- `shortcodes/*.php` - Add shortcodes for the content editor to use
- `helpers/*.php` - Add helper functions here, separated by purpose
- `theme-scripts.php` - Add CSS and JavaScript files here.
- `views/` - [Twig][twig] is used to separate presentation from logic, and all `.twig` components can be found here. Some Twig extensions, notably [HTML Extension][html-extension] and [String Extension][string-extension] have been added to enhance templates with data URIs, class management, text manipulation, and ASCII-safe string transformations.

[babel]:https://babeljs.io
[node]:https://nodejs.org/en/
[sb-eslint]:https://github.com/sparkbox/eslint-config-sparkbox
[sb-stylelint]:https://github.com/sparkbox/stylelint-config-sparkbox
[wpcs]:https://github.com/WordPress/WordPress-Coding-Standards
[bemit]:https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
[twig]:https://twig.symfony.com/
[html-extension]:https://github.com/twigphp/html-extra
[string-extension]:https://github.com/twigphp/string-extra
[underscores]:https://underscores.me/
- `layouts` - Any twig templates that include the full document structure should go here. That includes the default `base.twig` template and any alternatives, such as for art-directed posts.
- `partials` - Twig templates for components or pieces of the page to be reused should go here.
- `shortcodes` - Twig templates for shortcodes should go here.

[babel]: https://babeljs.io
[node]: https://nodejs.org/en/
[sb-eslint]: https://github.com/sparkbox/eslint-config-sparkbox
[sb-stylelint]: https://github.com/sparkbox/stylelint-config-sparkbox
[wpcs]: https://github.com/WordPress/WordPress-Coding-Standards
[bemit]: https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
[twig]: https://twig.symfony.com/
[html-extension]: https://github.com/twigphp/html-extra
[string-extension]: https://github.com/twigphp/string-extra
[underscores]: https://underscores.me/
2 changes: 1 addition & 1 deletion src/php/example-page-template.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@
$context['post'] = $timber_post;

// Render HTML templates.
render_with_password_protection( $timber_post, 'pages/example-page.twig', $context );
render_with_password_protection( $timber_post, 'example-page.twig', $context );
17 changes: 0 additions & 17 deletions src/php/footer.php

This file was deleted.

11 changes: 0 additions & 11 deletions src/php/header.php

This file was deleted.

Binary file removed src/php/screenshot.png
Binary file not shown.
2 changes: 1 addition & 1 deletion src/php/views/404.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "base.twig" %}
{% extends "layouts/base.twig" %}

{% block content %}
<div class="obj-width-limiter">
Expand Down
26 changes: 0 additions & 26 deletions src/php/views/base.twig

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "base.twig" %}
{% extends "layouts/base.twig" %}

{% block content %}

Expand Down
32 changes: 0 additions & 32 deletions src/php/views/header.twig

This file was deleted.

2 changes: 1 addition & 1 deletion src/php/views/index.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "base.twig" %}
{% extends "layouts/base.twig" %}

{% block content %}
<div class="obj-width-limiter">
Expand Down
43 changes: 43 additions & 0 deletions src/php/views/layouts/base.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!doctype html>
<html {{ site.language_attributes }} class="no-js">
<head>
<meta charset="{{ site.charset }}"/>
<meta name="description" content="{{ site.description }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
{{ function('wp_head') }}
</head>
<body {{ body_class }}>
{{ function('wp_body_open') }}

{% include 'partials/header.twig' %}

<main id="main">
<article id="post-{{ post.id }}" class="post-type-{{ post.post_type }} {{ function('get_post_class')|join(' ') }}">
{% if post.title %}
<div class="obj-width-limiter">
<h1>{{ post.title }}</h1>
</div>
{% endif %}

<div class="obj-width-limiter cmp-post-body">
{# content block from child templates #}
{% block content %}
<div class="obj-width-limiter">
Sorry, no content
</div>
{% endblock %}
{% if sidebar_widget %}
<aside class="obj-width-limiter cmp-primary-sidebar">
{{ sidebar_widget }}
</aside>
{% endif %}
</div>
</article>
</main>

{% include 'partials/footer.twig' %}

{{ function('wp_footer') }}
</body>
</html>
8 changes: 4 additions & 4 deletions src/php/views/page.twig
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{% extends "base.twig" %}
{% extends "layouts/base.twig" %}

{% block content %}

<div class="obj-width-limiter">
{{ post.content }}
</div>
<div class="obj-width-limiter">
{{ post.content }}
</div>

{% endblock %}
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
</main>

<footer class="cmp-sticky-footer">
<div class="obj-width-limiter">
<p>
&copy;
{{ 'now'|date('Y') }}

<span aria-hidden="true">&nbsp;|&nbsp;</span>

<a href="{{ function('get_privacy_policy_url') }}">
Privacy Policy
</a>
</p>
{{ footer_widget }}
</div>
</footer>

{{ function('wp_footer') }}</body></html>
19 changes: 19 additions & 0 deletions src/php/views/partials/header.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<header>
<div class="obj-width-limiter">
<a class="cmp-skip-to-content" href="#main">Skip to content</a>
<a class="cmp-skip-to-content" href="#nav">Skip to navigation</a>
</div>

<div id="nav" class="obj-width-limiter">
{% block header %}
<div class="cmp-main-nav">
<div>
<a href="{{ site.url }}" class="cmp-main-nav__home-link" rel=" home">{{ site.name }}</a>
</div>
<nav class="cmp-main-nav__menu" aria-label="Main">
{% include "partials/menu.twig" %}
</nav>
</div>
{% endblock %}
</div>
</header>
File renamed without changes.
2 changes: 1 addition & 1 deletion src/php/views/single-example.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "base.twig" %}
{% extends "layouts/base.twig" %}

{% block content %}

Expand Down
8 changes: 4 additions & 4 deletions src/php/views/single-password.twig
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "base.twig" %}
{% extends "layouts/base.twig" %}

{% block content %}
<div class="obj-width-limiter">
{{ function('get_the_password_form') }}
</div>
<div class="obj-width-limiter">
{{ function('get_the_password_form') }}
</div>
{% endblock %}

0 comments on commit ae4fb6d

Please sign in to comment.