GithubHelp home page GithubHelp logo

docs's Introduction

Timber 2.0

By Jared Novack (@jarednova), Lukas Gächter (@lgaechter), Nicolas Lemoine (@nlemoine), Erik van der Bas (website), Coby Tamayo (@cobytamayo), Upstatement and hundreds of other GitHub contributors:

PHP unit tests Coverage Status Scrutinizer Code Quality Latest Stable Version !Financial Contributors

⚠️ Important information about the Timber plugin ⚠️

With the release of Timber 2.0, Composer is the only supported install method. We are unable to continue releasing or supporting Timber as a plugin on WordPress.org. We advise everyone to switch to the Composer based install of Timber 1 as a first step as soon as possible. If you need PHP 8.2 support you will have to switch to Timber 2.0.

For more information and a list of additional resources, please visit this discussion.

What is Timber?

Because WordPress is awesome, but The Loop isn’t.

Timber helps you create fully-customized WordPress themes faster with more sustainable code. With Timber, you write your HTML using the Twig Template Engine separate from your PHP files.

This cleans up your theme code so, for example, your PHP file can focus on being the data/logic, while your Twig file can focus 100% on the HTML and display.

This is what Timber's .twig files look like (from this Hello World example)

{% extends "base.twig" %}

{% block content %}
  <h1 class="big-title">{{ foo }}</h1>
  <h2 class="post-title">{{ post.title }}</h2>

  <img src="{{ post.thumbnail.src }}" />

  <div class="body">
	{{ post.content }}
  </div>
{% endblock %}

Once Timber is installed, it gives any WordPress theme the ability to take advantage of the power of Twig and other Timber features.

Documentation


Installation

Follow the Installation Guide for how to install Timber using Composer.

What Now?

Setup the Timber Starter Theme. Once you have that installed in your WordPress setup, continue reading the Getting Started guide to Themeing.

Timber’s mission

Timber is a tool for developers who want to translate their HTML into high-quality WordPress themes through an intuitive, consistent and fully-accessible interface.

  • Intuitive: The API is written to be user-centric around a programmer's expectations.
  • Consistent: WordPress objects can be accessed through common polymorphic properties like slug, ID and name.
  • Accessible: No black boxes. Every effort is made so the developer has access to 100% of their HTML.

What does it look like?

Nothing. Timber is meant for you to build a theme on. Like underscores it comes style-free, because you're the style expert. Instead, Timber handles the logic you need to make a kick-ass looking site.

Who is it good for?

Timber is great for any WordPress developer who cares about writing good, maintainable code. It helps teams of designers and developers working together. At Upstatement we made Timber because while our entire team needs to participate in building WordPress sites, not everyone knows the ins-and-outs of the_loop(), codex and PHP (nor should they). With Timber your best WordPress engineer can focus on building the .php files with requests from WordPress and pass the data into .twig files. Once there, designers can easily mark-up data and build out a site's look-and-feel.

Should I use it?

Timber is MIT-licensed, so please use in personal or commercial work. Just don't re-sell it. Timber is used on tens of thousands of sites (and tons more we don't know about)

Timber 1

You can find the code for Timber 1 on the 1.x branch and read the Timber 1 documentation over here.

Links

Related & Official Projects

  • Twig The template language used by Timber.
  • Timber Starter Theme The "_s" of Timber to give you an easy start to the most basic theme you can build upon and customize.
  • wp-i18n-twig WP CLI Command to grab translatable strings from Twig files.
  • Timber Debug Bar Adds a debug bar panel that will show you which template is in-use and the data sent to your twig file.

Related Timber Projects

Projects that use Timber

  • Branch Bootstrap 3 + Timber = Branch starter theme!
  • Flynt a component based WordPress starter theme built on Timber and ACF Pro
  • Gantry5 a framework for theme development
  • Hozokit a component based starter theme
  • Juniper Starter pack that incorporates Timber and Bedrock
  • Seedling a starter theme using Bootstrap 4

Helpful Links

Reporting Security Issues

To disclose a security issue to our team, please submit a report via GitHub.

Support

Please post on StackOverflow under the "Timber" tag. Please use GitHub issues only for specific bugs, feature requests and other types of issues.

