Include the other plugin files required for the admin options page, scripts shortcode functionality at the bottom of this file.<\/li>\n<\/ul>\n\n\n\n<?php\n\/*\nPlugin Name: My Plugin Name\nDescription: Description of my plugin.\nAuthor: My Name\nVersion: 1.0\n*\/\n\nregister_activation_hook(__FILE__, 'my_plugin_activation_function');\nregister_deactivation_hook(__FILE__, 'my_plugin_deactivation_function');\n\nfunction my_plugin_activation_function() {\n \/\/ Perform activation tasks here\n \/\/ This can be any setup tasks that your plugin should perform when it is activated\n}\n\nfunction my_plugin_deactivation_function() {\n \/\/ Perform deactivation tasks here\n \/\/ This can be any clean-up task that your plugin can perform once deactivated\n}\n\nrequire_once(plugin_dir_path(__FILE__) . 'admin\/options-page.php');\nrequire_once(plugin_dir_path(__FILE__) . 'includes\/scripts.php');\nrequire_once(plugin_dir_path(__FILE__) . 'includes\/shortcodes.php');<\/pre>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/span>Step 3 : Admin options page (admin\/options-page.php)<\/strong><\/span><\/h2>\n\n\n\n\n- Next, we will create a basic options page that can save ONE piece of text to the WordPress database using the WordPress Settings API.<\/li>\n\n\n\n
- We add a single text field and a save button to save the text with the
register_setting()<\/code> and add_settings_field()<\/code> functions.<\/li>\n<\/ul>\n\n\n\n<?php\nfunction my_plugin_options_page() {\n \/\/ Create the options page HTML\n?>\n <div class=\"wrap\">\n <h1>My Plugin Settings<\/h1>\n <form method=\"post\" action=\"options.php\">\n <?php settings_fields('my_plugin_options_group'); ?>\n <?php do_settings_sections('my_plugin_options_page'); ?>\n <?php submit_button(); ?>\n <\/form>\n <\/div>\n<?php\n}\n\nfunction my_plugin_settings_init() {\n \/\/ Register settings\n register_setting('my_plugin_options_group', 'my_plugin_option_name');\n\n \/\/ Add sections and fields\n add_settings_section('my_plugin_options_section', 'General Settings', 'my_plugin_section_callback', 'my_plugin_options_page');\n add_settings_field('my_plugin_option_name', 'Option Name', 'my_plugin_option_name_callback', 'my_plugin_options_page', 'my_plugin_options_section');\n}\n\nfunction my_plugin_section_callback() {\n \/\/ Handle any callback if needed\n}\n\nfunction my_plugin_option_name_callback() {\n \/\/ Output HTML for the field\n $option_value = get_option('my_plugin_option_name');\n echo \"<input type='text' name='my_plugin_option_name' value='$option_value' \/>\";\n}\n\nadd_action('admin_menu', 'my_plugin_add_admin_menu');\nadd_action('admin_init', 'my_plugin_settings_init');\n\nfunction my_plugin_add_admin_menu() {\n add_options_page('Your Plugin', 'Your Plugin', 'manage_options', 'my_plugin_options_page', 'my_plugin_options_page');\n}<\/pre>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/span>Step 4 : Enqueue scripts (includes\/scripts.php):<\/strong><\/span><\/h2>\n\n\n\n\n- Next, we will need to enqueue our plugin’s Javascript and CSS files, if any. This ensures that when our plugin is activated, the scripts and styles will be activated and vice versa.<\/li>\n\n\n\n
- Create a function to enqueue external JavaScript files and a CSS file for your plugin.<\/li>\n\n\n\n
- The external.js file can be any external libraries that your plugin depends on.<\/li>\n<\/ul>\n\n\n\n
<?php\nfunction my_plugin_enqueue_scripts() {\n \/\/ Enqueue external JavaScript\n wp_enqueue_script('my-plugin-script', 'https:\/\/example.com\/external.js', array(), '1.0', true);\n \n \/\/ Enqueue CSS file\n wp_enqueue_style('my-plugin-style', plugin_dir_url(__FILE__) . 'css\/style.css', array(), '1.0', 'all');\n}\n\nadd_action('wp_enqueue_scripts', 'my_plugin_enqueue_scripts');<\/pre>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/span>Step 5 : Shortcode (includes\/shortcodes.php)<\/strong>:<\/span><\/h2>\n\n\n\n\n- Next, we want to create a shortcode function that outputs the desired plugin JavaScript and HTML code on our pages or posts.<\/li>\n\n\n\n
- In this step, we named our short code as “my_plugin_shortcode”. You can however call it anything you like. This shortcode name will be used to display your plugin content later.<\/li>\n\n\n\n
- The plugin will also enable you to pass a “text” attribute as a default. The default text will appear if you did not save any text via the settings API. More on this later.<\/li>\n<\/ul>\n\n\n\n
<?php\nfunction my_plugin_shortcode($atts) {\n \/\/ Extract the \"text\" argument from the shortcode attributes\n $atts = shortcode_atts(array(\n 'text' => 'Some Default Text',\n ), $atts);\n\n \/\/ Output JavaScript code with the provided text\n ob_start();\n?>\n <script>\n \/\/ JavaScript code here\n var text = \"<?php echo esc_js($atts['text']); ?>\";\n console.log(text);\n <\/script>\n <p class=\"my-plugin-para\">\n <?php \n $my_plugin_option = get_option('my_plugin_option_name');\n if ($my_plugin_option != ''){\n \/\/ echo the text set in the option\n echo $my_plugin_option;\n }else{\n \/\/ echo the default text\n echo $atts['text'];\n }\n \n ?>\n <\/p>\n<?php\n return ob_get_clean();\n}\nadd_shortcode('my_plugin_shortcode', 'my_plugin_shortcode');<\/pre>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n\n\n\n