This WordPress theme is based on the popular _s
theme template.
===
- A modern workflow with a pre-made command-line interface to turn your project into a more pleasant experience.
- A just right amount of lean, well-commented, modern, HTML5 templates.
- A custom header implementation in
inc/custom-header.php
. Just add the code snippet found in the comments ofinc/custom-header.php
to yourheader.php
template. - Custom template tags in
inc/template-tags.php
that keep your templates clean and neat and prevent code duplication. - Some small tweaks in
inc/template-functions.php
that can improve your theming experience. - A script at
js/navigation.js
that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued infunctions.php
. - 2 sample layouts in
sass/layouts/
made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice insass/style.scss
. Note:.no-sidebar
styles are automatically loaded. - Smartly organized starter CSS in
style.css
that will help you to quickly get your design off the ground. - Full support for
WooCommerce plugin
integration with hooks ininc/woocommerce.php
, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled. - Licensed under GPLv2 or later. :) Use it to make something cool.
_s
requires the following dependencies:
Clone or download this repository, change its name to something else (like, say, megatherium-is-awesome
), and then you'll need to do a six-step find and replace on the name in all the templates.
- Search for
'_s'
(inside single quotations) to capture the text domain and replace with:'megatherium-is-awesome'
. - Search for
_s_
to capture all the functions names and replace with:megatherium_is_awesome_
. - Search for
Text Domain: _s
instyle.css
and replace with:Text Domain: megatherium-is-awesome
. - Search for
_s
(with a space before it) to capture DocBlocks and replace with:Megatherium_is_Awesome
. - Search for
_s-
to capture prefixed handles and replace with:megatherium-is-awesome-
. - Search for
_S_
(in uppercase) to capture constants and replace with:MEGATHERIUM_IS_AWESOME_
.
Then, update the stylesheet header in style.css
, the links in footer.php
with your own information and rename _s.pot
from languages
folder to use the theme's slug. Next, update or delete this readme.
To start using all the tools that come with _s
you need to install the necessary Node.js and Composer dependencies :
$ composer install
$ npm install
_s
comes packed with CLI commands tailored for WordPress theme development :
composer lint:wpcs
: checks all PHP files against PHP Coding Standards.composer lint:php
: checks all PHP files for syntax errors.composer make-pot
: generates a .pot file in thelanguages/
directory.npm run compile:css
: compiles SASS files to css.npm run compile:rtl
: generates an RTL stylesheet.npm run watch
: watches all SASS files and recompiles them to css when they change.npm run lint:scss
: checks all SASS files against CSS Coding Standards.npm run lint:js
: checks all JavaScript files against JavaScript Coding Standards.npm run bundle
: generates a .zip archive for distribution, excluding development and system files.
Now you're ready to go! The next step is easy to say, but harder to do: make an awesome WordPress theme. :)
This theme uses the self-assessment tool as a git submodule.
So, in order to pull the changes in the submodule, run:
git pull
git submodule update --recursive --remote --merge
cd eqafit-quiz-tool/
npm install
npm run build
These commands will pull and merge the changes, install any dependencies, build the submodule project, and prepare the .js
and .css
files.
Depending on the WordPress URL and the server configuration, we will need to "tell" to the self-assessment tool submodule where to locate the data.json
file.
So, we should create a .env.production.local
file (which is already set not to be tracked by Git), with the following contents:
#.env.production.local
VITE_REST_API_AUTH_USERNAME=
VITE_REST_API_AUTH_USERPASSWORD=
(Note to set the variable appropriately, this was just an example!)
Once you add the new .env.*
file, you must run npm run build
or npm run serve
again.