Code Explanation

Structure File, CSS, JS and PHP Code

Structure Files

This tool will create a plugin with a file structure is as follows:

CSS Explanation

For CSS Folder exist in the folder assets, CSS file naming is as follows:

Firstly we will start off by seeing the wrong way of adding stylesheets to WordPress and a common way I've seen people add stylesheets to WordPress. Because CSS stylesheets are added to the head tag of a web page and people are familiar with the wp_head action, they will use this to add stylesheets to the page.

Use CSS menu on the left to add css file or you can use the function wp_enqueue_style. For coding, HTML tag given id with the prefix taken from Plugin ShortName, Use Inspect Element on the browser to know the ID/CLASS, it is advisable to use the best practice coding css wordpress

JS Explanation

For JS file also exist in the folder assets, JS file naming is as follows:

To insert JS file you also have to use the existing Javascript menu on the left side of the tool or if it can use the manual coding use the function wp_enqueue_script and Please read JavaScript Best Practices as guidance

PHP Explanation

Together with the file name, the function name as well. Consider the example shown below:

In editing the file of course you need a reference, for there have been references to the codes. That way you can get easy reference, this will be easier if you use editor that supports IDE like netbean.

Maybe there are some variables that are not needed by you, you can remove it if it is not needed. It is useful to simplify / speed up your work by displaying the variable using the echo / print.