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 Use Escape and require / include in WordPress Theme

After get experiment to upload free theme in wordpress.org here some notes which i think need attention in wordpress theme code. You need to know escape and requre_once replacement. Here is the notes :

ESCAPE

Any numeric variable used anywhere

echo int( $int );

Depending on whether it is an integer or a float, (int), absint(), (float) are all correct and acceptable. At times, number_format() or number_format_i18n() might be more appropriate.

Variable within HTML attribute ( esc_attr )

echo '<div id="', esc_attr( $prefix . '-box' . $id ), '">';

Variable URL within HTML attribute

echo '<a href="', esc_url( $url ), '">';

Passing variable to javascript via wp_localize_script()

// No escaping needed in wp_localize_script, WP will escape this.
wp_localize_script( 'your-js-handle', 'variable_name',
	array(
		'prefix_nonce' => wp_create_nonce( 'plugin-name' ),
		'ajaxurl'      => admin_url( 'admin-ajax.php' ),
		'errorMsg'     => __( 'An error occurred', 'plugin-name' ),
	)
);

Variable within javascript block

<script type="text/javascript">
    var myVar = <?php echo esc_js( $my_var ); ?>
</script>

Variable within inline javascript

<a href="#" onclick="do_something(<?php echo esc_js( $var ); ?>); return false;">
<a href="#" data-json="<?php echo esc_js ( $var ); ?>">

$var should be escaped with esc_js(), json_encode() or wp_json_encode().

Variable within HTML textarea

echo '<textarea>', esc_textarea( $data ), '</textarea>';

Variable within HTML tags

echo '<div>', wp_kses_post( $phrase ) , '</div>';

This depends on whether $phrase is expected to contain HTML or not.

  • If not, use esc_html() or any of its variants.
  • If HTML is expected, use wp_kses_post(), wp_kses_allowed_html() or wp_kses() with a set of HTML tags you want to allow.

Variable string within XML or XSL context

echo '<loc>', ent2ncr( $var ), '</loc>';

REQUIRE_ONCE / INCLUDE

require in theme folder
for example you have something like this :

require get_template_directory() . '/inc/my-functions.php';

you can change it to :

get_template_part(inc/my-functions);

require outsite theme folder

for example you have something like this :

require ABSPATH . WPINC . '/class-wp-editor.php';

you can change it to :

load_template( ABSPATH . WPINC . '/class-wp-editor.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' );

?>

Oziz WordPress Theme

Oziz is one page WordPress Theme for landing page. It’s speciality to show resume , skill , portfolio , service , biography info for your reader. It design suitable for job seeker who want to show their resume online. It use bootstrap, fontawesome. You can see the demo in : http://reviews.wpamanuke.com/homepage .

You can make changes in customizer to see the feature. If you want to use Custom Homepage than here is how to do it. Create New Page after that in the right there is Page Attributes choose Template : Custom Homepage

After that in the customizer just make setting in the every section.

Theare 8 sections :

  • About
  • Resume
  • Pricing Table
  • Portfolio
  • Testimonials
  • Team
  • Contact

I start upload in 13 March 2019 and i will see how long before it approved

Magazine News Block Gutenberg Plugin

Gutenberg has become default WordPress Text Editor right now. The princip is making each as component/block just like page builder which has been exist before. Because it’s new , i just want to experiment for learning purpose creating simple magazine news block builder plugin for gutenberg. It work using ajax for backend. For development i’m using create-guten-block from ahmadawais and learning from other existence gutenberg block. For developing gutenberg blogk , i must install nodejs and learning reactjs library. If you don’t know about React just learn in youtube , there are many good tutorials there.

Choose Magazine News Block
Magazine News Block Setting

Covfefe WordPress Theme

Covfefe WordPress Theme is my next experiment WP Theme with 3 column design.

It use FontAwesome and Bootstrap Framework 4 ( Grid and Utility) which i include in the style.css , So the css is only 1 file.  It use microformat for the php file so search engine friendly. Just using hentry , entry-title , entry-summary and entry-content. Just download the covfefe wordpress theme. You can see the demo

It still my experiment in coding WordPress Theme standard.  My next WordPress Theme experiment will be niche about Landing Page and Resume. Don’t hesitate to give input in the comments.

Headline WordPress Theme

Headline WordPress Theme is my next experiment WP Theme with simple design. I just want to know how many request people who want to download minimalist theme. So i make theme with no jQuery included only simple Javascript , simple CSS , no web font. It’s based Underscore WP Framework which i only modify a little in the css and php code. You can download free headline wordpress theme on wordpress.org. If you want to customize color and font and remove footer copyright just buy headline pro extensions plugin

It use Bootstrap Framework ( Grid and Utility) which i include in the style.css , So the css is only 1 file.  It use microformat for the php file so search engine friendly. Just using hentry , entry-title , entry-summary and entry-content. I hope it’s usefull. And if you have any ideas or request just comment on this post .