onemohrtime / timber-starter-theme

Base template for WordPress setup using Composer, ACF, Timber, and SCSS

The Timber Starter Theme

The "_s" for Timber: a dead-simple theme that you can build from. The primary purpose of this theme is to provide a file structure rather than a framework for markup or styles. Configure your SASS files, scripts, and task runners however you would like!

Installing the theme

Follow the guide on how to Install Timber using the Starter Theme.

Then,

1. Rename the theme folder to something that makes sense for your website. You could keep the name timber-starter-theme but the point of a starter theme is to make it your own!
2. Activate the theme in the WordPress Dashboard under Appearance → Themes.
3. Do your thing! And read the docs.

The StarterSite class

In functions.php, we call new StarterSite();. The StarterSite class sits in the src folder. You can update this class to add functionality to your theme. This approach is just one example for how you could do it.

The src folder would be the right place to put your classes that extend Timber’s functionality.

Small tip: You can make use of Composer’s autoloading functionality to automatically load your PHP classes when they are requested instead of requiring one by one in functions.php.

What else is there?

• assets/ is where you can keep your front-end scripts, styles, or images. In other words, your Sass files, JS files, fonts, and SVGs would live here.
• views/ contains all of your Twig templates. These pretty much correspond 1 to 1 with the PHP files that respond to the WordPress template hierarchy. At the end of each PHP template, you’ll notice a Timber::render() function whose first parameter is the Twig file where that data (or $context) will be used. Just an FYI.
• tests/ ... basically don’t worry about (or remove) this unless you know what it is and want to.

Other Resources

• Twig for Timber Cheatsheet
• Timber and Twig Reignited My Love for WordPress on CSS-Tricks
• A real live Timber theme.

timber-starter-theme's Issues

Create section components out of regular components

After #2 is finished, have section components mimic "regular" components to save code duplication errors

Large Title

`$font-` variable conflict

$font-body is used in two separate instances (noticed on One Anothering website)

Add FitText.js as an ES6 dependency

Repo: https://github.com/adactio/FitText.js

Add all section components as their own component

Update Testimonial component & section

Maybe something like:

{% if testimonials %}
    <div class="c-testimonials__quotes">
        {% for testimonial in testimonials %}
            {% include '_components/testimonial.twig' with {
                params: {
                    text: testimonial.quote_text,
                    name: testimonial.quote_name,
                    photo: testimonial.quote_photo
                }
            } only %}
        {% endfor %}
    </div>
{% endif %}

{# -- Component Variables -- #}

{% set this = {
    text: params.text|default(null),
    name: params.name|default(null),
    photo: params.photo|default(null)
} %}

{# -- Component Template -- #}

<div class="c-testimonial">

    {% include '_elements/picture.twig' with {
        params: {
            src: get_image(this.photo),
            ratio: '1:1',
        }
    } only %}
    <h3 class="u-subheadline">{{ this.name }}</h3>
    <div class="u-wysiwyg">
        {{ this.text }}
    </div>

</div>