All the fixings so I can spin up new WordPress plugins quickly and learn all the things.
- Download or clone this repo into the directory of your choice inside
wp-content/plugins
. cd
into the plugin directory and runyarn
from the command line to install dependencies.- Edit the
Browsersync:Proxy
plugin settings withinwebpack/webpack.dev.js
to point to your local domain. - This plugin utilizes
namespaces
so choose a namespace and update theclass
files inside theclass
directory. You will want to replace instances ofWPSP
with your chosen namespace. - Edit the
autoloader
function inside thewp-plugin.php
file. There should be two locations in this function where you can swap outWPSP
&&wpsp
with your chosen namespace. - Edit the plugin details at the top of
wp-plugin.php
with your details. - Rename the
wp-plugin.php
file to fit your plugin name. - Run
yarn dev
for development mode. Browsersync will be engaged. You should be able to visitlocalhost:3000
. - Run
yarn build
for a production build.
For learning purposes, I've chosen not to use singletons
all over the place with this plugin. Instead, I'm going to use a form of dependency injection that I learned from the great Jeffrey Way over at laracasts.com.
- Create a new class file inside the
class
directory. Be sure to prefix the name withclass-
and be sure to follow the format ofclass-hyphenate-the-name.php
. This will ensure the class will be autoloaded. - Inside the
class/class-bootstrap.php
file, find theinit()
function. You will instantiate your class inside this function using `App::bind( 'your-key', new YourClassName() );
This plugin is setup to use the latest and greatest JavaScript. The main entry point is located at src/index.js
. Feel free to create whatever kind of folder structure you'd like. Just be sure to import your files inside of src/index.js
.
This plugin is setup to use SCSS
. The entry point for SCSS
files is located at src/scss/index.scss
. Again, feel free to create whatever folder structure suits your needs. Just be sure to import them at the SCSS
entry point.