An example starter theme and block-type plugin that use @wordpress/scripts for JS & CSS

Related tags

CMS brads-boilerplate-wordpress
Overview

Brad’s Boilerplate

This repo contains one folder that is an example theme, and another folder that is an example block-type plugin. Both folders use the official @wordpress/scripts package to power the JS(X) and SCSS bundling.

This repo is part of one of my YouTube videos, check it out for a more detailed walkthrough.

After placing one of the folders in your WordPress themes or plugins folders, you then:

  1. Point your terminal towards the new example folder.
  2. Run npm install
  3. Run npm run start and the package will now be watching for any saved changes to your JS or SCSS files.

Alternatively, you can run npm run preview and that will both start the watch task and start a proxy server running on localhost:3000 that will automatically refresh the browser anytime you save a change. In order for this feature to work you will need to change the domain in package.json on line #8. In my file it mentions myexample.local but obviously you will have a different local dev domain that you want to proxy.

Enjoy!

Comments
  • Issue Adding More Than One Plugin

    Issue Adding More Than One Plugin

    This is an excellent framework! I'm trying to create multiple react apps that will be plugins to a WordPress website. My issue is, when I make a copy of the brads-boilerplate-block plugin folder and change up the files to make a second react-based plugin, I can activated both plugins on the Plugins menu, but only one plugin will show up in the Post editor. How do we add more than one plugin to the project?

    opened by jon424 1
  • Npm Packages

    Npm Packages

    Hello, Thank you very much for sharing. I'm about to publish a project :) Since I am weak in javascript, I want to ask a question about brads-boilerplate-theme-tailwind I'm starting a new project, I want to use the swiper and glightbox packages. In the previous project, I added and used it with traditional methods. I don't know if there is a difference between methods, affecting performance vs. :) It works when added as below in Sage 10.

    import { Swiper, Navigation, Pagination, Scrollbar, EffectCoverflow, Thumbs } from 'swiper';
Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow, Thumbs]);
import GLightbox from 'glightbox';
import 'flowbite';

