πŸ—ƒοΈFile System Structure

Compared to the default WP Rig, a significant portion of the file structure has been redesigned to provide a more flexible and convenient development environment.

On this page, we will provide an overview of the entire file structure of WP Rig, focusing only on the necessary folders and files. There may be more, but most of them are for production needs or are system files.

Here below you can take a wide look over folder structure.

πŸ†• - Folder added in WPRig Toolkit

Folder
Purpose

πŸ“‚ /assets/

πŸ“‚ /assets/css/src/

This is the folder for all CSS styles.

πŸ“‚ /assets/css/src/framework/

πŸ“‚ /assets/css/src/spacing-system/

πŸ“‚ /assets/css/src/typography-system/

πŸ“‚/assets/data/ πŸ†•

This folder is used for storing files that shouldn't require any changes, such as .json, .xml, videos and animated .svg files, to avoid the risk of breaking them during minification.

πŸ“‚ /assets/fonts/ πŸ†•

This folder is designated for storing your custom font files, such as .woff, .woff2, .ttf, .eot, and other commonly used web font formats.

πŸ“‚ /assets/images/src/

This is the folder for all images.

πŸ“‚ /assets/images/src/icons/ πŸ†•

Your icons which will be used for sprites generation. For now only SVG icons are used for SVG sprite generation.

πŸ“‚ /assets/js/

This is the folder for all JavaScript files.

πŸ“‚ /config/

This folder contains WP Rig configuration files. Please watch an official video to learn more about how to configure WP Rig.

πŸ“‚ /functions/

This is the place for storing parts of functions.php. For more information, see the Functions.php Guide.

πŸ“‚ /inc/

The folder contains all WP Rig components.

πŸ“‚ /inc/Toolkit_Components/ πŸ†•

This folder contains element-based components, which are responsible for creating or maintaining specific parts of your website, rather than site-wide features. For example, a lightbox plugin that is limited to images and galleries. For more information, please read about Elements.

πŸ“‚ /languages/

Folder for language template (.pot file) and theme translation.

πŸ“‚ /optional/

This folder contains optional .php files that you can use as templates.

πŸ“‚ /vendor-override/

Currently, these are just rules that override the default vendor style. In the future, there should be a solution for automatically overriding vendor files.

🎨 global.cssπŸ“‚ /vendor/

All third-party CSS styles. Should not be modified by you.

πŸ“‚ /data/πŸ“‚ /src/

This is the folder for all your data files like .json, .xml etc.

πŸ“ We prefer to create subfolders for better organizing data files.🚧 Currently, there is no optimization method implemented for data files. The output files will be identical copies of the original sources.πŸ“‚ /fonts/

This is the folder for your custom fonts. Why store fonts locally?

πŸ“‚ /images/

This is the folder for all images and icons.

πŸ“‚ /src/

All of the image files that are inside will be combined and compressed for the production theme.

πŸ“‚ /icons-svg/

This is the place for all of your icons.

πŸ“‚ /sprite/

This is the place for all of your .svg icons, which will be combined and used to create SVG Sprite file.

πŸ“‚ /js/

This is the folder for all JavaScript files.

πŸ“‚ /src/

All of the JavaScript files that are inside will be combined and compressed for the production theme.

global.js

elements-configuration.js

πŸ“‚ /vendor/

All third-party JavaScript styles. Should not be modified by you.

πŸ“‚ /template-parts/

This folder contains partial .php files that are used in your templates and for large global sections such as the header and footer.

πŸ“‚ /content/

File parts for content output.

πŸ“‚ /footer/

File parts for the footer.

πŸ“‚ /forms/

This is the folder for your forms. Extremely useful if you are using 3rd party forms (static forms, CRM forms).

πŸ“‚ /header/

File parts for the header.

πŸ“‚ /sections/

This is the folder for your custom sections and blocks.

Last updated