This is my personal theme boilerplate, initially based on _s, partly inspired by Twenty Seventeen, with lots of additional features.
The following is a non-comprehensive list of features in addition to everything that _s supports:
- Gutenberg supported
- Full Customizer support, mostly with JavaScript-powered live previews
- Very lightweight: No jQuery anywhere, only 1 CSS and 1 JavaScript asset to load in a regular request
- SVG icon set loaded in the footer, with an easy-to-use utility function to print icons in an accessible way
- Dynamic detection of post type support for different features and taxonomies
- Granular color control via the Customizer
- Customizer panel for content type options: For each post type, it can be individually decided whether information like date, author, taxonomies etc. should be displayed or not
- Support for either a full-width or wrapped layout (by calling
add_filter( 'super_awesome_theme_use_wrapped_layout', '__return_true' )
) - Customizer section for sidebar settings, with three sidebar modes:
- No Sidebar
- Left Sidebar
- Right Sidebar
- "Distraction Free Mode": Particularly useful for very focused pages (like a login page or a checkout page), the view is rendered with fewer distractions:
- No sidebar
- No footer widgets
- Alternative site navigation menu
- Templates:
- Full Width (no sidebar, regardless of global setting)
- Distraction Free (as described above)
- Account (page that is restricted to logged-in users)
- Login (shows a login form)
- Menus:
- Primary Menu
- Primary Menu (Distraction-Free)
- Social Links Menu
- Footer Menu
- Sidebars:
- Primary Sidebar
- Blog Sidebar (can be enabled/disabled)
- 4 Footer Widget Areas
- AJAX-powered comment submissions
- Accessible primary navigation with keyboard
- Maximum page width limited, and maximum content width limited further on pages with no sidebar, in order to keep line lengths readable
- Granular and organized template part files for easy tweaking / overriding in a child theme
- Solid attachment template support, including display of metadata
- Flexible whether template parts should be loaded per post type and/or post format
- Dedicated template part for comments
- Graceful fallback if minimum required WordPress version is not being used
- Easy-to-use Gulp workflow for linting and compiling assets
- ES6 JavaScript
- Reusable CSS classes for typical elements
- Editor style mimicking the frontend layout
- Styling of special multisite pages
wp-signup.php
andwp-activate.php
- Compliant with code and documentation standards
- Plugin support for the following:
This is a work in progress. A few of the above items may be incomplete still.
Minimum WordPress version: 4.7
To create your own theme, download this repository. For the next steps, let's assume your theme should be called Taco World
.
- Rename the directory to
taco-world
. - Open
gulpfile.js
and scroll to the bottom. - Replace every value in the
replacements
object with your new theme name or theme author data in the appropriate format. For example, replacemy-new-theme-name
withtaco-world
,MY_NEW_THEME_NAME
withTACO_WORLD
and so on. Replace the author name, email and website with your respective data. - Save the changes.
- Run
npm install
in the console. - Run
gulp init-replace
in the console. - Open
gulpfile.js
again and remove the entire bottom section that starts withINITIAL SETUP TASK
, save the file afterwards. - Check the
package.json
file. You might wanna update some details to your preferences. - Check the top of
gulpfile.js
, containing thetags
andconfig
objects. You might wanna update some details to your preferences. - Run
gulp build
once to compile everything.
Now you're good to go! One more thing: If you want to publish the theme on wordpress.org, it's recommended to remove the /languages
directory, plus set the config.domainPath
to false
and remove the pot
task in gulpfile.js
.
gulp sass
: Lints and compiles CSS/Sassgulp js
: Lints and compiles JavaScriptgulp img
: Compresses imagesgulp pot
: Refreshes POT filegulp readme
: Replaces the header and description in the readme with latest datagulp build
: Runs all of the above tasksgulp watch
: Watches file changes and automatically executes the above tasks and reloads the browser window (you have to call it likePROXY=mysite.test gulp watch
, passing the URL of your test site)
TODO: codeclimate.yml, PHPCS, PHPMD