How to add media plugin in WordPress.

In this post we tell about how to add media plugin in wordpress.

Our Media plugin is look like this :->

 

First of all create a plugin which we told earlier in our some previous post. In this post we make a plugin name media-image.

After creating a plugin create a directory with the exact name that you want to use for your plugin its name is media-image.php.

The code inside the media-image.php file is given below :-

<?php<?php
/** * Plugin Name: Media Plugin 
* Plugin URI:  http://www.facebook.com/rishabh.baranwal.35 
* Description: Appends a featured image at the bottom of the content of a post or page. 
* Version:     1.0.0 
* Author:      Rishabh Baranwal 
* Author URI:  http://www.facebook.com/rishabh.baranwal.35 
*  
*/
// If this file is called directly, abort.if ( ! defined( 'WPINC' ) ) {
 die;
}
/**
 * Includes the core plugin class for executing the plugin. 
*/
require_once( plugin_dir_path( __FILE__ ) . 'admin/class-media-footer-image.php' );
/** 
* Begins execution of the plugin. 
* * Since everything within the plugin is registered via hooks, 
* then kicking off the plugin from this point in the file does not affect the page life cycle. 
* * @since    0.1.0 */function run_media_footer_image() 
{
 $plugin = new Media_Footer_Image(); 
$plugin->run();
}
run_media_footer_image();

In the above php file the require_once(plugin_dir_path(__FILE__) is used for searching. In this plugin we make a admin folder and also in admin folder there is a php file name class-media-footer-image.php.

The code of class-media-footer-image.php is given below :-

<?php

/**

*/
class Media_Footer_Image {
/**
* The ID of this plugin.
*
* @since 0.1.0
* @access private
* @var string $name The ID of this plugin.
*/
private $name;
private $version;
public function __construct() {
$this->name = 'acme-footer-image';
$this->version = '1.0.0';
}
/**
* Defines the hooks that will register and enqueue the JavaScriot
* and the meta box that will render the option.
*
* @since 0.1.0
*/
public function run() {
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );
add_action( 'save_post', array( $this, 'save_post' ) );
add_action( 'the_content', array( $this, 'the_content' ) );
}
/**
* Renders the meta box on the post and pages.
*
* @since 0.1.0
*/
public function add_meta_box() {
$screens = array( 'post', 'page' );
foreach ( $screens as $screen ) {
add_meta_box(
$this->name,
'Media featured Image',
array( $this, 'display_featured_footer_image' ),
$screen,
'side'
);
}
}
/**
* Registers the JavaScript for handling the media uploader.
*
* @since 0.1.0
*/
public function enqueue_scripts()
wp_enqueue_media();
wp_enqueue_script(
$this->name,
plugin_dir_url( __FILE__ ) . 'js/admin.js',
array( 'jquery' ),
$this->version,
'all'
);
}
/**
* Registers the stylesheets for handling the meta box
*
* @since 0.2.0
*/
public function enqueue_styles() {
wp_enqueue_style(
$this->name,
plugin_dir_url( __FILE__ ) . 'css/admin.css',
array()
);
}
/**
* Sanitized and saves the post featured footer image meta data specific with this post.
*
* @param int $post_id The ID of the post with which we're currently working.
* @since 1.0.0
*/
public function save_post( $post_id ) {
if ( isset( $_REQUEST['footer-thumbnail-src'] ) ) {
update_post_meta( $post_id, 'footer-thumbnail-src', sanitize_text_field( $_REQUEST['footer-thumbnail-src'] ) );
}
if ( isset( $_REQUEST['footer-thumbnail-title'] ) ) {
update_post_meta( $post_id, 'footer-thumbnail-title', sanitize_text_field( $_REQUEST['footer-thumbnail-title'] ) );
}
if ( isset( $_REQUEST['footer-thumbnail-alt'] ) ) {
update_post_meta( $post_id, 'footer-thumbnail-alt', sanitize_text_field( $_REQUEST['footer-thumbnail-alt'] ) );
}
}
/**
* If the current post is a single post, check to see if there is a featured image.
* If so, append is to the post content prior to rendering the post.
*
* @param string $content The content of the post.
* @since 1.0.0
*/
public function the_content( $content ) {
// We only care about appending the image to single pages
if ( is_single() ) {
// In order to append an image, there has to be at least a source attribute
if ( '' !== ( $src = get_post_meta( get_the_ID(), 'footer-thumbnail-src', true ) ) ) {
// read the remaining attributes even if they are empty strings
$alt = get_post_meta( get_the_ID(), 'footer-thumbnail-alt', true );
$title = get_post_meta( get_the_ID(), 'footer-thumbnail-title', true );
// create the image element within its own container
$img_html = '<p id="footer-thumbnail">';
$img_html .= "<img src='$src' alt='$alt' title='$title' />";
$img_html .= '</p><!-- #footer-thumbnail -->';
// append it to the content
$content .= $img_html;
}
}
return $content;
}
/**
* Renders the view that displays the contents for the meta box that for triggering
* the meta box.
*
* @param WP_Post $post The post object
* @since 0.1.0
*/
public function display_featured_footer_image( $post ) {
include_once( dirname( __FILE__ ) . '/views/admin.php' );
}
}

