How To Create ShortCode WordPress Plugin

Shortcode are special code in wordpress to show specific function with easy efforts. Shortcode is begin with [ and end with ]. For example function which we will display amazon product with shortcode [azproduct]. With shortcode you can use function coloring easily, or if you need only specific parameter change, shortcode is perfect for your needs.

To enable shortcode you must register it with function :

add_shortcode( 'your_shortcode_name', 'your_shortcode_function' );
function your_shortcode_function($attr,$content) {
}

Here is sample amazon link shortcode code :

<?php
/*
Plugin Name: ZZ Amazon Product ShortCode
Plugin URI: http://www.wpamanuke.com
Description: Sample ShortCode Code
Version: 1.0.1
Author: WPAmaNuke
Author URI: https://wpamanuke.com
*/

add_shortcode( 'azproduct', 'azproduct_link' );

// The callback function that will replace [azproduct]
function azproduct_link( $attr ) {
	
	$asin = '0385495323';
	if ( isset( $attr['asin'] ) ) {
		$asin = $attr['asin'];
	}
	
	$title= 'Buy Now';
	if ( isset( $attr['title'] ) ) {
		$title = $attr['title'];
	}
	
	return '<a href="http://www.amazon.com/dp/'. $asin .'" > '. $title .' </a > ';
}

add_shortcode( 'azproduct_content', 'azproduct_content' );
function azproduct_content( $attr , $content) {
	$a = shortcode_atts( array(
	  'color' => '',
	  'bgcolor' => ''
	), $attr );
	
	return '<div style="color:'. $a['color'] .';background-color:' . $a['bgcolor'] .';">'. $content . '</div>';
}
You can use shortcode in your editor with code like this : 
[azproduct asin="1476755744" title="Red Notice"]
[azproduct_content color="#ff0000" bgcolor="#cc0cc0"]This is contents[/azproduct_content]

How To Create WordPress Widget Plugin

Widget is small block which perform specific function. Widget ussualy put in the sidebar or footer. You can list widgets which are ready in your wordpress from admin area Appearance » Widgets section in your WordPress dashboard.

To program widget here is some codes skeletons which you need to know

function your_register_widgets() {
	register_widget('your_widget_class');
}
add_action('widgets_init', 'your_register_widgets');

class your_widget_class extends WP_Widget {
	function __construct() {
	}
	function widget($args, $instance) {
	}
	function update($new_instance, $old_instance) {
	}
	function form($instance) {
	}
}
<?php
/*
Plugin Name: ZZ Widgets
Plugin URI: http://www.wpamanuke.com
Description: Sample Widgets Code
Version: 1.0.1
Author: WPAmaNuke
Author URI: https://wpamanuke.com
*/

function zz_register_widgets() {
	register_widget('zz_widget');
}
add_action('widgets_init', 'zz_register_widgets');

