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.

wp_ajax_

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.

wp_ajax_nopriv_

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

REF : https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_nopriv_(action)

Advertisements

Best Web Development Tutorials For Beginners

W3schools

https://www.w3schools.com

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

TutorialsPoint

https://www.tutorialspoint.com/

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

https://css-tricks.com

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

Codrops

https://tympanus.net/codrops/

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

GitHub

https://github.com/

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

https://stackoverflow.com/

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 {
    font-size:20px;
    color:#000;
    padding-bottom:10px;
    margin-top:20px;
    }
    					
    /* Good */
    .heading { font-size:20px; color:#000; padding-bottom:10px; margin-top:20px; }
    			

  • Take care about the missing the bracket, semicolumn

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

  • 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>	
    			

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

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]-->

<head>

	<meta charset="utf-8">

	<!--
		HTML5 Reset: https://github.com/murtaugh/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!) -->
	<title>HTML5-Reset</title>
	<meta name="author" content="" />
	<meta name="description" content="" />

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

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

	<!--  Mobile Viewport
	http://j.mp/mobileviewport & http://davidbcalhoun.com/2010/viewport-metatag
	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: http://iconifier.net -->
	<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 (http://leaverou.github.io/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. (http://modernizr.com)
		  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 https://dev.twitter.com/docs/cards/types/summary-card 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 http://ogp.me/ for details -->
	<meta property="og:title" content="" />
	<meta property="og:description" content="" />
	<meta property="og:url" content="" />
	<meta property="og:image" content="" />

</head>

<body>

<div class="wrapper"><!-- not needed? up to you: http://camendesign.com/code/developpeurs_sans_frontieres -->

	<header>

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

		<nav>

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

		</nav>

	</header>

	<article>

		<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>

	</article>

	<aside>

		<h2>Sidebar Content</h2>

	</aside>

	<footer>

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

	</footer>

</div>

<!-- 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">
	$(document).ready(function(){
		
	});
</script>

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

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

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

</script>
-->

</body>
</html>		
	

Reference : HTML5-Reset