4. Shortcodes and Widgets

Shortcodes

Shortcodes in the shortcodes folder are loaded with the autoloader. That is, you can simply create a folder of a new shortcode with the necessary files and this shortcode will be automatically available.

Each shortcode has its view files, its assets directory, which contains its own, individual css, js, images, fonts, etc. (these attachments need to be connected via wp_enqueue_style and wp_enqueue_script in the shortcode.php file, they are not automatically connected). This is necessary to ensure that shortcode shortcuts are loaded only when the shortcode is active and that you can transfer the shortcodes by simply copying the shortcode folder.

In the future, you can connect the plugin combining styles and scripts to optimize the number of requests (or connect scripts via defer).  The folder structure can be any, you can add your files, but here are two files ajax.php and shortcode.php - loaded autoloader

   File structure

• assets/ – all assets (styles, scripts, fonts, etc)
  • assets/style.scss - styles
  • assets/scripts.js - scripts
  • assets/images/ - images
• childs/ – nested shortcodes, have the same structure as another shortcodes
• view/ – shortcode templates
• ajax.php – backend for ajax queries (optional)
• config.php – shortcode config
• shortcode.php – shortcode controller
• vc.php - WPBakery Page Builder support

Naming conventions

shortcodes | widgets

1. all styles and scripts files should be in {Shortcodes|Widgets}/assets - folder

2. styles should be named - style.scss

3. JS files should be named - scripts.js

4. enqueue in shortcode - style.css and scritps.min.js - from dist folder if you use webpack or from shortcode folder if you use plain css/js files

currently webpack don't supports nested shortcodes