Skip to content

My customizations to the _s theme to make it better for a hybrid theme that embraces the block editor.

Notifications You must be signed in to change notification settings

mrwweb/hybrid-starter-theme

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

{Site Name} Theme

A theme supporting the block editor based on _s but with a tremendous number of changes 😃.

See Also

There are other README.md files in this theme in specific folders where explanations of rationale and structure are useful. e.g. src/scss/blocks/ describes when to make a partial for a block and when to compile it into the main sheet

Quick Start

Clone or download this repository, change its name to something else, and then you'll need to do a six-step find and replace on the name in all the templates.

  1. Search for '_mrw' (inside single quotations) to capture the text domain and replace with: 'theme-prefix'.
  2. Search for "_mrw" (double quotes) to capture phpcs ruleset and replace with "theme-previx"
  3. Search for _mrw_ to capture all the functions names and replace with: theme_prefix_.
  4. Search for _mrw (with a space before it) to capture DocBlocks and replace with: Theme_Prefix. {{< // >}}
  5. Search for _mrw- to capture prefixed handles and replace with: theme-prefix-.
  6. Search for _MRW_ (in uppercase) to capture constants and replace with: THEME_PREFIX_.

Build Process

This site uses a SASS build process in order to support SASS with autoprefixer.

Edit CSS files in /src/

See package.json for details.

To install build from /wp-content/themes/{themename}/

$ npm install

To run build for development:

$ npm run watch

To build prefixed and minified CSS for release:

$ npm run build

Expected Icons in assets/images/svg

  • logo.svg for logo
  • Right-pointing arrow.svg for dropdown menu item indicator
  • search.svg for search button icon
  • Right-pointing chevron.svg for paging links
  • close.svg for menu toggle button
  • menu.svg for menu toggle button

Notable Changes from Underscores Theme

  • Lots of block-first development things including:
    • theme.json
    • Maps SASS variables to theme.json custom properties so theme.json is the "source of truth" (Notable downside of this technique: cannot perform SASS calculations on custom properties.)
    • Block-specific SCSS partials
    • Stylesheets for less-used blocks are enqueued per-block
    • Uses Block Template Parts instead of widgets for the footer and sidebar
    • PHP used to set a few default block variations
    • Example of block style ready to go in /inc/block-editor-config.php
    • Uses template parts instead of most template tags
  • Uses clicky-menus script for click-triggered dropdown navigation submenus
  • Custom toggle script for mobile menu and any other toggles you need
  • Fixes search forms not having unique IDs if more than one is on the page
  • Custom template tag to get SVGs (props @aurooba Inline SVG Helper function)
  • Expects usage of MRW Simplified Editor, The Events Calendar, Gravity Forms (affiliate link), and PublishPress Authors

Dev Environment

Autoformatting/linting:

  • .editorconfig
  • .stylelintrc.json
  • .eslintrc
  • .phpcs.xml.dist
  • prettier configured in package.json

Make sure your editor supports .editorconfig for some very basic coding standards autoformatting.

Other Notes

See /wp-content/mu-plugins/ non-theme related site changes. (not included in the Github repository)

Contact

Mark Root-Wiley https://MRWweb.com/contact

About

My customizations to the _s theme to make it better for a hybrid theme that embraces the block editor.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • PHP 54.6%
  • SCSS 41.5%
  • JavaScript 3.2%
  • Other 0.7%