Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wpperformance/wp-performance-theme
Theme of WP Performance WebSite
https://github.com/wpperformance/wp-performance-theme
gutenberg gutenberg-theme tailwindcss vitejs wordpress wordpress-theme
Last synced: 7 days ago
JSON representation
Theme of WP Performance WebSite
- Host: GitHub
- URL: https://github.com/wpperformance/wp-performance-theme
- Owner: wpperformance
- License: mit
- Created: 2022-08-24T10:09:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-10T15:12:43.000Z (2 months ago)
- Last Synced: 2024-10-30T11:46:36.649Z (20 days ago)
- Topics: gutenberg, gutenberg-theme, tailwindcss, vitejs, wordpress, wordpress-theme
- Language: PHP
- Homepage: https://wp-performance.com
- Size: 5.93 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WP Performance theme based on Press Wind FSE
Minimal starter theme for WordPress with Tailwind CSS and Vite JS for Full
Site Editing.
## Concept
This theme is build for work with gutenberg.
It's thinked for use concept of pattern.
A example of pattern is in ```patterns``` directory.
The theme.json is used for the settings of theme.
The fonts pass by the new WP font loader. Not by CSS or TailwindCSS.
## plugins required
For use ViteJS
- https://github.com/WP-Performance/presswind-plugin
## Plugin recommended
or disable lots of WP core functionality
- https://github.com/WP-Performance/deaktiver
## PHP/HTML files
This theme is developed for use Full Site Editing.
## Dependencies
- [PostCSS](https://postcss.org/)
- [TailwindCSS](https://tailwindcss.com/) - optional. You can use only postcss.
- [ViteJS](https://vitejs.dev/)
## Requirement
- Node JS (>18)
- Npm, yarn, pnpm or Bun !
## Quick Start
In the root of press-wind theme
Install dependencies
```
yarn or bun install
```
In your ```wp-config.php``` file, add :
```
# for dev
define('WP_ENV', 'development');
# for production
define('WP_ENV', 'production');
```
### With Vitejs, you have a dev server include. When you change a file, the browser reload the page.
## Scripts
Launch dev mode
```
yarn dev
```
Build the assets
```
yarn build
```
## Enqueue Scripts and Styles
The script and the style are automatically enqueued in theme.
Code present in functions.php
```php
/**
* init assets front
*/
if (class_exists('PressWind\PWVite')) {
\PressWind\PWVite::init(port: 3000, path: '');
/**
* init assets admin
*/
\PressWind\PWVite::init(
port: 4444,
path: '/admin',
position: 'editor',
is_ts: false
);
}
```
## CSS writing style
You must use ```@apply``` method for create the CSS style
It's better for reusability of your code and the readability.
Example :
```
.site-header {
@apply flex my-4 lg:my-10 lg:items-center lg:flex-row flex-col;
}
```
**But you can use the method by the class attribute, if you prefer. Be careful
to keep maintainable project.**
## Screenshot
