Modules

Powerful way to encapsulate features in theme.

Modules are the biggest separation to traditional WordPress themes that build on components introduced before. Modules package PHP, HTML, SASS, JS and images to “mini plugins” that operate inside the theme.

Why modules?

  1. Organization: Traditional WordPress theme file structure scatters each feature’s files into many locations and some of the logic is in shared files with other features. Modules separated the logic by the feature.
  2. Remove bloat: Make it as easy as possible to discard features from the starter to not carry any unneeded features just because removing them is cumbersome.
  3. Encourage standardization: Features could be pre-built or modules from previous projects could be used easily for new projects.
  4. Scalability: In big projects the codebase gets easily messy because the logic is scattered in so many places. With modules, adding a new module adds very little additional complexity to the whole project.

Default modules

This theme comes with selection of default modules that are listed here. Modules have their own readme files at /modules/module-name/docs/README.md.

A few modules are required or there are more changes needed than just deleting the module to remove it. You can of course replace them but they have some critical functions that need to be implemented.

ModuleRequiredFunction
/footer/YesTemplate part for footer
/header/YesTemplate part for header with menus and logo
/hero/YesTemplate part for hero section
/image/YesComponent to show responsive images
/svg/YesComponent to display SVG sprite icons
/teaser/YesComponent to display teaser cards
/background/Replacement for core/group block with background color, image or video options.
/buttons/Replacement for core/buttons block with ACF block and component.
/core-columns/Gutenberg columns block
/core-embed/Gutenberg embed blocks
/core-gallery/Gutenberg gallery block
/core-heading/Gutenberg heading block
/core-image/Gutenberg image block
/core-list/Gutenberg list block
/core-paragraph/Gutenberg paragraph block
/core-quote/Gutenberg quote block
/core-table/Gutenberg table block
/file/Replacement for core/file block and component
/gravity-forms/Base styles and settings for Gravity Forms + Gutenberg block
/lightbox/Shows gallery/image links to media file as lightbox
/list-terms/Component that shows post’s terms of given taxonomy
/media-text/Replacament for core/media-text block
/menu-social/Menu for social media channels with icons
/posts-nav-numeric/Shows numeric navigation for pagination
/search-form/Search form component
/share-buttons/Social share buttons component
/spacer/Replacement for core/spacer block

How to create and use modules?