How to Create First WordPress Plugin? Step-by-Step Guided Tour with Sample Code

How To Create A WordPress Plugin and Getting Started with WordPress Plugin Development?

Are you a new WordPress developer? Have you started working on WordPress recently? Are you looking to create new WordPress Plugin?

How to create wordpress plugin from scratch? Well, you are at right place.

In this tutorial we will go over how to create your Hello World WordPress Plugin from scratch. This is a step by step guide on WordPress plugin development tutorial .

Before we get started here is a WordPress plugin design and what we are going to do:

1. We will create simple Hello World WordPress Plugin
2. Create file crunchify-hello-world.php which has all Plugin code
3. Create readme.txt file with basic information
   • Plugin Metadata
   • Description
   • Installation Steps
   • FAQ section
   • Screenshots
   • Change log
4. Plugin will have below functionalities
   • New menu Crunchify Plugin under Settings menu
   • New Plugin admin page
   • User will have option to add value to one Textfield
   • Save button to save setting
   • Plugin will append saved text value to bottom of every post

Let’s get started:

Step-1 Create Plugin Metadata.

Create file crunchify-hello-world.php and put below code first.

<?php
/**
 * Crunchify Hello World Plugin is the simplest WordPress plugin for beginner.
 * Take this as a base plugin and modify as per your need.
 *
 * @package Crunchify Hello World Plugin
 * @author Crunchify
 * @license GPL-2.0+
 * @link https://crunchify.com/tag/wordpress-beginner/
 * @copyright 2017 Crunchify, LLC. All rights reserved.
 *
 *            @wordpress-plugin
 *            Plugin Name: Crunchify Hello World Plugin
 *            Plugin URI: https://crunchify.com/tag/wordpress-beginner/
 *            Description: Crunchify Hello World Plugin is the simplest WordPress plugin for beginner. Take this as a base plugin and modify as per your need.
 *            Version: 3.0
 *            Author: Crunchify
 *            Author URI: https://crunchify.com/
 *            Text Domain: crunchify-hello-world
 *            Contributors: Crunchify
 *            License: GPL-2.0+
 *            License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

Here below fields are absolutely required and should be unique to your plugin:

• Plugin Name
• Plugin URI
• Description
• Version
• Author
• Author URI
• Text Domain
• Contributors

Step-2 Add submenu section

function crunchify_add_menu() {
	add_submenu_page("options-general.php", "Crunchify Plugin", "Crunchify Plugin", "manage_options", "crunchify-hello-world", "crunchify_hello_world_page");
}
add_action("admin_menu", "crunchify_add_menu");

We are using add_action WordPress hook to add submenu for our plugin.

Step-3 Create plugin setting page

In our case Settings -> Crunchify Plugin.

function crunchify_hello_world_page()
{
?>
<div class="wrap">
	<h1>
		Hello World Plugin Template By <a
			href="https://crunchify.com/optimized-sharing-premium/" target="_blank">Crunchify</a>
	</h1>

	<form method="post" action="options.php">
            <?php
	settings_fields("crunchify_hello_world_config");
	do_settings_sections("crunchify-hello-world");
	submit_button();
?>
         </form>
</div>

<?php
}

function crunchify_hello_world_settings() {
	add_settings_section("crunchify_hello_world_config", "", null, "crunchify-hello-world");
	add_settings_field("crunchify-hello-world-text", "This is sample Textbox", "crunchify_hello_world_options", "crunchify-hello-world", "crunchify_hello_world_config");
	register_setting("crunchify_hello_world_config", "crunchify-hello-world-text");
}
add_action("admin_init", "crunchify_hello_world_settings");

function crunchify_hello_world_options() {
?>
<div class="postbox" style="width: 65%; padding: 30px;">
	<input type="text" name="crunchify-hello-world-text"
		value="<?php
	echo stripslashes_deep(esc_attr(get_option('crunchify-hello-world-text'))); ?>" />
	Provide any text value here for testing<br />
</div>
<?php
}

Step-4 Append Saved Textfield value to each post

add_filter('the_content', 'crunchify_com_content');
function crunchify_com_content($content) {
	return $content . stripslashes_deep(esc_attr(get_option('crunchify-hello-world-text')));
}

Complete code:

Here is a complete Hello World WordPress Plugin code. Just copy it below and save to file crunchify-hello-world.php file.

<?php
/**
 * Crunchify Hello World Plugin is the simplest WordPress plugin for beginner.
 * Take this as a base plugin and modify as per your need.
 *
 * @package Crunchify Hello World Plugin
 * @author Crunchify
 * @license GPL-2.0+
 * @link https://crunchify.com/tag/wordpress-beginner/
 * @copyright 2017 Crunchify, LLC. All rights reserved.
 *
 *            @wordpress-plugin
 *            Plugin Name: Crunchify Hello World Plugin
 *            Plugin URI: https://crunchify.com/tag/wordpress-beginner/
 *            Description: Crunchify Hello World Plugin is the simplest WordPress plugin for beginner. Take this as a base plugin and modify as per your need.
 *            Version: 3.0
 *            Author: Crunchify
 *            Author URI: https://crunchify.com/
 *            Text Domain: crunchify-hello-world
 *            Contributors: Crunchify
 *            License: GPL-2.0+
 *            License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

/**
 * Adding Submenu under Settings Tab
 *
 * @since 1.0
 */
