How To Create WordPress Plugin

To Create WordPress Plugin you need to know how basic php , css and html works.
Here is some function which ussually i used for wordpress plugin.

PREFIX

It’s suggested to prefix your function and variable. For example using mfp (My First Plugin). Here is the example $mfp_string , mfp_function.

DIR and URL

You can detect directory and url WordPress Plugin using function plugin_dir_path( FILE ) and plugin_dir_url( FILE ).
I ussually use constant some constanta like this :

define( 'MFP_DIR' , plugin_dir_path( __FILE__ ) );
define( 'MFP_URL' , plugin_dir_url( __FILE__ ) );

HOOK

Hook is function so you don’t need to change the core code. There are 2 hooks : action and filter.

ACTION

Here are some function which you need to know : do_action , add_action and remove_action

DO_ACTION

For example your index.php in theme like this

<?php
	do_action( 'mfp_header_before' );
	echo '<div>HEADER</div>';
	do_action( 'mfp_header_after' );
	
	do_action( 'mfp_content_before' );
	echo '<div>CONTENT</div>';
	do_action( 'mfp_content_after' );
	
	do_action( 'mfp_footer_before' );
	echo '<div>FOOTER</div>';
	do_action( 'mfp_footer_after' );

?>

ADD_ACTION

You can add action in the plugin without change index.php in the theme. For example :

<?php
	function mfp_example_header_before1() {
		echo '<div>HEADER BEFORE 1</div>';
	}
	add_action( 'mfp_header_before','mfp_example_header_before1' );
	
	function mfp_example_header_before2() {
		echo '<div>HEADER BEFORE 2</div>';
	}
	add_action( 'mfp_header_before','mfp_example_header_before2' );
	
	function mfp_example_footer_before1() {
		echo '<div>FOOTER BEFORE 1</div>';
	}
	add_action( 'mfp_footer_before','mfp_example_footer_before1' );
?>

REMOVE_ACTION

If you want to remove just use for example remove_action( ‘mfp_header_before’,’mfp_example_header_before2′ ); or if you want to remove all action remove_all_actions( ‘mfp_header_before’ );

WORDPRESS ACTION STANDAR WHICH YOU NEED TO KNOW : wp_head , wp_footer

FILTER

Filter is hook for variable. Function which you need to know apply_filters and add_filter.
Example :

<?php
	function mfp_do_filter( $mfp_text ) {
		$mfp_text = "VAR DO FILTER";
		return $mfp_text;
	}
	add_filter( 'mfp_var_filter', 'mfp_do_filter' );
	
	function mfp_apply_filter() {
		$mfp_var = "VAR APPLY FILTER";
		$mfp_var = apply_filters( 'mfp_var_filter' , $mfp_var );
		echo $mfp_var;
	}
	
	mfp_apply_filter();
?>

REMOVE_FILTER

If you want to remove filter. Just use for example remove_filter( ‘mfp_var_filter’ , ‘mfp_do_filter’ ); or if you want ro remove all just use function remove_all_filter( ‘mfp_var_filter’ );

WORDPRESS FILTER WHICH YOU NEED TO KNOW : the_content

After you know some basic functions now it’s time to create your first plugin.
HERE IS SAMPLE FIRST PLUGIN TO INSERT BEFORE AND AFTER CONTENT IN THE POST / PAGE

<?php
/*
Plugin Name: My First Plugin
Plugin URI: http://wpamanuke.com/how-to-create-wordpress-plugin/
Description: First plugin which i made
Version: 1.0
Author: WPAmanuke
Author URI: http://wpamanuke.com
License: GPLv2
*/

function mfp_filter_the_content_before( $content ) {
    $custom_content = '<div>Before Content Filter</div>';
    $custom_content .= $content;
    return $custom_content;
}
add_filter( 'the_content', 'mfp_filter_the_content_before' );

function mfp_filter_the_content_after( $content ) {
    $custom_content = '<div>After Content Filter</div>';
    $custom_content = $content . $custom_content;
    return $custom_content;
}
add_filter( 'the_content', 'mfp_filter_the_content_after' );