class zz_widget extends WP_Widget { 
	function __construct() {
		parent::__construct(
			'zz_widget', esc_html_x( 'ZZ Widget' , 'widget name', 'zz-widget' ),
			array(
				'classname' => 'zz-widget',
				'description' => esc_html__( 'ZZ Widget Post ' , 'zz-widget' ),
				'customize_selective_refresh' => true
			)
		);
	}
	function widget($args, $instance) {
		$defaults = array('title' => '', 'category' => 0, 'tags' => '', 'postcount' => 5, 'offset' => 0, 'sticky' => 1);
        $instance = wp_parse_args($instance, $defaults);
		$query_args = array();
		$query_args['ignore_sticky_posts'] = $instance['sticky'];
		if (0 !== $instance['category']) {
			$query_args['cat'] = $instance['category'];
		}
		if (!empty($instance['tags'])) {
			$tag_slugs = explode(',', $instance['tags']);
			$tag_slugs = array_map('trim', $tag_slugs);
			$query_args['tag_slug__in'] = $tag_slugs;
		}
		if (!empty($instance['postcount'])) {
			$query_args['posts_per_page'] = $instance['postcount'];
		}
		if (0 !== $instance['offset']) {
			$query_args['offset'] = $instance['offset'];
		}
	    
		$widget_posts = new WP_Query($query_args);
		echo wp_kses_post( $args['before_widget'] );
			if ($widget_posts->have_posts()) :
				$last = $widget_posts->post_count;
				$i = 0;
				if (!empty($instance['title'])) {
					$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
					$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
					echo wp_kses_post( $args['before_title'] ) . esc_html( $title ) . wp_kses_post( $args['after_title'] );
				}
				echo '<ul class="zz-widget-block">' . "\n";
					while ($widget_posts->have_posts()) : $widget_posts->the_post();
						 echo "<li>
						<a href='";
						the_permalink();
						echo "'>";
						the_title();  
						echo "</a>
						</li>";
					endwhile;
				echo '</ul>' . "\n";
			endif;
			wp_reset_postdata();
			
		echo wp_kses_post( $args['after_widget'] );
		
    }
	function update($new_instance, $old_instance) {
        $instance = array();
        if (!empty($new_instance['title'])) {
			$instance['title'] = sanitize_text_field($new_instance['title']);
		}
        if (0 !== absint($new_instance['category'])) {
			$instance['category'] = absint($new_instance['category']);
		}
		if (!empty($new_instance['tags'])) {
			$tag_slugs = explode(',', $new_instance['tags']);
			$tag_slugs = array_map('sanitize_title', $tag_slugs);
			$instance['tags'] = implode(', ', $tag_slugs);
		}
		if (0 !== absint($new_instance['postcount'])) {
			if (absint($new_instance['postcount']) > 50) {
				$instance['postcount'] = 50;
			} else {
				$instance['postcount'] = absint($new_instance['postcount']);
			}
		}
		if (0 !== absint($new_instance['offset'])) {
			if (absint($new_instance['offset']) > 50) {
				$instance['offset'] = 50;
			} else {
				$instance['offset'] = absint($new_instance['offset']);
			}
		}
        return $instance;
    }
    function form($instance) {
        $defaults = array('title' => '', 'category' => 0, 'tags' => '', 'postcount' => 5, 'offset' => 0, 'sticky' => 1);
        $instance = wp_parse_args($instance, $defaults); ?>
        <p>
        	<label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Title:', 'zz-widget'); ?></label>
			<input class="widefat" type="text" value="<?php echo esc_attr($instance['title']); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" id="<?php echo esc_attr($this->get_field_id('title')); ?>" />
        </p>
		<p>
            <label for="<?php echo esc_attr($this->get_field_id('category')); ?>"><?php esc_html_e('Select a Category:', 'zz-widget'); ?></label>
            <select id="<?php echo esc_attr($this->get_field_id('category')); ?>" class="widefat" name="<?php echo esc_attr($this->get_field_name('category')); ?>">
            	<option value="0" <?php selected(0, $instance['category']); ?>><?php esc_html_e('All', 'zz-widget'); ?></option><?php
            		$categories = get_categories();
            		foreach ($categories as $cat) { ?>
            			<option value="<?php echo absint($cat->cat_ID); ?>" <?php selected($cat->cat_ID, $instance['category']); ?>><?php echo esc_html($cat->cat_name) . ' (' . absint($cat->category_count) . ')'; ?></option><?php
            		} ?>
            </select>
            <small><?php esc_html_e('Select a category to display posts from.', 'zz-widget'); ?></small>
		</p>
		<p>
        	<label for="<?php echo esc_attr($this->get_field_id('tags')); ?>"><?php esc_html_e('Filter Posts by Tags (e.g. lifestyle):', 'zz-widget'); ?></label>
			<input class="widefat" type="text" value="<?php echo esc_attr($instance['tags']); ?>" name="<?php echo esc_attr($this->get_field_name('tags')); ?>" id="<?php echo esc_attr($this->get_field_id('tags')); ?>" />
	    </p>
        <p>
        	<label for="<?php echo esc_attr($this->get_field_id('postcount')); ?>"><?php esc_html_e('Post Count (max. 50):', 'zz-widget'); ?></label>
			<input class="widefat" type="text" value="<?php echo absint($instance['postcount']); ?>" name="<?php echo esc_attr($this->get_field_name('postcount')); ?>" id="<?php echo esc_attr($this->get_field_id('postcount')); ?>" />
	    </p>
	    <p>
        	<label for="<?php echo esc_attr($this->get_field_id('offset')); ?>"><?php esc_html_e('Skip Posts (max. 50):', 'zz-widget'); ?></label>
			<input class="widefat" type="text" value="<?php echo absint($instance['offset']); ?>" name="<?php echo esc_attr($this->get_field_name('offset')); ?>" id="<?php echo esc_attr($this->get_field_id('offset')); ?>" />
	    </p><?php
    }
}

How To Make Your WordPress Website Load Faster

To make your website load faster if you are using wordpress here is some checklists which you need to know

  • Choose good website hosting (website server) and which is suitable for your needs. Why you must choose good hosting ? Because website hosting can determine your website loading. If you want to make website for shopping, it has different need when you want to make website for blogging
  • Choose minimalist theme for fast response. Multipurpose theme ussually has a lot resources which need to be loaded. Because it has many purpose functions , css and javascripts files. Choose theme which is specific for your needs. Anyway you don’t need all the functions.
  • Don’t use too many plugins. I think , the ideal plugins should be less than 6. If you use too many , it will slow your website
  • Compress your javascript , css and images.
  • Always update your theme and plugin so suitable with your WordPress version
  • Use CDN
  • Using caching plugins like w3 total cache
  • Deactivate Trackback and Pingback
  • Delete Old Revision Post. You can use revision control plugin

How To Create Twenty Nineteen Child Theme

Sometimes we need to create wordpress theme child for modification css only. We need to create child theme because regular update on parent theme so we don’t need to change code if there is new update. Here is the way to create child theme for Nineteen Child Theme :

  • Create folder nineteen-child
  • Create file style.css
  • Create file functions.php

That’s very simple. For the structure of sytle.css is like this :

