Missing .twig files in wordpress theme editor

I just started learning timber. Timber uses twig as its templating engine.

This is great but I have a problem with displaying all .twig files in the theme editor. I’m using VS code for my code development so I have no problem viewing and accessing .twig files there.

My problem is with the built in wordpress theme editor.

Do you know of a way to show all the file/folder structure when using the theme editor? starting with displaying .twig files but would also be nice to see all file/folder structure including, vendor, composer.json etc…

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The thing you need to do is update the filter with the “allowed” editor file types.

Here’s what you’ll need for TWIG:

function add_custom_editor_file_types( $types ) {
    $types[] = 'twig';
    return $types;
}
add_filter( 'wp_theme_editor_filetypes', 'add_custom_editor_file_types' );

Of course, you can add any file type/extension you wish in the same manner. The editor UI will show the directory structure only where there are “editable” files.

EDIT:
Certain directories are excluded from being scanned for files, by default. One of these is vendor. This is likely because in some instances, the vendor dir will be huge and so loading and processing for this will have a cost associated with it.

To prevent vendor dir from being excluded, you can use the filter dedicated for that purpose:

function unexclude_theme_editor_dirs( $exclusions ) {
    // default exclusions: 'CVS', 'node_modules', 'vendor', 'bower_components'
    $unExclude = [ 'vendor' ];
    return array_diff( $exclusions, $unExclude );
}
add_filter( 'theme_scandir_exclusions', 'unexclude_theme_editor_dirs' );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0