Hi. I'm a fork of the starter theme called _s. I'm a template theme meant to be the next, most awesome, WordPress theme out there. That's what I'm here for.
_s requires the following dependencies:
Move the /docker folder to the root of the project's installation and set parameters in the .env file.
-
Replace
PROJECT_NAMEwith the current project name. -
Replace
PROJECT_ABBRwith the project's abbreviation. This is used as DB table prefix. Default iswp. -
Replace
DEV_URL_WITHOUT_SCHEMAwith the project's dev URL withouthttp://. This should be the live URL withdev.instead ofwww.: dev.project.de -
Replace
STAGE_URL_WITH_SCHEMAwith the project's stage URL. -
Replace
LIVE_URL_WITH_SCHEMAwith the project's live URL. -
Maybe adjust
WORDPRESS_ROOTpath if the WordPress installation isn't project's root.
For further Docker installation see docker/README.md
Change the theme's name "_s" to something else (like, say, next-awesome-theme), 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:'next-awesome-theme'. - Search for
_s_to capture all the functions names and replace with:megatherium_is_awesome_. - Search for
Text Name: _sincss/style.scssand replace with:Text Name: Next Awesome Theme. - Search for
Text Domain: _sincss/style.scssand replace with:Text Domain: next-awesome-theme. - Search for
_s.potand replace with:next-awesome-theme.pot. - Search for
_s-to capture prefixed handles and replace with:next-awesome-theme-.
To start using all the tools that come with _s you need to install the necessary Node.js dependencies:
$ npm install_s comes with CLI commands tailored for WordPress theme development:
npm run watch: watches all SASS and JS files and recompiles them when they change.npm run build: compiles all SASS and JS files for production use.
You can easily create your own icon font.
Put all your svg icons in THEME/media/fonts/Icont/icons and run npm run icont:generate.
List all your icons (in alphabetical order) in /css/_variables.scss to create a map
to convenient access the content declaration of the icons: e.g. map-get($Icont, ICON_NAME);
THEME/media/fonts/Icont/icons/README.md
Docker WordPress installation comes with xdebug.
Further you can test on your page on mobile device:
- Enable USB-Debugging on your phone. For Firefox also enable Remote debugging via USB in your phone's Firefox' settings.
- Connect your phone to your laptop.
- Go to chrome://inspect#devices on your Chrome (on the laptop) ... or about:debugging on your Firefox (on the laptop)
If you open a page on your phone (in the corresponding browser) you can debug the source-code.
- Phone and Laptop must be in the same network.
- Find your Laptop's IP-address.
- Change WordPress-URLs in database to this IP-address (with http:// in front)
- Open browser on your phone and enter the IP-address.
Caution
Be aware that your IP-address can change when reconnecting to your network! ... so maybe consider always assigning the same IPv4 address to your laptop via router.
For debugging itself follow the steps from Stage/Live.
_s comes packed with a bunch of CSS, JS and PHP helpers. For further information see files itself.
Caution
Never ever change anything in the utilities folder! This folder is used cross-project and should be updated from time to time. All changes would be overridden. Please contact the administrator if you discover problems or have ideas for improvement.
| File | What does it do |
|---|---|
| _currentColor-opacity.scss | Apply opacity to currentColor. |
| _fluid.scss | Calculate responsive values. |
| _hexAlpha.scss | Hexadecimal RGBA notation. |
| File | What does it do |
|---|---|
| _breakpoints.scss | Get breakpoints (from $breakpoints) and media queries. |
| _dir.scss | Wrap CSS especially for ltr or rtl direction. |
| _loader.scss | Pseudo loading animation. |
| _pseudons.scss | Pseudo element icons. |
| _px2rem.scss | Convert px value to type rem. |
| _scrollwithoutbars.scss | Hide scrollbars but keep functionality. |
| _sr-only.scss | Hide element on all devices except screen readers. |
| File | What does it do |
|---|---|
| alter.js | Equivalent to WP's apply_filter()/add_filter(). |
| behaviours.js | Wrapper for functions to be called grouped. |
| BREAKPOINTS.js | Check widths according to theme's breakpoints. |
| cache.js | Cache values as cookie or in localStorage. |
| custom-width.js | Custom widths from classes. |
| external-links.js | Open external links in new window. |
| helpers.js | ... |
| in-viewport.js | Check if element is in viewport. |
| inline-svg.js | Replace SVG image with actual SVG code. |
| Library | What does it do |
|---|---|
| Air Datepicker | Datepicker UI. |
| autosize | Autosize <textarea> and <input>. |
| Custom-select | Custom <select> creation. |
| GSAP | Animate anything. |
| lottie-web | JSON animations rendered natively. |
| Pjax | Use AJAX to deliver a fast browsing experience. |
/utilities/inc/ |
What does it do |
|---|---|
| dev | Frontend info panel for development. |
| image-orientation | Add orientation class (landscape, square, portrait) to images. |
| post-edit-link | Add post edit link to title. |
| security | Security features. See BE dashboard. |
| video | Extend embed_oembed_html. |
| Extension | What does it do |
|---|---|
| accordion | Gutenberg Block. |
| aspect-ratio | Dynamic aspect ratio for images. |
| bodyclass | Setting to add html/body/article classes. |
| breakpoint | Set width classes according to theme's breakpoints. |
| data-href | Link any element. Accessibility ready. |
| hide | Hide elements for mobile/table/desktop screen size. |
| posts-list | Block for post teaser grid. |
| title | Hide Title option. Add Subtitle. |
- Remove example post.
- Disallow comments in
/wp-admin/options-discussion.php. - Set permalink structure to Post name in
/wp-admin/options-permalink.php. - Clear sidebar widgets in
/wp-admin/widgets.php. - Create 2 menus. One for main menu (navigation) and one for footer. See
/wp-admin/nav-menus.php.
Find further theme settings (Pjax, ...) in customizer.
Now you're ready to go! The next step is easy to say, but harder to do: make an awesome WordPress theme. :)
Happy coding and good luck!