timber/starter-theme

New folder structure breaks `theme.link` and `theme.path`

fturcheti opened this issue · 11 comments

With the new folder structure, theme.link and theme.path point to the /theme folder and not to the theme root folder, and that feels wrong.

Previously:

  • theme.link would return http://example.org/wp-content/themes/my-timber-theme
  • theme.path would return /wp-content/themes/my-timber-theme

And now:

  • theme.link returns http://example.org/wp-content/themes/my-timber-theme/theme
  • theme.path returns /wp-content/themes/my-timber-theme/theme

I'm using Timber for the first time in the website I'm working on, so if I misunderstood something I'd love to get some feedback on this.

Also, as I like this idea of having the theme files in the /theme folder, I'm bypassing the issue I pointed by setting a context variable in my functions.php and using its value instead of calling theme.link:

$context['theme_uri'] = dirname( get_template_directory_uri() );

Good point.

I suggest you not to use an intermediate variable but explicit ones for e.g the static/ directory.
Only development files live in the theme root.

Thank you, Viktor.

I've set a global context variable static_dir pointing to static/ for the cases in which I need to link files that live in that folder.

And how would you fix the link below? It's currently broken in the starter-theme, right?

<link rel="author" href="{{ site.theme.link }}/humans.txt" />

I had to keep a context variable theme_dir for this specific case.

There are a plethora of ways we may go!

  1. Move humans.txt file to /theme
  2. Patch stuff in html-header.twig
  3. Make Timber provide a root path variable
  4. Make the starter-theme do the same

@jarednova

@szepeviktor is there an upside to the new structure? i spent my afternoon setting this up to play along with my gulp config and i cannot get it to work the way i want. i can't go up from the theme folder and it looks like i will have to compile into the theme/dist folder to get it to work.

AFAIK If you are compiling things like SASS into CSS - you should put all of that in the root, above theme/.

Thanks for the heads-up on this @fturcheti. The issue is definitely an unintended side effect of what we saw as a way to clean things up and improve the cleanliness of the organization.

What I'm thinking is that we version the prior structure as the 1.x version of the starter theme and this new org marks the beginning of the 2.x branch. This also will allow us to lean into the new features of 2.x w/o worrying that we're messing up the workflow of existing patterns and development expectations.

This is now set. Fans of the new organization can find it here: https://github.com/timber/starter-theme/tree/2.x

... this will become the default once 2.x is released. But in the meantime (esp. for WordPress.org deployments) the old familiar file stricture scheme reigns supreme!

@fturcheti My approach to this is probably very bad but it works… what I do is override link() by subclassing Timber\Theme inside of the Timber\Site subclass in my custom theme. I'm not really fluent with PHP and not really knowledgeable about Timber.

class Website extends Timber\Site
{
    public function __construct()
    {
        add_action('after_setup_theme', array($this, 'theme_supports'));
        add_filter('timber/context', array($this, 'add_to_context'));
        add_filter('timber/twig', array($this, 'add_to_twig'));
        add_action('init', array($this, 'register_post_types'));
        add_action('init', array($this, 'register_taxonomies'));
        parent::__construct();

        $theme = new class() extends Timber\Theme
        {
            public function link()
            {
                return dirname(get_stylesheet_directory_uri());
            }
        };
        $this->theme = $theme;
    }
…

then I override the global context:

public function add_to_context($context)
    {
        $context['theme'] = $this->theme;
        return $context;
    }
…

Why don't you introduce a new theme.something that points to the directory/URL of interest?
theme.assets 👉🏻 my-timber-theme/assets

@szepeviktor I guess your approach is way more sane and it makes sense.

I just wanted to try and see if I could make it work and also because in my mind {{ theme.link }}, {{ site.theme.link }}, {{ theme.path }} and {{ site.theme.path }} should logically return the link or the path of the theme's root folder and not wherever index.php and style.css are.

I guess the thing about putting those in a /theme/ subdirectory is fundamentally flawed and not the WordPress way but I like it this way…