/MyWPStarterTheme

My WordPress theme starter humbly light, complete, clear and secure

Primary LanguagePHPMozilla Public License 2.0MPL-2.0

MyWPStarterTheme

 

Introduction

My WordPress theme starter humbly light, complete, compatible and more secure as possible.

I follow BEM soon as possible accros the project (folder/file name, HTML/CSS class & id).

The goal is that the theme works in a regressive way. In any case the user can navigate normally in all conditions on all browsers (up to 2 versions back ≃ ie 10)

 

Includes

This project is base on underscores alias _s on GitHub, made by Automattic.

This project include my own gulp file adapted for WordPress theme developement.

 

Usage

All you need to edit is in _src/ folder.

Commandes

npx gulp

When developing, use browser sync to speed up your productivity. It'll compile the scss, prefixes it, quickly optimize images, minify scripts and copy PHP files to the good folder.

npx gulp build

Optimize your project before upload it ! It'll compile the scss, prefixes it, better optimize images (with an acceptable lossy compression), minify scripts and copy PHP files to the good folder.

npx gulp clean

For any reason you what to clean-up the project by delete build files. It will clear caching and delete all build files to just keep essential files and sources.

I prefer to use package locally so I use npx to execute gulp. If you prefer to call gulp directly, install it globally : npm i -g gulp

 

Installation

  1. After duplicate the project use refactor fonction to change MyWPStarterTheme and mywpstartertheme in all files to change the name of your theme.
    ⚠ Be careful to respect the case and keep mentions of MyWPStarterTheme in README & in style.scss (like License URI)⚠
  2. Edit _src/sass/style.scss first comment to change theme informations.
  3. Change the 'screenshot.png' image.
  4. Configure browserSync:
    Edit the file gulpfile.js at the root of the projet at lines 15 and 16 to setup the link and the port to use by browserSync like below.
const browserLink = "http://localhost/";
const browserPort = 3030;

Please refer to readme file of MyGulpFile project if you need to change gulp configuration

  1. Update node_modules with npm i
  2. You're done

 

Project architecture

I use my own project architecture to be able to separate source code and compile one.

📦MyWPStarterTheme
 ┣ 📂_src
 ┃  ┣ 📂assets
 ┃  ┃  ┃
 ┃  ┃  ┣ 📂fonts
 ┃  ┃  ┃  ┗ 📂fontFolder '> Here there are all the fonts are in their own folder'
 ┃  ┃  ┃
 ┃  ┃  ┗ 📂imgs
 ┃  ┃     ┣ 📂matrix
 ┃  ┃     ┃  ┣ 📂icons
 ┃  ┃     ┃  ┃  ┗ 📜 '> here there are all matrix icons alternatives'
 ┃  ┃     ┃  ┃
 ┃  ┃     ┃  ┣ 📂illustrations
 ┃  ┃     ┃  ┃  ┗ 📜 '> here there are all matrix illustrations alternatives'
 ┃  ┃     ┃  ┃
 ┃  ┃     ┃  ┗ 📂pictures
 ┃  ┃     ┃     ┗ 📜 '> here there are all matrix pictures'
 ┃  ┃     ┃
 ┃  ┃     ┗ 📂vector
 ┃  ┃        ┣ 📂icons-vector
 ┃  ┃        ┃  ┗ 📜 '> here there are all vector icons alternatives'
 ┃  ┃        ┃
 ┃  ┃        ┗ 📂illustrations-vector
 ┃  ┃           ┗ 📜 '> here there are all vector illustrations alternatives'
 ┃  ┃
 ┃  ┣ 📂js
 ┃  ┃  ┣ 📂modules-scripts
 ┃  ┃  ┃  ┗ 📜 '> here there are all scripts use multiple times over the theme'
 ┃  ┃  ┃
 ┃  ┃  ┗ 📂pages-scripts
 ┃  ┃     ┗ 📂pageFolder '> here there are all scripts use only one times for on specific page groupes by pages in directory'
 ┃  ┃
 ┃  ┣ 📂php
 ┃  ┃  ┣ 📂inc
 ┃  ┃  ┃  ┗ 📂template-parts
 ┃  ┃  ┃     ┗ 📜 '> here there are all template-parts WP theme'
 ┃  ┃  ┃
 ┃  ┃  ┣ 📂modules-php
 ┃  ┃  ┃  ┗ 📜 '> here there are all PHP code use multiple times over the theme'
 ┃  ┃  ┃
 ┃  ┃  ┣ 📂page_templates
 ┃  ┃  ┃  ┗ 📜 '> here there are all page templates for WP theme'
 ┃  ┃  ┃
 ┃  ┃  ┗ 📜 '> here there are all standard WP pages, like index.php'
 ┃  ┃
 ┃  ┗ 📂sass
 ┃     ┣ 📂backoffice-style
 ┃     ┃  ┗ 📜 '> here there are all style for backoffice (compiled in admin.css style sheet)'
 ┃     ┃
 ┃     ┣ 📂elements-style
 ┃     ┃  ┗ 📜 '> here there are all style applied on "elements" use multiple time over the theme, like footer / links etc...'
 ┃     ┃
 ┃     ┣ 📂modules-style
 ┃     ┃  ┗ 📜 '> here there are all style used to implement fonctionnalitied, like accessibility or normalize'
 ┃     ┃
 ┃     ┣ 📂templates-style
 ┃     ┃  ┗ 📜 '> here there are all style sheet for each page, use for specific style on only one page'
 ┃     ┃
 ┃     ┣ 📂variables-style
 ┃     ┃  ┗ 📜 '> here there are all SASS variables, like colors'
 ┃     ┃
 ┃     ┣ 📜admin.scss '> this file is import all necessary for style backoffice of WP'
 ┃     ┗ 📜style.scss '> this file import all necessary style'
 ┃
 ┣ 📜 .gitattributes
 ┣ 📜 .gitignore
 ┣ 📜 CHANGELOG.md
 ┣ 📜 gulpfile.js '> this file comes with [my own gulp file](https://github.com/MrZyr0/MyGulpFile)'
 ┣ 📜 LICENSE.md
 ┣ 📜 NOTICE.md
 ┣ 📜 package-lock.json '> this file comes with [my own gulp file](https://github.com/MrZyr0/MyGulpFile)'
 ┣ 📜 package.json '> this file comes with [my own gulp file](https://github.com/MrZyr0/MyGulpFile)'
 ┣ 📜 README.md
 ┗ 📜 screenshot.png '> this file is the screenshot used by WP on theme selection'

 

Roadmap

Please check [Unreleased] tag in changelog to read what's next.

 

Cool tools

In addition to the theme here are some interesting tools and/or that I use.
I have benchmarked many plugins to make this list. When there's only one plugin for a feature, it's because I've determined that it's the best (the most powerful, the most practical, the lightest).

Content

Development

Security

Search Engine Optimization (SEO)

Performance optimizations

Tools

Need testing

Here is mutiple plugins & tools, that could be implemented, for one usage that I need to test to determine the most interesting one.

 

Technology Watch

Here are some interesting sources and documentations that can help or inspire for web development (WP, accessibility, compatibility, best practices, etc.).

Repositories

Tutorials / Articles

Blogs

Tools / Documentation / Learning

Books

Legal informations

Other