/*
Theme Name: Twenty Nineteen Child
Theme URL: http://wpamanuke.com/
Description: Twenty Seventeen Child Theme
Author: WPAmaNuke
Author URL: http://wpamanuke.com/
Template: twentynineteen
Version: 1.0.0
Text Domain: twentynineteen-child
*/ 
/* Custom CSS goes after this line */

.entry .entry-title a {
	color:#ff0000;
}

For modifying css , you need to use firefox web developer inspector or chrome devtools and do some experiment

To include parent style.css you need to create file functions.php and add code like this :

<?php

	add_action( 'wp_enqueue_scripts', 'tnt_enqueue_parent_styles' );

	function tnt_enqueue_parent_styles() {
	   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
	}

?>

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 .
 

Experiment Create WordPress Theme To Submit WordPress.Org in 2018

Here is my experiment in 2018 to develop wordpress theme which is free which will be uploaded to wordpress.org.  This year (2018)  ,  i success upload my first Coming Soon WP Plugin AmaUCP ( a plugin to show underconstruction / coming soon page ) in wordpress.org which take only 3 days for approvement. I want to try upload a free wordpress theme, because my my plugin not succesfull only 3 download in a week :))  ( Just like my 2012  plugin which i had forgotten the password for uploading, so this year  i make a new account ) . Although it’s fail,  but it’s ok , it’s just a hobby project.  I want to make 6 – 12 free small high quality programs in a year which i hope can be usefull and have many users. It can be WordPress related or Android App or Any Programming Related Project .
So before theme development  some months ago, i have made some research . And here is i think some free themes / plugin which can become base for my magazine theme :

  • MH Magazine Lite : I have compared some free themes and i like the coding of MH Magazine , it’s very structure and i really like the code. It’s unussual code because using many do_action but after i see it, I now understand why it’s very success .
  • Stargazer : this theme has social menu which can become menu social icon. After i see it , the social icon menu just using css based on the url. Another wow. I have never thought about this trick.  Here is the sample css of Stargazer :
    #menu-social li a[href*="pinterest.com"]::before {
     content:'\f210';
     color:#c8232c
    }
  • News Portal : this theme has repeater social icon and news ticker. I don’t know yet what what repeater field will be used for in customizer. But i like the concept of repeater programming because i have not seen it before except when using kirki plugins.
  • Simple Category Posts Widget : this plugin can make multiple categories selection in widget
  • Loco Translate : It can make po file for translation.

And here my requirement for my theme :

  • Using Bootstrap for responsive screen
  • It must support Site Origin Page Builder  : I like the page builder , it can include the widget  too in the builder column.
  • SEO Friendly
  • Using WordPress Coding Standard
  • Simple and Fast

Some notes. Free Themes which are uploaded in wordpress.org must be tested using :

  • Theme Check : to check the standard code in theme
  • Theme Sniffer. ( Just download Option 1 : Easy . There is a zip file for releases code . If you download using Clone/Download you must install node and do the hardway )
  • Query Monitor
  • Debug Bar
  • Log Deprecated Notices
  • Monster Widget
  • WordPress Beta Tester
  • Regenerate Thumbnails

I thinks those theme will be good concept for my magazine theme.  I have made it 50% and i think it will be completed in some weeks.
Update :
I have uploaded my theme version 1.0.0 on 5 Febuary 2018 . Just using https://wordpress.org/themes/upload/
After i upload it, the website directly ask to reupload with version 1.0.1 , so which i must do only change style.css with version 1.0.1.
After that show scan message :

Just need some weeks to know if it’s approved or not

Here is the result (16 April 2018):

  • First upload 5 Febuary 2018 . Get Open Status.
  • After wait 8 weeks , get review 29 March 2018 , need 3 days to fix error and requirement. Get Reviewing Status
  • After that still wait 7 days (not finished yet) to talk about license. It seem because i have portfolio in themeforest and preview which link  to 404 error page my free theme (  i move web server and themeforest html template which was made 4 years ago link to 404 error page ,because i forget to upload the html template) . Another problem, i have PSD which convert to theme by another user because i sell the copyright license (4 years ago ) , so i have been asked about relation with the another user ,  just still waiting (7 April 2018) . I think the license problem is the most retiring lol . ( I think , i more prefer make wordpress plugin than theme lol , it’s easier. So if you have any ideas about plugins just give me inputs in the comment form ) . Finally it get status approved (7 April 2018)  and now enter Final Review: Approved Themes Not Yet Live  for another testing review
  • So before you upload themes in wordpress.org just make sure if you sell WordPress Theme which have GPL License in your website / marketplace. Because GPL License it’s about pilosophy  . And make clear about license in readme.txt about license javascript , images with url , inspiration theme etc .
  • Finally my free themes live approved (26 April 2018) . You can see here : NYSU Magazine on WordPress.org
  • So here the process
    • 5 Febuari 2018 : First Upload (Status : Open)
    • 29 March 2018 : (Status : Reviewing)
    • 7 April 2018 : (Status : Approved)
    • 26 April 2018 : (Status: Live)
    • Take 12 weeks to get wordpress theme live for newbies like me.
    • For update theme which has status live , it will be auto approved by themetracbot

Anyway here are some references which i have found , for you who want to upload theme to wordpress.org

Hope it’s usefull