theme basic config

<?php
if ( ! isset( $content_width ) ) {
$content_width = 660;
}

/**
 * Twenty Fifteen only works in WordPress 4.1 or later.
 */
if ( version_compare( $GLOBALS['wp_version'], '4.1-alpha', '<' ) ) {

}

if ( ! function_exists( 'test_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 *
 * @since Twenty Fifteen 1.0
 */
function test_setup() {

add_theme_support( 'post-thumbnails' );
add_theme_support( 'post-thumbnails', array( 'post' ) );          // Posts only
add_theme_support( 'post-thumbnails', array( 'page' ) );          // Pages only
add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) ); // Posts and Movies

add_theme_support( 'html5', array(
'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
) );

/*
* Enable support for Post Formats.
*
* See: https://codex.wordpress.org/Post_Formats
*/
add_theme_support( 'post-formats', array(
'aside', 'image', 'video', 'quote', 'link', 'gallery', 'status', 'audio', 'chat'
) );

/*
* Enable support for custom logo.
*
* @since Twenty Fifteen 1.5
*/
add_theme_support( 'custom-logo', array(
'height'      => 248,
'width'       => 248,
'flex-height' => true,
) );



}
endif;
add_action( 'after_setup_theme', 'test_setup' );

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );
function arphabet_widgets_init() {

register_sidebar( array(
'name'          => 'Home right sidebar',
'id'            => 'home_right_1',
'before_widget' => '<div>',
'after_widget'  => '</div>',
'before_title'  => '<h2 class="rounded">',
'after_title'   => '</h2>',
) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );

function add_scripts() {
    wp_enqueue_script(
        'custom_script',
        get_template_directory_uri() . '/js/jquery-2.1.1.js',
        array('jquery'),null
    );
     wp_enqueue_script(
        'script',
        get_template_directory_uri() . '/js/script.js',
        array('jquery'),null
    );
}
function add_style() {
  wp_enqueue_style( 'wpse-styles1', get_template_directory_uri() . '/css/zerogrid.css', array(), null );
wp_enqueue_style( 'wpse-styles2', get_template_directory_uri() . '/css/menu.css', array(), null );
wp_enqueue_style( 'wpse-styles3', get_template_directory_uri() . '/css/style.css', array(), null );
wp_enqueue_style( 'wpse-styles4', get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css', array(), null );
wp_enqueue_style('wp_font5',get_template_directory_uri().'/owl-carousel/owl.carousel.css',array(),null);
wp_enqueue_style('wp_font6',get_template_directory_uri().'/owl-carousel/owl.theme.css',array(),null);

}
add_action( 'wp_enqueue_scripts', 'add_scripts' );
add_action( 'wp_enqueue_scripts', 'add_style' );
?>

Wordpress Basic Setup

<?php
/*
Plugin Name: Test Plugin
Plugin URI:  https://developer.wordpress.org/plugins/the-basics/
Description: Basic WordPress Plugin Header Comment
Version:     20160911
Author:      WordPress.org
Author URI:  https://developer.wordpress.org/
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wporg
Domain Path: /languages
*/


define( 'TEST_VERSION', '3.2' );
define( 'TEST__MINIMUM_WP_VERSION', '3.7' );
define( 'TEST__PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'TEST_DELETE_LIMIT', 100000 );

function wporg_custom_post_type()
{
    register_post_type('product',
                       [
                           'labels'      => [
                               'name'          => __('Products'),
                               'singular_name' => __('Product'),
                           ],
                           'public'      => true,
                           'has_archive' => true,
                           'rewrite'     => ['slug' => 'products'], // my custom slug
                       ]
    );
}
add_action('init', 'wporg_custom_post_type');

function pluginprefix_install()
{
    // trigger our function that registers the custom post type
    wporg_custom_post_type();

    // clear the permalinks after the post type has been registered
    flush_rewrite_rules();
}
register_activation_hook( __FILE__, 'pluginprefix_install' );

function pluginprefix_deactivation()
{
    // our post type will be automatically removed, so no need to unregister it

    // clear the permalinks to remove our post type's rules
    flush_rewrite_rules();
}
register_deactivation_hook( __FILE__, 'pluginprefix_deactivation' );

function product_meta_box(){
add_meta_box('raidco-sku-meta-box',
'test',
'test',
'product',
'normal',
'high');
}

add_action('add_meta_boxes','product_meta_box');

function test(){
global $wpdb;
global $post;
wp_nonce_field(__FILE__,'form_csrf');
$test= get_post_meta( $post->ID,'test',true );
?>
<div class="wrap">
<input name="test" class="raidco-controls" style="width:36%" id="test" value="<?php echo $test; ?>" data-validation="test" placeholder="">
<?php
 $url =get_post_meta($post->ID,'my-image-for-post', true);   ?>
    <input id="my_image_URL" name="my_image_URL" type="hidden" value="<?php echo $url;?>"  style="width:400px;" />
    <input id="my_upl_button" type="button" value="Upload Image" /><br/><img src="<?php echo $url;?>" style="width:200px;" id="picsrc" />
</div>

<script>
    jQuery(document).ready( function( $ ) {
        jQuery('#my_upl_button').click(function() {

            window.send_to_editor = function(html) {
                imgurl = jQuery(html).attr('src')
                jQuery('#my_image_URL').val(imgurl);
                jQuery('#picsrc').attr("src",imgurl);
                tb_remove();
            }

            formfield = jQuery('#my_image_URL').attr('name');
            tb_show( '', 'media-upload.php?type=image&amp;TB_iframe=true' );
            return false;
        });

    });
    </script>
<?php
}
function save_product($post_id){
global $post;
update_post_meta( $post->ID,'test',$_POST['test']);
if (isset($_POST['my_image_URL'])){
        update_post_meta($post_id, 'my-image-for-post',$_POST['my_image_URL']);
    }
}

add_action('save_post','save_product');

// product Shortcode
function product_shortcode()
{
  $args = array(
            'post_type' => 'product',
            'post_status' => 'publish'
        );

        $string = '';
        $query = new WP_Query( $args );
        if( $query->have_posts() ){
            $string .= '<ul>';
            while( $query->have_posts() ){
                $query->the_post();
                $string .= '<li>' . get_the_title() . '</li>';
                $string.='<li>'.the_content().'</li>';
            }
            $string .= '</ul>';
        }
        wp_reset_postdata();
        return $string;

}

add_shortcode('product', 'product_shortcode');

//single plugin template

add_filter('single_template', 'my_custom_template');

function my_custom_template($single) {
    global $wp_query, $post;

    /* Checks for single template by post type */
    if ($post->post_type == "product"){
    if ( is_single() ) {
    require(TEST__PLUGIN_DIR . 'test1.php' );
    }
     
    }
    }

    //image custom

    function my_admin_scripts() {  
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_register_script('my-upload', TEST_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
    wp_enqueue_script('my-upload');
}

function my_admin_styles() {

    wp_enqueue_style('thickbox');
}

// better use get_current_screen(); or the global $current_screen
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {

    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles', 'my_admin_styles');
}

button onclick event example javascript

Here is the example of button click Example javascipt

<button onclick="myFun()">Click me</button>

<p id="demo"></p>
<script>
function myFun()
{
document.getElementById("demo").innerHTML="Test";
}
</script>