?>

Simple HTML Tutorial

HTML is the standard markup language for creating Web pages. Before you code wordpress theme, first you must learn html and css. HTML is the standard markup language for creating Web pages. Because HTML describe structure of web pages using markup and the markup is element to build html block.
The most basic html document is like this :

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>

NOTES

  • The <head> element contains meta information about the document
  • The <body> element contains the visible page content

Here is simple standard HTML Document

    <!DOCTYPE html>
    <html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <h1>My Heading</h1>
        <p>My Paragraph.</p>
    </body>
    </html>

The output above html will be like this :

Because the output still plain , you need to styling the html with css. Styling here means coloring , font-size , padding etc.
Here the sample styling with embedded css ( using style ) :

    <!DOCTYPE html>
    <html>
    <head>
        <title>My Title</title>
        <style>
            h1 {
                color: #ff0000;
                font-size: 50px;
                text-transform: uppercase;
            }
            p {
                color: #0000ff;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <h1>My Heading</h1>
        <p>My Paragraph.</p>
    </body>
    </html>

And here is the output

I hope this simple html tutorial help you to know very basic HTML and CSS

How To Make Simple Basic WordPress Theme From Scratch For Beginner

Before you make wordpress theme from scratch. You must know basic about html , css , php and javascript.
Just know the basic only is enough for learning purpose. But if you still don’t know the basic , just try it first and try improve later.
Actually to make simple wordpress theme basic which work , you only need 2 files :
1. index.php
2. style.css
Because it’s only introduction for wordpress theme code for very beginner programmer .
So i only will make that 2 file .
First you need to make folder /wp-content/themes/mysimplebasic
and create 2 files index.php and style.css
Just file index.php like this :

<?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            echo '<div class="msb-post">';
                the_title(
                    '<header class="entry-header"><h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">',
                    '</a></h3></header>'
                );
                echo '<div class="entry-summary">';
                    the_excerpt();
                echo '</div>';
            echo '</div>';
        endwhile;
	the_posts_pagination();
    else :
        echo "There is no post";
    endif;
?>

And create style.css like this :


/*
Theme Name: MySimpleBasic
Theme URI: http://wpamanuke.com/how-to-make-simple-basic-wordpress-theme-from-scratch-for-beginner/
Description: Very Simple Basic WordPress Theme For Beginner
Author: WPAmaNuke
Author URI: http://www.wpamanuke.com/
Version: 1.0.1
Tags: one-column
Text Domain: mysimplebasic
Domain Path: /languages/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

That’s it. You just create very basic wordpress theme.

Secret Tools For Web Developer For Perfect Pixel Website Design

Because i’m a web developer , i didn’t too notice pixel perfect from the design ( just like padding , size , margin etc) So often website which i have developed get protest from website designer / client because it’s not pixel perfect. So after some year and get more experience, Here are some tools which i use to make website which  perfect pixel with website design :

  • PixelSake : It’s a tool to measure 2 element in screen automatically using mouse , save object to png and color picker . So you can save hours than measure 2 element manually. You can see the video here :
  • PerfectPixel  Add Ons (It’s available in Chrome and Firefox). It will load your website design to your live website and you can do comparison if it has been pixel perfect lively
  • ColorZilla Add Ons (Availabe in Chrome and Firefox) for pick color
  • PixelZoomer Add Ons (Availabe in Chrome and Firefox) for measure manually and it also have pick color too.
  • Firefox Web Developer Inspector. You can use default Firefox Inspector for measure manually, just use Tools -> Web Developer -> Inspector , Click Toolbox Options (it’s an icon in the bottom right (usually icon number three from right)) , Available Toolbox Buttons and Just check   Measure Portion of a Page
  • Dimension Add Ons (Available in Chrome) for Measure Automatically , It’s suitable if the image / screen has no gradient color.

That’s all tool which i use to make better wordpress theme pixel perfect .