function crunchify_add_menu() {
	add_submenu_page ( "options-general.php", "Crunchify Plugin", "Crunchify Plugin", "manage_options", "crunchify-hello-world", "crunchify_hello_world_page" );
}
add_action ( "admin_menu", "crunchify_add_menu" );

/**
 * Setting Page Options
 * - add setting page
 * - save setting page
 *
 * @since 1.0
 */
function crunchify_hello_world_page() {
	?>
<div class="wrap">
	<h1>
		Hello World Plugin Template By <a
			href="https://crunchify.com/optimized-sharing-premium/" target="_blank">Crunchify</a>
	</h1>

	<form method="post" action="options.php">
            <?php
	settings_fields ( "crunchify_hello_world_config" );
	do_settings_sections ( "crunchify-hello-world" );
	submit_button ();
	?>
         </form>
</div>

<?php
}

/**
 * Init setting section, Init setting field and register settings page
 *
 * @since 1.0
 */
function crunchify_hello_world_settings() {
	add_settings_section ( "crunchify_hello_world_config", "", null, "crunchify-hello-world" );
	add_settings_field ( "crunchify-hello-world-text", "This is sample Textbox", "crunchify_hello_world_options", "crunchify-hello-world", "crunchify_hello_world_config" );
	register_setting ( "crunchify_hello_world_config", "crunchify-hello-world-text" );
}
add_action ( "admin_init", "crunchify_hello_world_settings" );

/**
 * Add simple textfield value to setting page
 *
 * @since 1.0
 */
function crunchify_hello_world_options() {
	?>
<div class="postbox" style="width: 65%; padding: 30px;">
	<input type="text" name="crunchify-hello-world-text"
		value="<?php
	echo stripslashes_deep ( esc_attr ( get_option ( 'crunchify-hello-world-text' ) ) );
	?>" /> Provide any text value here for testing<br />
</div>
<?php
}

/**
 * Append saved textfield value to each post
 *
 * @since 1.0
 */
add_filter ( 'the_content', 'crunchify_com_content' );
function crunchify_com_content($content) {
	return $content . stripslashes_deep ( esc_attr ( get_option ( 'crunchify-hello-world-text' ) ) );
}

Step-5 Create readme.txt file

Here is a sample WordPress plugin readme.txt file.

=== Crunchify Hello World Plugin ===
Contributors: Crunchify
Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8ZF6WATLYFELQ
Tags: Hello World Plugin, Crunchify Plugins, Beginner WordPress, WordPress Plugin
Requires at least: 4.5
Tested up to: 4.7.4
Stable tag: 3.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Create your fist plugin. Crunchify Hello World Plugin is the simplest WordPress plugin for beginner. Take this as a base plugin and modify as per your need.

== Description ==

Crunchify Hello World Plugin is the simplest WordPress plugin for beginner if you want to start creating fresh new plugin. Take this as a base plugin and modify as per your need. 

== Installation ==
1. Unpack the `download-package`.
2. Upload the file to the `/wp-content/plugins/` directory.
3. Activate the plugin through the `Plugins` menu in WordPress.
4. Done and Ready.

== Frequently Asked Questions ==

= How to add FAQ question =
* just add your FAQ questions here

== Screenshots ==
1. This is a text label for your first screenshot
2. Add more screenshot labels as new line

== Changelog ==

= 3.0 =
* Initial release

Now what?

• Just create folder crunchify-hello-world under /plugins folder and add copy both files there.

• Go to Admin Console -> Plugins
• Activate plugin

That’s it.

Begin Writing Your First WordPress plugin 🙂

Take this code as a sample of your first WordPress Plugin base and modify as per your need. In next tutorial we will go over some more complex array fields for some more functionality.

Please stay tuned and Happy blogging.