Inside the admin folder we make a css folder and in css folder create a file name admin.css . In this css file we write a code which is given below :-

#featured-footer-image-container img {#featured-footer-image-container img {

width:  100%;
height: auto;

}

 

#featured-footer-image-info {
display: none;
}

The post is not over, Here also we make a two more folder inside the admin folder , one is js and another is views. In the js folder we create a javascript file whose name is admin.js

The code in admin.js file is given below :-

 /**/** * Callback function for the 'click' event of the 'Set Footer Image' * anchor in its meta box. * * Displays the media uploader for selecting an image. * * @param    object    $    A reference to the jQuery object * @since    0.1.0 */function renderMediaUploader( $ ) { 'use strict';
var file_frame, image_data, json;
/** * If an instance of file_frame already exists, then we can open it * rather than creating a new instance. */ if ( undefined !== file_frame ) {
file_frame.open(); return;
}
/** * If we're this far, then an instance does not exist, so we need to * create our own. * * Here, use the wp.media library to define the settings of the Media * Uploader. We're opting to use the 'post' frame which is a template * defined in WordPress core and are initializing the file frame * with the 'insert' state. * * We're also not allowing the user to select more than one image. */ file_frame = wp.media.frames.file_frame = wp.media({ frame:    'post', state:    'insert', multiple: false });
/** * Setup an event handler for what to do when an image has been * selected. * * Since we're using the 'view' state when initializing * the file_frame, we need to make sure that the handler is attached * to the insert event. */ file_frame.on( 'insert', function() {
// Read the JSON data returned from the Media Uploader json = file_frame.state().get( 'selection' ).first().toJSON();
// First, make sure that we have the URL of an image to display if ( 0 > $.trim( json.url.length ) ) { return; }
// After that, set the properties of the image and display it $( '#featured-footer-image-container' ) .children( 'img' ) .attr( 'src', json.url ) .attr( 'alt', json.caption ) .attr( 'title', json.title ) .show() .parent() .removeClass( 'hidden' );
// Next, hide the anchor responsible for allowing the user to select an image $( '#featured-footer-image-container' ) .prev() .hide();
// Display the anchor for the removing the featured image $( '#featured-footer-image-container' ) .next() .show();
// Store the image's information into the meta data fields $( '#footer-thumbnail-src' ).val( json.url ); $( '#footer-thumbnail-title' ).val( json.title ); $( '#footer-thumbnail-alt' ).val( json.title );
});
// Now display the actual file_frame file_frame.open();
}
/** * Callback function for the 'click' event of the 'Remove Footer Image' * anchor in its meta box. * * Resets the meta box by hiding the image and by hiding the 'Remove * Footer Image' container. * * @param    object    $    A reference to the jQuery object * @since    0.2.0 */function resetUploadForm( $ ) { 'use strict';
// First, we'll hide the image $( '#featured-footer-image-container' ) .children( 'img' ) .hide();
// Then display the previous container $( '#featured-footer-image-container' ) .prev() .show();
// We add the 'hidden' class back to this anchor's parent $( '#featured-footer-image-container' ) .next() .hide() .addClass( 'hidden' );
// Finally, we reset the meta data input fields $( '#featured-footer-image-info' ) .children() .val( '' );
}
/** * Checks to see if the input field for the thumbnail source has a value. * If so, then the image and the 'Remove featured image' anchor are displayed. * * Otherwise, the standard anchor is rendered. * * @param    object    $    A reference to the jQuery object * @since    1.0.0 */function renderFeaturedImage( $ ) {
/* If a thumbnail URL has been associated with this image * Then we need to display the image and the reset link. */ if ( '' !== $.trim ( $( '#footer-thumbnail-src' ).val() ) ) {
$( '#featured-footer-image-container' ).removeClass( 'hidden' );
$( '#set-footer-thumbnail' ) .parent() .hide();
$( '#remove-footer-thumbnail' ) .parent() .removeClass( 'hidden' );
}
}
(function( $ ) { 'use strict';
$(function() {
renderFeaturedImage( $ );
$( '#set-footer-thumbnail' ).on( 'click', function( evt ) {
// Stop the anchor's default behavior evt.preventDefault();
// Display the media uploader renderMediaUploader( $ );
});
$( '#remove-footer-thumbnail' ).on( 'click', function( evt ) {
// Stop the anchor's default behavior evt.preventDefault();
// Remove the image, toggle the anchors resetUploadForm( $ );
});
});
})( jQuery );

 

Next we create a file name admin.php which is in the views folder. In the admin.php we write the code which i can given below :-

After doing all this you see :-

 

Leave a Reply