This is a powerful WordPress Full Site Editing (FSE) theme designed to support advanced JavaScript and CSS customization for building modern, interactive, and highly customizable websites. The theme integrates Svelte, Alpine.js, TailwindCSS, and SCSS to enhance custom blocks and styles while allowing developers to easily create custom interactions and layouts.
This template asumes that you have ACF ( Advanced Custom Fields ) plugin installed. I'ts used to manage the blocks activation and to create custom Field Groups for each block.
To use this theme, you'll need to have Node.js and npm or yarn installed on your system.
Navigate into the themes folder:
cd wp-content/themes/
Clone this repository into your WordPress wp-content/themes/
directory:
git clone https://github.com/hitaboy/bend.git your-theme-name
Navigate into the new theme folder:
cd wp-content/themes/your-theme-name/
Install dependencies using Yarn:
yarn install
Activate the theme in WordPress:
Appearance > Themes
.By default bend is configured for development.
For local development, use Vite's development server. This will allow for live reloading and hot module replacement (HMR) for JS and CSS changes.
Start the development server:
yarn dev
Visit your WordPress site in the browser as usual. Vite will proxy and inject updates dynamically. Changes to Svelte components, Alpine.js code, SCSS, or Tailwind will immediately be reflected on the site without needing to reload.
When you're ready to deploy the theme, you can build the assets for production:
Run the build command:
yarn build
This will generate the optimized JS and CSS files in the dist/
folder, which will be automatically enqueued by WordPress when the site is in production mode.
This theme supports the creation of custom WordPress blocks. You can extend the theme by adding custom blocks that use Svelte, Alpine.js, TailwindCSS, and SCSS for advanced functionality and styling.
Create a new block folder in the src/blocks/
directory.
mkdir bend/blocks/my-custom-block
Inside your custom block folder, create the following files:
block.json
: Defines the block metadata.index.js
: Entry point for the block's JavaScript logic.style.scss
: SCSS file for block-specific styles.MyCustomBlock.svelte
: Svelte component for the block's frontend rendering.Register the block in src/blocks/index.js
:
import './my-custom-block';
Add the custom block styles and scripts to the WordPress build process, and they will be included automatically.
In your block.json
:
{
"apiVersion": 2,
"name": "mytheme/my-custom-block",
"title": "My Custom Block",
"category": "common",
"icon": "smiley",
"supports": {
"html": false
},
"editorScript": "file:./index.js",
"style": "file:./style.scss"
}
In your index.js
:
import MyCustomBlock from './MyCustomBlock.svelte';
// You can initialize Svelte for your block's functionality here.
const target = document.querySelector('.wp-block-mytheme-my-custom-block');
if (target) {
new MyCustomBlock({ target });
}
Each block can include custom JavaScript using Svelte or Alpine.js.
.svelte
component and register it within the block.Example for Alpine.js:
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<div x-show="open">This content will toggle.</div>
</div>
Each block can have its own SCSS file for custom styling. Additionally, TailwindCSS utility classes are available globally.
For example, in your style.scss
:
.my-custom-block {
@apply p-4 bg-gray-100 text-center; // Use Tailwind's @apply directive
}
The theme will automatically compile SCSS and TailwindCSS during the build process.
yarn dev
yarn build
src/blocks/
directory.Contributions are welcome! If you have ideas, feature requests, or find a bug, feel free to open an issue or submit a pull request.
git checkout -b feature/my-feature
).git commit -m 'Add my feature'
).git push origin feature/my-feature
).Working on:
This project is licensed under the MIT License.