Creating a Simple WordPress Plugins

Published on : January 20, 2015

Author: Saniul Ahsan

Category: Wordpress

WordPress plugins are a bundle of code that are usually not lies in the WordPress core by default, but a user can make it to utilize WordPress. For a beginner it is hard to create a WordPress plugins because it has a lot of functionality which cannot be learned overnight. So as a beginner I will share some small thoughts about some simple word press functions and techniques that will pave the way of creating word press plugins. Today we will create a simple plugin which contains only an iframe and a menu in the main admin panel. The plugin simply creates an iframe window that shows the site home page in the window. For creating this we have to maintain some easy steps.

Step 1

First we have to create a folder. Here we will create a folder named ‘test’. Then in the folder we create a ‘test.php’ file. The minimum requirement for creating a word press plugin is to create a folder that contains the plugin file. The folder name along with the file name has to be same which we have successfully done. Now we have to place the folder in the WordPress plugins folder which is in the ‘wp-content/plugins/’.

Step 2

Now we take an editor and add some basic code at the top of it (in the test.php file).


<?php
/**
 * Plugin Name: Name of the plugin, must be unique.
 * Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
 * Description: A brief description of the plugin.
 * Version: The plugin's version number. Example: 1.0.0
 * Author: Name of the plugin author
 * Author URI: http://URI_Of_The_Plugin_Author
 * Text Domain: Optional. Plugin's text domain for localization. Example: mytextdomain
 * Domain Path: Optional. Plugin's relative directory path to .mo files. Example: /locale/
 * Network: Optional. Whether the plugin can only be activated network wide. Example: true
 * License: A short license name. Example: GPL2
 */?>

This code is identical to word press. Because adding this code tells word press that we are creating a word press plugins. Now if we go to the admin panel and select the plugins menu, we will see the plugin name that we gave it. Now we just have to activate the plugins.

Step 3

Now in the ‘test.php’ we will add some code. In this step our target is to create a menu in the admin panel. We add the code below to ‘test.php’ and refresh the admin panel, which will add a menu in the admin panel named “Responsive Check”.


<?php
 add_action('admin_menu', 'my_plugin_menu');
 function my_plugin_menu() {
 add_menu_page('My Plugin Dashboard', 'Responsive Check', 'manage_options', 'my-unique-identifier', 'cd_meta_box_show_frame');
 }
?>

Now time to add some features in the Menu. For that, we have to create a function and add the function to the page. Before that we have to understand about the add_menu_page function. You can take a little idea from this link http://codex.wordpress.org/Function_Reference/add_menu_page

Step 4

Now time to create a function and give it a name like: cd_meta_box_show_frame() . We will put the iframe code there. We will simply put a URL in the iframe. For that we will take the URL of the home page of the user whoever uses the plugins in the theme. The code must look like below.



<?php
add_action( 'add_meta_boxes', 'cd_meta_box_show_frame' );
function cd_meta_box_show_frame()
{ $showlink = get_home_url();
?>

<div style="width:100%; margin-bottom:20px;">
 <h1 style="width:100%; margin-bottom:20px;">iphone 4 (portrait)</h1>
 <iframe style="border:12px solid #000;border-radius:10px;" src="<?php echo $showlink;?>" width="320px" height="480px" ></iframe>
 </div>

 <div style="width:100%; margin-bottom:20px;">
 <h1 style="width:100%; margin-bottom:20px;">iphone 4 (landscape)</h1>
 <iframe style="border:12px solid #000;border-radius:10px;" src="<?php echo $showlink;?>" width="480px" height="320px" ></iframe>
 </div>

 <div style="width:100%; margin-bottom:20px;">
 <h1 style="width:100%; margin-bottom:20px;">ipad (portrait)</h1>
 <iframe style="border:12px solid #000;border-radius:10px;" src="<?php echo $showlink;?>" width="768px" height="1024px" ></iframe>
 </div>

 <div style="width:100%; margin-bottom:20px;">
 <h1 style="width:100%; margin-bottom:20px;">ipad (landscape)</h1>
 <iframe style="border:12px solid #000;border-radius:10px;" src="<?php echo $showlink;?>" width="1024px" height="768px" ></iframe>
 </div>
<?php
}
?>

Now refresh the window and go to the menu that we have created. You will see your home page in an iframe. Like a responsive view of the site. Give the iframe a size of iphone4 and a title just in case. Step 5

Now time for some advanced work. What if we want to use the code in our page/post or in the widget area. We have to do a little bit of work for this. For adding a shortcode to our plugins we will use WordPress add_shortcode($shorcode-name,$function-to-execute-the-short-code) function the first parameter for the function is to asign the shortcode name that we will use in our posts/pages (For Example : ‘show-my-frame’) and the second one is to assign the function that will execute on adding the shortcode. In our case the function is cd_meta_box_show_frame().



<?php add_shortcode("show-my-frame", "cd_meta_box_show_frame");?>

Now in the posts/pages just write: [show-my-frame] and it will appear in the pages/posts. For adding a widget of our plugins we will have add the following code and then in the WordPress Widget menu we can see our newly created widget. Just add it in the sidebar or wherever you want to place it and the iframe will appear there.



<?php
 class My_Frame extends WP_Widget {

public function __construct() {
 parent::__construct(
 'my_frame_widget', // Base ID
 'My IFrame Box', // Name
 array( 'description' => __( 'To display the iframe in the widgets area' ) ) // Args
 );
 }

public function widget( $args, $instance ) {
 extract( $args );
 $title = apply_filters( 'widget_title', $instance['title'] );

echo $before_widget;
 if ( ! empty( $title ) )
 echo $before_title . $title . $after_title;
 echo cd_meta_box_show_frame();
 echo $after_widget;
 }

public function update( $new_instance, $old_instance ) {
 $instance = array();
 $instance['title'] = strip_tags( $new_instance['title'] );
 return $instance;
 }

public function form( $instance ) {
 if ( isset( $instance[ 'title' ] ) ) {
 $title = $instance[ 'title' ];
 }
 else {
 $title = __( 'New title' );
 }
 ?>
 <p>
 <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
 <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
 </p>
 <?php
 }

} // class Cnss_Widget
add_action( 'widgets_init', create_function( '', 'register_widget( "My_Frame" );' ) );
?>