Skip to content

Theme Structure

Ivan edited this page Aug 18, 2022 · 8 revisions

OUTODATED DOCUMENT. WILL BE UPDATED SOON.

themes/starter/   # → Root of Starter theme
├── assets/                                 # → Theme assets: css, js, svg icons
│   ├── js/                                 # → Scripts
│   │   ├── blueimp/                        # → Fileuploader plugin
│   │   ├── modules/                        # → Custom script sources
│   │   │   ├── archive.js                  # → Filter/pagination ajax scripts
│   │   │   ├── comment.js                  # → Script for comments
│   │   │   ├── common.js                   # → Different common functions
│   │   │   ├── home_page.js                # → Custom homepage tpl scripts
│   │   │   ├── menus.js                    # → Menus prototyping scripts
│   │   │   ├── recaptcha.js                # → Recaptcha
│   │   │   └── single_product.js           # → Single product page functions
│   │   ├── iosPreloadFix.js                # → Bugfix for replace 'preload' into 'stylesheet' in <link>
│   │   ├── list_plugins.js                 # → Collect plugins from node_modules/
│   │   └── list_scripts.js                 # → Collect files from js/modules/
│   ├── scss/                               # → Styles
│   │   ├── theme/                          # → All scss custom files
│   │   │   ├── components/                 # → Components
│   │   │   |   ├── _carousel.scss          # → Carousels
│   │   │   |   ├── _components.scss        # → Collect file
│   │   │   |   ├── _footer.scss            # → Footer
│   │   │   |   ├── _header.scss            # → Header
│   │   │   |   ├── _minicart.scss          # → Default woo widget minicart
│   │   │   |   ├── _modal.scss             # → Modal
│   │   │   |   └── _wishlist.scss          # → TI wishlist plugin styles
│   │   │   ├── mixins/                     # → Mixins
│   │   │   |   ├── _ellipsis.scss          # → Ellipsis mixin (i.e. 3 dots at the end ...)
│   │   │   |   ├── _flex_align.scss        # → Flex align mixin - widely used
│   │   │   |   ├── _img_item.scss          # → Make image centered and limited inside box
│   │   │   |   └── _mixins.scss            # → Collect files
│   │   │   ├── pages/                      # → Pages
│   │   │   |   ├── _home.scss              # → Custom homepage tpl styles
│   │   │   |   ├── _pages.scss             # → Collect file
│   │   │   |   └── _support.scss           # → Support pages styles (like FAQ)
│   │   │   ├── snippets/                   # → Snippets
│   │   │   |   ├── _forms.scss             # → Form styles
│   │   │   |   ├── _images.scss            # → Image box classes for limit image size and object-fit
│   │   │   |   ├── _list.scss              # → Flex lists (for menus, social lists etc)
│   │   │   |   ├── _menus.scss             # → Menu prototyping styles
│   │   │   |   ├── _pagination.scss        # → WooCommerce pagination
│   │   │   |   ├── _scrollup.scss          # → Scrollup button
│   │   │   |   ├── _select2.scss           # → Select2: default woo component - used on checkout, account
│   │   │   |   ├── _snippets.scss          # → Collect file
│   │   │   |   └── _wp_accessibility.scss  # → Fork of twentyseventeen/style.css (2.0 Accessibility)
│   │   │   ├── woo/                        # → Woo
│   │   │   |   ├── _account.scss           # → Account pages
│   │   │   |   ├── _comment.scss           # → Comment
│   │   │   |   ├── _filters.scss           # → Filter - archive page
│   │   │   |   ├── _product_item.scss      # → Product item
│   │   │   |   ├── _rating.scss            # → Rating
│   │   │   |   ├── _single_product.scss    # → Single product styles
│   │   │   |   └── _woo.scss               # → Collect file
│   │   │   ├── _common.scss                # → Common styles
│   │   │   └── _variables.scss             # → Bootstrap customization
│   │   ├── plugins.scss                    # → Plugin's modules (bootstrap & slick by default)
│   │   ├── styles.scss                     # → Custom modules
│   │   └── wp_admin.scss                   # → Styles for wordpress admin
│   └── svg-icons.svg                       # → Svg icons - used for decor graphics in theme (i.e. not content)
├── inc/                                    # → PHP logic
│   ├── acf-json/                           # → Autogenerated ACF
│   ├── woocommerce/                        # → WooCommerce logic
│   │   ├── comment/                        # → Comment
│   │   │   ├── comment-backend.php         # → Comment logic
│   │   │   ├── comment-customizer.php      # → Customizer comment settings
│   │   │   └── comment.php                 # → Comment functions
│   │   ├── filter.php                      # → Filter functions
│   │   ├── upsell-related.php              # → Upsell-related product
│   │   └── woocommerce.php                 # → Woo functions
│   ├── assets.php                          # → Manage assets
│   ├── customizer.php                      # → Customizer features
│   ├── image.php                           # → Image functions
│   ├── menu.php                            # → Menu functions
│   ├── recaptcha.php                       # → Google recaptcha
│   ├── tiny-mce-advanced.php               # → WYSIWYG settings, improvements like font-family
│   └── twentyseventeen-functions.php       # → Twentyseventeen forks: theme setup, starter_get_svg
├── templates/                              # → Page templates
│   ├── page-home.php                       # → Home page template
│   └── page-support.php                    # → Support page template
├── woocommerce/                            # → WooCommerce/TI wishlist ovveride templates
│   ├── loop/                               # → Loop
│   │       ├── add-to-cart                 # → Add to cart
│   │       └── orderby.php                 # → Orderby
│   ├── single-product/                     # → Single product
│   │   │   ├── add-to-cart/                # → Add to cart
│   │   │   |   └── variation-add-to-cart-button.php  # → Variation
│   │   │   ├── related.php                 # → Related products
│   │   │   └── up-sells.php                # → Upsells
│   ├── archive-product.php                 # → Archive
│   ├── content-widget-price-filter.php     # → Price filter
│   ├── product-searchform.php              # → Search form
│   ├── single-product.php                  # → Single product
│   └── ti-wishlist-product-counter.php     # → TI wishlist plugin counter
├── woocommerce-custom/                     # → Custom additional templates
│   ├── comment/                            # → Comment
│   │   ├── comment-form.php                # → Comment form
│   │   ├── comment-image-modal.php         # → Comment image modal (single page)
│   │   ├── comment-item.php                # → Comment item (single page)
│   │   └── comment-section.php             # → Whole comment section on single page
│   ├── global/                             # → Different global template parts
│   │   ├── product-item.php                # → Product item
│   │   └── rating.php                      # → Rating
│   └── single-image-modal.php              # → Single image modal template
├── 404.php                                 # → 404 page template
├── config.js                               # → Configs for gulpfile.js
├── footer.php                              # → Footer template
├── functions.php                           # → Theme functions
├── gulpfile.js                             # → Gulp tasks
├── header.php                              # → Header template
├── index.php                               # → Theme default index file
├── package.json                            # → Node.js dependencies and scripts
├── page.php                                # → Default page template
├── screenshot.jpg                          # → Theme screenshot for WP admin
└── style.css                               # → Theme meta information
Clone this wiki locally