Skip to content

Instantly share code, notes, and snippets.

@GarySwift

GarySwift/_.md

Last active May 14, 2021 07:10
Show Gist options
  • Save GarySwift/053efda0cff9fc7dac4f53152f19f506 to your computer and use it in GitHub Desktop.
Save GarySwift/053efda0cff9fc7dac4f53152f19f506 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. GarySwift revised this gist May 14, 2021. 1 changed file with 62 additions and 0 deletions.
    62 changes: 62 additions & 0 deletions wordpress-sample-plugin.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <?php
    class SamplePlugin {
    private $sample_plugin_options;
    private $menu_slug = 'sample-plugin';

    public function __construct() {
    add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
    add_action( 'admin_init', array( $this, 'page_init' ) );
    add_action( 'admin_enqueue_scripts', array($this, 'selectively_enqueue_admin_script') );
    }

    public function add_plugin_page() {
    add_management_page(
    'Morris Toolbank', // page_title
    'Morris Toolbank', // menu_title
    'manage_options', // capability
    $this->menu_slug, // menu_slug
    array( $this, 'create_admin_page' ) // function
    );
    }

    public function create_admin_page() {
    $this->sample_plugin_options = get_option( 'sample_plugin_option_name' ); ?>

    <div class="wrap">
    <h2>Morris Toolbank Import</h2>
    <p></p>
    <?php settings_errors(); ?>

    <!-- <form method="post" action="options.php"> -->
    <?php
    settings_fields( 'sample_plugin_option_group' );
    do_settings_sections( 'morris-toolbank-admin' );
    // submit_button();
    ?>
    <!-- </form> -->
    </div>
    <?php }


    /**
    * Enqueue a script in the WordPress admin on edit.php.
    *
    * @param int $hook Hook suffix for the current admin page.
    */
    public function selectively_enqueue_admin_script( $hook ) {
    if ( 'tools_page_'.$this->menu_slug != $hook ) {
    return;
    }
    wp_enqueue_style( $this->menu_slug.'-style', plugin_dir_url( __FILE__ ) . 'admin/css/webpack-admin.css' );
    wp_enqueue_script( $this->menu_slug.'-script', plugin_dir_url( __FILE__ ) . 'admin/js/webpack-admin.js', array(), '1.0' );
    }

    }
    if ( is_admin() )
    $sample_plugin = new SamplePlugin();

    /*
    * Retrieve this value with:
    * $sample_plugin_options = get_option( 'sample_plugin_option_name' ); // Array of All Options
    * $file_0 = $sample_plugin_options['file_0']; // File
    */
  2. GarySwift revised this gist May 13, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,7 @@ This will create the the src Javacript and Sass files as shown in the structure
    └── main.scss
    ```

    2) Create the `package.json` file copy the package.json file located in this [gist](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/d2ac5c9914ed7102a6a7938fe06647787bc81470/package.json).
    2) Create the `package.json` file copy the package.json file located in this [gist](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/5f7adecb9dfb487e504ba124e0fc026e0023556e/package.json).

    ```
    npm init -y
  3. GarySwift revised this gist Nov 13, 2019. 2 changed files with 4 additions and 4 deletions.
    6 changes: 3 additions & 3 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -38,14 +38,14 @@ This will create the the src Javacript and Sass files as shown in the structure
    npm init -y
    ```

    2) Create the `gulpfile.js` file and copy the contents from [here](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/d2ac5c9914ed7102a6a7938fe06647787bc81470/gulpfile.js).
    3) Create the `gulpfile.js` file and copy the contents from [here](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/d2ac5c9914ed7102a6a7938fe06647787bc81470/gulpfile.js).

    ```
    touch gulpfile.js
    ```
    3) Edit the `const` in the gulbfile from `webpack`(line 1) to whatever the plugin is.
    4) Edit the `const` in the gulbfile from `webpack`(line 1) to whatever the plugin is.

    4) Add the npm depenencies.
    5) Add the npm depenencies.

    ```
    npm install
    2 changes: 1 addition & 1 deletion gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ const rename = require('gulp-rename')
    const sass = require('gulp-sass')
    const del = require('del')
    var argv = require('yargs').argv
    var csso = require('gulp-csso')
    var csso = require('gulp-csso')//Minify CSS with CSSO
    var gulpif = require('gulp-if')
    var livereload = require('gulp-livereload');

  4. GarySwift revised this gist Nov 9, 2019. 3 changed files with 9 additions and 7 deletions.
    7 changes: 4 additions & 3 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -32,19 +32,20 @@ This will create the the src Javacript and Sass files as shown in the structure
    └── main.scss
    ```

    2) Create the `package.json` file copy the package.json file located in this gist.
    2) Create the `package.json` file copy the package.json file located in this [gist](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/d2ac5c9914ed7102a6a7938fe06647787bc81470/package.json).

    ```
    npm init -y
    ```

    2) Create the `gulpfile.js` file and copy the contents from here.
    2) Create the `gulpfile.js` file and copy the contents from [here](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/d2ac5c9914ed7102a6a7938fe06647787bc81470/gulpfile.js).

    ```
    touch gulpfile.js
    ```
    3) Edit the `const` in the gulbfile from `webpack`(line 1) to whatever the plugin is.

    2) Add the npm depenencies.
    4) Add the npm depenencies.

    ```
    npm install
    8 changes: 4 additions & 4 deletions gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -53,16 +53,16 @@ gulp.task('clean', () => {

    // gulp watch task that runs the above tasks in series and then watches for changes
    gulp.task('watch', () => {
    gulp.watch('./public/src/scss/main.scss', (done) => {
    gulp.watch('./public/src/scss/**/*.scss', (done) => {
    gulp.series(['sassPublic'])(done);
    });
    gulp.watch('./admin/src/scss/main.scss', (done) => {
    gulp.watch('./admin/src/scss/**/*.scss', (done) => {
    gulp.series(['sassAdmin'])(done);
    });
    gulp.watch('./public/src/js/index.js', (done) => {
    gulp.watch('./public/src/js/**/*.js', (done) => {
    gulp.series(['jsPublic'])(done);
    });
    gulp.watch('./admin/src/js/index.js', (done) => {
    gulp.watch('./admin/src/js/**/*.js', (done) => {
    gulp.series(['jsAdmin'])(done);
    });
    });
    1 change: 1 addition & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -28,6 +28,7 @@
    "gulp": "^4.0.2",
    "gulp-csso": "^3.0.1",
    "gulp-if": "^3.0.0",
    "gulp-livereload": "^4.0.2",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "webpack-stream": "^5.2.1",
  5. GarySwift revised this gist Nov 2, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    {
    "name": "webpack",
    "name": "webpack-plugin",
    "version": "1.0.0",
    "description": "=== Plugin Name === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://github.com/GarySwift Tags: comments, spam Requires at least: 3.0.1 Tested up to: 3.4 Stable tag: 4.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html",
    "main": "index.js",
  6. GarySwift revised this gist Nov 2, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # Add Sass and Webpack Support for WordPress plugins

    This for when you use the [WordPress Plugin Boilerplate](https://wppb.me/) generator as starter for a WordPress plugin.
    This is for when you use the [WordPress Plugin Boilerplate](https://wppb.me/) generator as starter for a WordPress plugin.

    This is a way to get Sass set up and have Javascript use module dependency with webpack as the module bundler.

  7. GarySwift revised this gist Nov 2, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@ This will create the the src Javacript and Sass files as shown in the structure
    npm init -y
    ```

    2) Create the `gulpfile.js` file and copy the contents form here.
    2) Create the `gulpfile.js` file and copy the contents from here.

    ```
    touch gulpfile.js
  8. GarySwift revised this gist Nov 2, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # Add Sass and Webpack Support for WordPress plugins

    This for when you use the (WordPress Plugin Boilerplate)[https://wppb.me/] generator as starter for a WordPress plugin.
    This for when you use the [WordPress Plugin Boilerplate](https://wppb.me/) generator as starter for a WordPress plugin.

    This is a way to get Sass set up and have Javascript use module dependency with webpack as the module bundler.

  9. GarySwift revised this gist Nov 2, 2019. 1 changed file with 9 additions and 3 deletions.
    12 changes: 9 additions & 3 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,13 @@
    # Add Sass and Webpack Support for WordPress plugins

    This for when you use the (WordPress Plugin Boilerplate)[https://wppb.me/] generator as starter for a WordPress plugin.

    This is a way to get Sass set up and have Javascript use module dependency with webpack as the module bundler.

    Follow the steps below to get started.

    ## Steps

    1) Run the terminal command in [`create-folders-and-files.txt`](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/ebc5fb35d1ae0ab074a53e94df5feb5f1f049600/create-folders-and-files.txt).

    This will create the the src Javacript and Sass files as shown in the structure below.
    @@ -24,14 +32,12 @@ This will create the the src Javacript and Sass files as shown in the structure
    └── main.scss
    ```

    2) Create the `package.json` file.
    2) Create the `package.json` file copy the package.json file located in this gist.

    ```
    npm init -y
    ```

    Copy the package.json file located in this gist.

    2) Create the `gulpfile.js` file and copy the contents form here.

    ```
  10. GarySwift revised this gist Nov 2, 2019. 1 changed file with 15 additions and 1 deletion.
    16 changes: 15 additions & 1 deletion _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # Add Sass and Webpack Support for WordPress plugins

    1) Run the terminal command in `create-folders-and-files.txt`.
    1) Run the terminal command in [`create-folders-and-files.txt`](https://gist.github.com/GarySwift/053efda0cff9fc7dac4f53152f19f506/raw/ebc5fb35d1ae0ab074a53e94df5feb5f1f049600/create-folders-and-files.txt).

    This will create the the src Javacript and Sass files as shown in the structure below.

    @@ -43,3 +43,17 @@ touch gulpfile.js
    ```
    npm install
    ```

    ## Compiling

    To watch files

    ```
    $ npm start
    ```

    To build files for production.

    ```
    $ npm run build
    ```
  11. GarySwift revised this gist Nov 2, 2019. 1 changed file with 42 additions and 2 deletions.
    44 changes: 42 additions & 2 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,45 @@
    # Add Sass and Webpack Support for WordPress plugins

    1) Run the terminal command in `create-folders-and-files.txt`. This will create the the src Javacript and Sass files.
    1) Run the terminal command in `create-folders-and-files.txt`.

    2
    This will create the the src Javacript and Sass files as shown in the structure below.

    ```
    .
    ├── admin
    │   └── src
    │   ├── js
    │   │   ├── index.js
    │   │   └── lib
    │   │   └── component.js
    │   └── scss
    │   └── main.scss
    └── public
    └── src
    ├── js
    │   ├── index.js
    │   └── lib
    │   └── component.js
    └── scss
    └── main.scss
    ```

    2) Create the `package.json` file.

    ```
    npm init -y
    ```

    Copy the package.json file located in this gist.

    2) Create the `gulpfile.js` file and copy the contents form here.

    ```
    touch gulpfile.js
    ```

    2) Add the npm depenencies.

    ```
    npm install
    ```
  12. GarySwift revised this gist Nov 2, 2019. 3 changed files with 43 additions and 2 deletions.
    5 changes: 5 additions & 0 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    # Add Sass and Webpack Support for WordPress plugins

    1) Run the terminal command in `create-folders-and-files.txt`. This will create the the src Javacript and Sass files.

    2
    4 changes: 2 additions & 2 deletions create-folders-and-files.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ mkdir -p admin/src/js/lib \
    * reside in this file.
    * In general everything should be in a component as much as possible.
    */
    import component from './component';
    import component from './lib/component';
    (function( $ ) {
    'use strict';
    component();
    @@ -18,7 +18,7 @@ import component from './component';
    * reside in this file.
    * In general everything should be in a component as much as possible.
    */
    import component from './component';
    import component from './lib/component';
    (function( $ ) {
    'use strict';
    component();
    36 changes: 36 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    {
    "name": "webpack",
    "version": "1.0.0",
    "description": "=== Plugin Name === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://github.com/GarySwift Tags: comments, spam Requires at least: 3.0.1 Tested up to: 3.4 Stable tag: 4.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html",
    "main": "index.js",
    "babel": {
    "presets": [
    "@babel/preset-env"
    ]
    },
    "scripts": {
    "start": "gulp watch --watch --mode development",
    "build": "gulp build --mode production"
    },
    "keywords": [
    "wordpress",
    "webpack",
    "javascript"
    ],
    "author": "Gary Swift",
    "license": "ISC",
    "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-csso": "^3.0.1",
    "gulp-if": "^3.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "webpack-stream": "^5.2.1",
    "yargs": "^14.2.0"
    }
    }
  13. GarySwift revised this gist Nov 2, 2019. 1 changed file with 71 additions and 0 deletions.
    71 changes: 71 additions & 0 deletions gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    const slug = 'webpack';// Change this to the plugin slug
    const gulp = require("gulp")
    const webpackStream = require('webpack-stream')
    const rename = require('gulp-rename')
    const sass = require('gulp-sass')
    const del = require('del')
    var argv = require('yargs').argv
    var csso = require('gulp-csso')
    var gulpif = require('gulp-if')
    var livereload = require('gulp-livereload');

    gulp.task('jsAdmin', () => {
    return gulp.src('./admin/src/js/index.js')
    .pipe(webpackStream({mode:argv.mode}))
    .pipe(rename(slug+'-admin.js'))
    .pipe(gulp.dest('admin/js/'))
    .pipe(livereload());
    });

    gulp.task('sassAdmin', () => {
    return gulp.src('./admin/src/scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(rename(slug+'-admin.css'))
    .pipe(gulp.dest('./admin/css/'))
    .pipe(livereload());
    });

    gulp.task('jsPublic', () => {
    return gulp.src('./public/src/js/index.js')
    .pipe(webpackStream({mode:argv.mode}))
    .pipe(rename(slug+'-public.js'))
    .pipe(gulp.dest('public/js/'))
    .pipe(livereload());
    });

    gulp.task('sassPublic', () => {
    return gulp.src('./public/src/scss/main.scss')
    .pipe(sass({outputStyle: 'nested',}).on('error', sass.logError))
    .pipe(rename(slug+'-public.css'))
    .pipe(gulpif(argv === 'production', csso()))
    .pipe(gulp.dest('./public/css/'))
    .pipe(livereload());
    });

    gulp.task('clean', () => {
    return del([
    './public/css/'+slug+'-public.css',
    './admin/css/'+slug+'-admin.css',
    './public/js/'+slug+'-public.js',
    './admin/js/'+slug+'-admin.js',
    ]);
    });

    // gulp watch task that runs the above tasks in series and then watches for changes
    gulp.task('watch', () => {
    gulp.watch('./public/src/scss/main.scss', (done) => {
    gulp.series(['sassPublic'])(done);
    });
    gulp.watch('./admin/src/scss/main.scss', (done) => {
    gulp.series(['sassAdmin'])(done);
    });
    gulp.watch('./public/src/js/index.js', (done) => {
    gulp.series(['jsPublic'])(done);
    });
    gulp.watch('./admin/src/js/index.js', (done) => {
    gulp.series(['jsAdmin'])(done);
    });
    });

    // gulp build task that runs the above tasks in series
    gulp.task('build', gulp.series(['clean', 'sassPublic', 'sassAdmin', 'jsPublic', 'jsAdmin']));
  14. GarySwift renamed this gist Nov 2, 2019. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions create-folders-and-files.md → create-folders-and-files.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@
    ```
    mkdir -p admin/src/js/lib \
    && echo "/**
    * All of the code for your admin-facing JavaScript source should
    @@ -36,5 +35,4 @@ import component from './component';
    && echo "/**
    * All of the CSS for your public-facing functionality should be
    * included in this file.
    */" > public/src/scss/main.scss
    ```
    */" > public/src/scss/main.scss
  15. GarySwift created this gist Nov 2, 2019.
    40 changes: 40 additions & 0 deletions create-folders-and-files.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    ```
    mkdir -p admin/src/js/lib \
    && echo "/**
    * All of the code for your admin-facing JavaScript source should
    * reside in this file.
    * In general everything should be in a component as much as possible.
    */
    import component from './component';
    (function( $ ) {
    'use strict';
    component();
    })( jQuery );" > admin/src/js/index.js \
    && echo "export default function() {
    console.log('Admin component code output');
    }" > admin/src/js/lib/component.js \
    && mkdir -p public/src/js/lib \
    && echo "/**
    * All of the code for your public-facing JavaScript source should
    * reside in this file.
    * In general everything should be in a component as much as possible.
    */
    import component from './component';
    (function( $ ) {
    'use strict';
    component();
    })( jQuery );" > public/src/js/index.js \
    && echo "export default function() {
    console.log('Public component code output');
    }" > public/src/js/lib/component.js \
    && mkdir -p admin/src/scss \
    && echo "/**
    * All of the CSS for your admin-facing functionality should be
    * included in this file.
    */" > admin/src/scss/main.scss \
    && mkdir -p public/src/scss \
    && echo "/**
    * All of the CSS for your public-facing functionality should be
    * included in this file.
    */" > public/src/scss/main.scss
    ```