Contributing & Community

We love PRs! Read the Contributor Guidelines for more info. Say hello, share your tips/work, and spread the love on Twitter at @TimberWP.

Sponsor us

Since 2013 our goal at Timber is to create a library to that helps you create fully-customized WordPress themes faster with more sustainable code.

Through the collaborative efforts of both our dedicated team and countless contributors, we have invested numerous hours in maintaining and enhancing Timber. To keep doing that, we rely on the invaluable support of our sponsors.

Are you a WordPress pro or part of an agency who relies on Timber? Keep the magic alive by becoming a sponsor! By becoming a sponsor, you contribute to the continuous maintenance and enhancement of Timber, ultimately benefiting developers worldwide.

Gold Sponsors

Our backers

Documentation

The Official Documentation for Timber is generated from the contents of this repository:

docs's People

Contributors

aj-adl avatar alexwoollam avatar gchtr avatar itshall avatar jarednova avatar johnkeough avatar levdbas avatar stephalee avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

docs's Issues

Improve pagination documentation

I just posted to SO regarding issues I was having setting up pagination for a custom post-type template with Timber. I ended up figuring out a solution, but I have no idea whether it's idiomatic, good, bad, fill-in-the-blank. If someone could have a look at what I did, I'd appreciate it. Also, I'd also be happy to do a PR for the pagination page, if that makes sense. Thanks.

A couple typos

I'm using Timber on two new site builds, and am absolutely in love. In browsing the docs, I've noticed a couple typos. I just thought I'd point them out here.

https://timber.github.io/docs/getting-started/

  • Page title is 'Getting-starteds', should probably be 'Getting started'?
  • There is a duplicate link, misspelled, for Theming (Themeing)

That's all. Thanks for building Timber!

Deploy docs via github actions.

Is your feature request related to a problem? Please describe.

The docs are now deployed ad-hock when the need occurs. Ideally you would deploy the docs after every change in the /docs/ directory of the Timber main repo.

Describe the solution you’d like

Create a github action that does the following:

  • Checkout timber/timber in a directory
  • Checkout timber/docs in another directory
  • Run the build process
  • Deploys the artifacts of that build to Github pages.

At first this could be a manual trigger from the docs repo but we could automate that even further so that the action is triggered when in the main timber branch a commit is merged that changes the docs.

If this all works we could delete the content, docs and build folder from the repo since these are artifacts anyway.

Documentation colors contrast

Is your feature request related to a problem? Please describe.

Reading white text on black background is extremely difficult and hard on the eye.

Describe the solution you’d like

Could you please change the colors or provide a colors switch? I think the documentation was presented black on white in the past.

References Section Broken

Seeing an issue where the references section will not load

https://timber.github.io/docs/reference/

Also on this section seeing the following error

https://timber.github.io/docs/reference/timber-post/#category

Warning: PHP Startup: Unable to load dynamic library ‘/usr/local/php5/lib/php/extensions/no-debug-non-zts-20160303/apcu.so’ - dlopen(/usr/local/php5/lib/php/extensions/no-debug-non-zts-20160303/apcu.so, 9): Symbol not found: _zend_signal_globals Referenced from: /usr/local/php5/lib/php/extensions/no-debug-non-zts-20160303/apcu.so Expected in: flat namespace in /usr/local/php5/lib/php/extensions/no-debug-non-zts-20160303/apcu.so in Unknown on line 0

Error on the theming page?

On this page: https://timber.github.io/docs/getting-started/theming/

it shows this code snippet:
image

but when I downloaded the starter theme those files are found at
wp-content/themes/{timber-starter-theme}/views/single.twig

Just wanted to check and see if I'm missing anything here, because I spent about 30 minutes rewriting the example file because the /templates directory doesn't exist on the theme.

Mobile menu not opening after navigating between pages.

Bug description

After the first navigation to another page on a mobile device the mobile menu doesn't work anymore. It requires a full page reload to get the menu to work again. Upon closer inspection I found out that there is no more event binded to .js-menu-open after the initial navigation.

Browsers:

  • Chrome desktop/safari
  • Firefox desktop/safari

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.