Simple Contact Information Widget

Hello Guys,
I have launched my 1st wordpress plugin Simple Contact Information Widget last week.

Plugin contains following features :

  • Contact information widget saved contact information and display in your widget area.
  • Fully customizable widget.
  • Show/Hide Label
  • Show/Hide Icon
  • Change label and icon by custom css.
  • Change the order of information by custom css.
  • Use the google map in contact information specify height and width also.

Please download and give review the plugin hope you like that and follow the blog for regular update.


How to setup the google reCAPTCHA

STEP :-1

Create reCAPTCHA API keys from recaptcha admin.

STEP :-2 [Client Side]

Add the recaptcha api js and render explicit.

Put below code in bottom of page:

function init_google_captcha() {
	if( jQuery('#home-contact-captcha').length>0 ) {
		captcha_home_contact = grecaptcha.render('home-contact-captcha',{
		 'sitekey' : '6LeJTT8UAAAAABjGeM6FpNutjh9_4t5sTixpnpdq',
		 'theme' : 'light'


STEP :-3 [Server Side]

While submit the form you got the post variable with name “g-recaptcha-response”.

For verify the response use the below API_URL.

You have to add the secret, response, remoteip vars with URL and post the data.

-Sample snippet


if( $this->input->post('g-recaptcha-response') ) {
	$recaptcha_response = $this->input->post('g-recaptcha-response');
	$response = file_get_contents("" . $reCAPTCHA_secret_key . "&response=" . $recaptcha_response . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
	$response = json_decode($response);
	if ( isset($response->success) && $response->success == 1 ) {
		//validate successfully.

Ref :

WordPress : main different between wp_ajax and wp_ajax_nopriv

Sometime ago I’ve faced the issue with AJAX in wordpress that always returns 0 so i share these artical that help the beginner to work with ajax in wordpres.

wp_ajax and wp_ajax_nopriv are actions of wordpress cms.


This hook allows you to create custom handlers for your own custom AJAX requests. The wp_ajax_ hook follows the format “wp_ajax_$youraction”, where $youraction is your AJAX request’s ‘action’ property.

The wp_ajax_ hook only fires for logged-in users. If you need to also listen for Ajax requests that don’t come from logged-in users.


This hook is functionally the same as wp_ajax_(action), however it is used to handle AJAX requests on the front-end for unauthenticated users, i.e. when is_user_logged_in() returns false. Unlike wp_ajax_(action) the ajaxurl javascript global property will not be automatically defined and must be included manually or by using wp_localize_script() with admin_url( ‘admin-ajax.php’ ) as the data


Best Web Development Tutorials For Beginners


W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.


Free tutorials and reference manuals with examples for Kubernetes, Spring JDBC, Java Concurrency, Gerrit, Spring AOP, Spring MVC, Apache Solr, Excel Power View, Sencha Touch, Tex Commands, Agile Testing, Apache Tajo, C++ Library, MariaDB, SAP QM, SAP SOLMAN, SAP SCM, MS Access, KoaJS, OAuth2.0, Scrapy, SAP CCA, SAP PM, SAPUI5, Cognos, Internet of Things, Rural Marketing, Trampolining, Golf, Angular2, Framework7, Arduino, CherryPy, Firebase, SAP C4C, SAP Dashboard, SAP PI, ExpressJS, Design Thinking, Internet Security, PyGTK, Apache Drill, Excel Charts, Elastic Search, Computer Security, Extreme Programming, Behavior Driven Development, Conversion Rate Optimization, SAP Basis, Business Law, Kanban, Erlang, SAP Payroll, ASP.Net WP, PouchDB, MFC, SAP HR, Yii, Clojure, Aurelia, CoffeeScript, CPanel, Laravel, SAP Webi, MS SQL Server, pinterest, Indian Polity, Windows10, Teradata

CSS Tricks

Tips, Tricks, and Techniques on using Cascading Style Sheets.


Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.


GitHub is a web-based Git or version control repository and Internet hosting service. It is mostly used for code. It offers all of the distributed version control and source code management functionality of Git as well as adding its own features.

Stack Overflow

Stack Overflow is the largest online community for programmers to learn, share their knowledge, and advance their careers.

CSS Tips : Any web developer should know

I’ve completed many html project and here i am share some basic tips that should know the developer.

  • Habit to write the css within a line single line

    /* Bad */
    .heading {
    /* Good */
    .heading { font-size:20px; color:#000; padding-bottom:10px; margin-top:20px; }

  • Take care about the missing the bracket, semicolumn

    .heading {
    color:#000 //bad

  • Color code can be use with three letter or six.

    /* good */
    .heading { color:#000; background-color:#dddddd; }
    /* bad */
    .heading { color:#0000; }			

  • Avoid the use of !important

    Increase the precedency rathar then putting to important

  • Try to use the separate properties for background.

    /* good */
    .heading { background-color: #000; background-repeat: no-repeat; background-image:url(); background-position:center center; }
    /* bad */
    .heading { background: <background-color> <background-image> <background-position> }

  • Give overlay of image with background-color

    .overlay { background-color:rgba(0,0,0,0.5); }

  • Media query should be write after the main style to overwrite the style

    /* Main Style */
    .css { color:rgba(0,0,0,0); }
    /* Media Style */
    @media (max-width:450px){
    	.css { color: #ddd; }

  • Clear the floating

    .clear { clear:both; }
    .p-left { float:left; }
    <div class="p-left"></div>
    <div class="p-left"></div>
    <div class="clear"></div>	

Which is the best CMS framework?

Simple template for create HTML5 project

Here is sample template for starting the HTML5 Project.

File Structure :

  • ProjectName
    • assets
      • css
        • reset.css
        • responsive.css
        • style.css
      • fonts
      • images
      • js
        • jquery-1.11.3.min.js
        • modernizr-3.2.0.base.js
        • prefixfree.min.js
    • index.html


<!doctype html>

<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->


	<meta charset="utf-8">

		HTML5 Reset:
		Free to use

	<!-- Always force latest IE rendering engine (even in intranet) -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- Important stuff for SEO, don't neglect. (And don't dupicate values across your site!) -->
	<meta name="author" content="" />
	<meta name="description" content="" />

	<!-- Don't forget to set your site up: -->
	<meta name="google-site-verification" content="" />

	<!-- Who owns the content of this site? -->
	<meta name="Copyright" content="" />

	<!--  Mobile Viewport &
	device-width : Occupy full width of the screen in its current orientation
	initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
	maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width (wrong for most sites)
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Use Iconifyer to generate all the favicons and touch icons you need: -->
	<link rel="shortcut icon" href="favicon.ico" />

	<!-- concatenate and minify for production -->
	<link rel="stylesheet" href="assets/css/reset.css" />
	<link rel="stylesheet" href="assets/css/style.css" />
	<!-- media query -->
	<link rel="stylesheet" href="assets/css/responsive.css" />

	<!-- Lea Verou's prefixfree (, lets you use un-prefixed properties in your CSS files -->
	<script src="assets/js/libs/prefixfree.min.js"></script>

	<!-- This is a minimized, base version of Modernizr. (
		  You will need to create new builds to get the detects you need. -->
	<script src="assets/js/libs/modernizr-3.2.0.base.js"></script>

	<!-- Twitter: see for details -->
	<meta name="twitter:card" content="">
	<meta name="twitter:site" content="">
	<meta name="twitter:title" content="">
	<meta name="twitter:description" content="">
	<meta name="twitter:url" content="">
	<!-- Facebook (and some others) use the Open Graph protocol: see for details -->
	<meta property="og:title" content="" />
	<meta property="og:description" content="" />
	<meta property="og:url" content="" />
	<meta property="og:image" content="" />



<div class="wrapper"><!-- not needed? up to you: -->


		<h1><a href="/">Page Title</a></h1>


				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>




		<h1>Article Header</h1>

		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>

		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>



		<h2>Sidebar Content</h2>



		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>



<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script type="text/javascript" src="assets/js/libs/jquery-1.11.3.min.js"></script>

<!-- this is where we put our custom functions -->
<!-- don't forget to concatenate and minify for production -->
<script type="text/javascript" src="assets/js/functions.js"></script>
<script type="text/javascript">

<!-- Asynchronous google analytics; this is the official snippet.
	 Replace UA-XXXXXX-XX with your site's ID and uncomment to enable.

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  ga('create', 'UA-XXXXXX-XX', 'auto');
  ga('send', 'pageview');



Reference : HTML5-Reset

Blog at

Up ↑