var swiper = new Swiper(".mySwiper", {
  speed: 600,
  parallax: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

const lightbox = GLightbox({
  selector: '.glightbox',
    touchNavigation: true,
    loop: true,
    autoplayVideos: true
});

    For different reasons, I don't want to use sage. In this project, how can we import npm packages. Thanks

    opened by tevfiksirin 0
  • React is in seems to be in production build while developing theme

    React is in seems to be in production build while developing theme

    Hi, I was trying your boilerplate theme without tailwind but it seems that the react build that is build with npm run preview or npm start is a production build and not a development build. When I console log process.env.NODE_ENV it logs development. I followed the readme for installation on a mac and a desktop and the same issue came up on both. Is there any way to change the build type to development?

    opened by maantjemol 0
  • lg and other breakpoints don't work in tailwind plugin with blocks

    lg and other breakpoints don't work in tailwind plugin with blocks

    For example add lg:bg-amber-300 to your frontend.js. It won't work. But if we add in browser with inspector @media (min-width: 1024px) .my-unique-plugin-wrapper-class .lg\:bg-black { we added ".my-unique-plugin-wrapper-class". It will work.

    There is no solve with usual tailwind!

    opened by vitasha10 0
  • This one is done only for 1-block plugin

    This one is done only for 1-block plugin

    How to create more than 1 different block in tailwind plugin? if we use frontend.js we can pass here only one block. but if we want to create file with different name it won't be in the build falder whatever we will do.

    opened by vitasha10 0
Owner
Brad Schiff
Brad Schiff
GitHub
Sage is a productivity-driven WordPress starter theme with a modern development workflow.

WordPress starter theme with a modern development workflow

Roots 12k Jan 5, 2023
KirbyCMS plugin to geneate dynamic tracking-scripts for Ackee

Ackee Analytics for KirbyCMS Plugin for KirbyCMS to generate dynamic tracking-scripts for Ackee. Plugin requirements PHP 7+ KirbyCMS 3 Setup Clone the

SociantWD 4 Aug 17, 2022
TYPO3 CMS extension which checks used CSS selectors in HTML output of the current page and removes CSS declarations which are unused.

EXT:css_coverage TYPO3 CMS extension which checks used CSS selectors in HTML output of the current page and removes CSS declarations which are unused.

Armin Vieweg 3 Apr 8, 2022
A minimal boilerplate theme for WordPress using TailwindCSS, with PostCSS and Laravel Mix.

A minimal boilerplate theme for WordPress using TailwindCSS, with PostCSS and Laravel Mix.

Pixel Devs 74 Nov 25, 2022
This is a white minimal wordpress theme

_s Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turnin

Mahmud Hasan Imran 3 Oct 7, 2021
A WordPress theme.json generator from a PHP array

ItalyStrap Theme Json Generator WordPress Theme Json Generator the OOP way This is a WIP project and still experimental. The idea is to generate a fil

null 19 Sep 15, 2022
(Hard) Fork of WordPress Plugin Boilerplate, actively taking PRs and actively maintained. Following WordPress Coding Standards. With more features than the original.

Better WordPress Plugin Boilerplate This is a Hard Fork of the original WordPress Plugin Boilerplate. The Better WordPress Plugin Boilerplate actively

Beda Schmid 46 Dec 7, 2022
Basic Bedrock Theme for Concrete CMS

Basic Bedrock Theme Package for Concrete CMS v9 Basic Bedrock Theme Package for Concrete CMS v9 Concrete CMS Bedrock Documentation Description Persona

David 11 Nov 27, 2022
A repo of a simple blogsite in PHP, HTML and CSS.

A repository of a simple and fully functional blogsite - The Memoire, in PHP, HTML and CSS. The index page of this site has a summary of all the autho

Baaba Dampare 7 Jun 11, 2022
Wordpress plugin to allow websites to sell and distribute NFTs through the Enjin platform

MyMeta Basket is the world's first plug-and-play Wordpress/Enjin/Ethereum integration that allows you to start selling blockchain assets through your website within minutes. All you need is Wordpress, MyMeta Basket, and an Enjin subscription.

MyMetaverse 6 Oct 3, 2022
Zero-Config plugin to disable FLoC in your WordPress Website.

Disable FLoC by WP Munich A simple zero-config plugin to opt-out of Google FLoC. This plugin is made with love and brought to you by the folks of WP M

Luehrsen // Heinrich 9 Jun 1, 2022
Sensei LMS WordPress Plugin

Sensei LMS A learning management plugin for WordPress, which provides the smoothest platform for helping you teach anything. Sensei LMS is a commercia

Automattic 449 Jan 4, 2023
🎨️ A WordPress plugin to disable admin color schemes

Colors A WordPress plugin to disable admin color schemes. Description Disable the admin color schemes for all users. Availiable filters colors_should_

Brad Parbs 4 Oct 6, 2021
Botble plugin comment is a comment plugin for Botble CMS

Botble plugin comment This is a plugin for Botble CMS so you have to purchase Botble CMS first to use this plugin.

Bảo Bối 27 Nov 25, 2021
Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.

Jetpack Monorepo This is the Jetpack Monorepo. It contains source code for the Jetpack plugin, the Jetpack composer packages, and other things. How to

Automattic 1.4k Jan 7, 2023
A Simple and Lightweight WordPress Option Framework for Themes and Plugins

A Simple and Lightweight WordPress Option Framework for Themes and Plugins. Built in Object Oriented Programming paradigm with high number of custom fields and tons of options. Allows you to bring custom admin, metabox, taxonomy and customize settings to all of your pages, posts and categories. It's highly modern and advanced framework.

Codestar 241 Dec 23, 2022
Chamilo is a learning management system focused on ease of use and accessibility

Chamilo 2.x Chamilo is an e-learning platform, also called "LMS", published under the GNU/GPLv3+ license. It has been used by more than 30M people wor

Chamilo 661 Dec 20, 2022
NukeViet CMS is multi Content Management System. NukeViet CMS is the 1st open source content management system in Vietnam. NukeViet was awarded the Vietnam Talent 2011, the Ministry of Education and Training Vietnam officially encouraged to use.

Introduction about NukeViet NukeViet is the first opensource CMS in Vietnam. The lastest version - NukeViet 4 coding ground up support lastest web tec

NukeViet 132 Nov 27, 2022
SoyCMS Trivial - Lightweight and easy-to-use CMS. ( the custom version based on soycms. )

SoyCMS Trivial Author arbk (https://aruo.net/) Licensed under the GPLv2 license Version 3.1.3-t0 DESCRIPTION SoyCMS Trivial is an open source web cont

arbk 1 Oct 18, 2021