Php Tutorials: 2025

23 October 2025

How to run google search console request submission by UI vision IDE automate?

Run google search console request submission by UI vision IDE automate?

Source View --- Json Code

{

"Name": "DemoCsvReadArray",

"CreationDate": "2025-10-23",

"Commands": [

{

"Command": "executeScript_Sandbox",

"Target": "return [\n'https://freshnewnews.com/2026-fifa-world-cup-final-new-jersey-venue-predictions/',\n'https://freshnewnews.com/big-ears-festival-2026-knoxville-music-art-experience/',\n'https://freshnewnews.com/coachella-2026-your-ultimate-guide-to-headliners-dates-and-indio-music/',\n'https://freshnewnews.com/lady-gaga-mayhem-ball-tour-2026-austin-show-details-ticket-information/',\n'https://freshnewnews.com/90s-con-hartford-2026-the-ultimate-nostalgia-convention-guide/',\n'https://freshnewnews.com/route-66-centennial-2026-your-ultimate-historic-road-trip-guide/',\n'https://freshnewnews.com/america-250-philadelphia-museums-parades-birthday-bash-2026/'\n];",

"Value": "urlArray",

"Description": "All URLs to submit for indexing"

{

"Command": "open",

"Target": "https://search.google.com/u/1/search-console?resource_id=https%3A%2F%2Ffreshnewnews.com%2F",

"Value": "",

"Description": "Open GSC property"

{

"Command": "pause",

"Target": "10000",

"Value": "",

"Description": "Wait for GSC to fully load"

{

"Command": "forEach",

"Target": "urlArray",

"Value": "currentURL",

"Description": "Loop through all URLs"

{

"Command": "echo",

"Target": "Submitting URL: ${currentURL}",

"Value": "green",

"Description": ""

{

"Command": "click",

"Target": "xpath=//*[@id=\"gb\"]/div[2]/div[2]/div[2]/form/div/div/div/div/div/div/input[2]",

"Value": "",

"Targets": [

"xpath=//*[@id=\"gb\"]/div[2]/div[2]/div[2]/form/div/div/div/div/div/div/input[2]",

"xpath=//input[@type='text']",

"xpath=//input[2]",

"css=#gb > div.gb_Jd.gb_Md.gb_Xd > div.gb_Rd.gb_0d.gb_Ke.gb_Ue.gb_0e > div.gb_Je > form > div > div > div > div > div > div.d1dlne > input.Ax4B8.ZAGvjd"

"Description": ""

{

"Command": "type",

"Target": "xpath=//*[@id=\"gb\"]/div[2]/div[2]/div[2]/form/div/div/div/div/div/div/input[2]",

"Value": "${currentURL}",

"Targets": [

"xpath=//*[@id=\"gb\"]/div[2]/div[2]/div[2]/form/div/div/div/div/div/div/input[2]",

"xpath=//input[@type='text']",

"xpath=//input[2]",

"css=#gb > div.gb_Jd.gb_Md.gb_Xd > div.gb_Rd.gb_0d.gb_Ke.gb_Ue.gb_0e > div.gb_Je > form > div > div > div > div > div > div.d1dlne > input.Ax4B8.ZAGvjd"

"Description": ""

{

"Command": "click",

"Target": "css=#gb > div.gb_Jd.gb_Md.gb_Xd > div.gb_Rd.gb_0d.gb_Ke.gb_Ue.gb_0e > div.gb_Je > form > button.gb_Ne > svg",

"Value": "",

"Targets": [

"xpath=//*[@id=\"gb\"]/div[2]/div[2]/div[2]/form/button[3]/svg",

"css=#gb > div.gb_Jd.gb_Md.gb_Xd > div.gb_Rd.gb_0d.gb_Ke.gb_Ue.gb_0e > div.gb_Je > form > button.gb_Ne > svg"

"Description": ""

{

"Command": "click",

"Target": "xpath=//*[@id=\"ow13\"]/div[3]/span/div/span/span/div/span/span",

"Value": "",

"Targets": [

"xpath=//*[@id=\"ow13\"]/div[3]/span/div/span/span/div/span/span",

"xpath=//span/span/div/span/span",

"css=#ow13 > div.CerIhf > span > div > span > span > div > span > span.cTsG4"

"Description": ""

{

"Command": "click",

"Target": "xpath=//*[@id=\"yDmH0d\"]/div[6]/div[2]/div/div[2]/div/button/span[5]",

"Value": "",

"Targets": [

"xpath=//*[@id=\"yDmH0d\"]/div[6]/div[2]/div/div[2]/div/button/span[5]",

"xpath=//span[5]",

"css=#yDmH0d > div.uW2Fw-Sx9Kwc.uW2Fw-Sx9Kwc-OWXEXe-n2to0e.uW2Fw-qON5Qe-FoKg4d-Sx9Kwc-fZiSAe.yaahMe.y4Y5Tb.vaOP1b.b0BlYc.uW2Fw-Sx9Kwc-OWXEXe-FNFY6c > div.uW2Fw-wzTsW > div > div.uW2Fw-T0kwCb > div > button > span.mUIrbf-vQzf8d"

"Description": ""

{

"Command": "end",

"Target": "",

"Value": "",

"Description": "End of loop"

}

]

}

17 February 2025

How to add re-captcha v3 on all Elementor forms using coding?

Add re-captcha v3 on all Elementor forms using coding

add_action('wp_footer',function(){

function addRecaptchaTokenToForms() {

grecaptcha.ready(function () {

grecaptcha.execute('6LfBtdkqAAAAAMTW5EedKrwh_yuGGNEbp5B-g96i', { action: 'elementor_form' }).then(function (token) {

document.querySelectorAll('form').forEach(function (form) {

let recaptchaInput = form.querySelector('input[name="recaptcha_token"]');

if (!recaptchaInput) {

// If the hidden input doesn't exist, create it

recaptchaInput = document.createElement('input');

recaptchaInput.type = 'hidden';

recaptchaInput.name = 'recaptcha_token';

form.appendChild(recaptchaInput);

}

// Update the token value

recaptchaInput.value = token;

});

}

// Update reCAPTCHA token on form submission

function handleFormSubmission() {

document.querySelectorAll('form').forEach(function (form) {

form.addEventListener('submit', function (event) {

event.preventDefault(); // Prevent default submission to ensure token is updated

grecaptcha.ready(function () {

grecaptcha.execute('6LfBtdkqAAAAAMTW5EedKrwh_yuGGNEbp5B-g96i', { action: 'elementor_form' }).then(function (token) {

let recaptchaInput = form.querySelector('input[name="recaptcha_token"]');

if (!recaptchaInput) {

recaptchaInput = document.createElement('input');

recaptchaInput.type = 'hidden';

recaptchaInput.name = 'recaptcha_token';

form.appendChild(recaptchaInput);

}

recaptchaInput.value = token;

});

}

// Initial call when the page loads

addRecaptchaTokenToForms();

handleFormSubmission();

// Reattach reCAPTCHA token and submission handler when Elementor forms reload via AJAX

document.addEventListener('DOMContentLoaded', function () {

document.body.addEventListener('DOMNodeInserted', function (event) {

if (event.target.classList && event.target.classList.contains('elementor-widget-form')) {

addRecaptchaTokenToForms();

handleFormSubmission();

}

});

</script>

<style>

.grecaptcha-badge{

display: none !important;

}

</style>

<?php

});

/* add_action('elementor_pro/forms/new_record', function($record, $handler) { */

add_action('elementor_pro/forms/validation', function($record, $handler) {

// Ensure this is the form you want to validate

$form_name = $record->get_form_settings('form_name');

/* Uncomment this if you want to target a specific form

if ('your_form_name' !== $form_name) {

return;

}

$raw_fields = $record->get('fields');

$fields = [];

foreach ($raw_fields as $id => $field) {

$fields[$id] = $field['value'];

}

// Get the reCAPTCHA token from the hidden field

$recaptcha_token = isset($_POST['recaptcha_token']) ? sanitize_text_field($_POST['recaptcha_token']) : '';

$recaptcha_secret = '6LfBtdkqAAAAAEZhOEScydwXVGauTNUxCWO0b2pi'; // Replace with your reCAPTCHA secret key

// Verify the reCAPTCHA response

$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [

'body' => [

'secret' => $recaptcha_secret,

'response' => $recaptcha_token,

'remoteip' => $_SERVER['REMOTE_ADDR'], // Optional

]);

$response_body = wp_remote_retrieve_body($response);

$result = json_decode($response_body, true);

if (empty($result['success']) || $result['score'] < 0.5) {

// Stop the form submission if validation fails

$handler->add_error_message('reCAPTCHA validation failed. Please try again.');

$handler->add_error('recaptcha_token', 'Please verify you are not a robot.');

// Stop further actions (e.g., saving data or sending email)

$handler->add_response_data('success', false);

return false; // Exit the hook early

}

// If validation passes, continue with normal form processing

}, 10, 2);

29 January 2025

How to create multi step form with validations?

Create multi step form with validations

<!DOCTYPE html>

<head>

<title>Multi-Step Form with Parsley.js Validation</title>

<style>

.form-section {

padding-left: 15px;

border-left: 2px solid #FF851B;

display: none;

}

.form-section.current {

display: inherit;

}

.btn-info, .btn-default {

margin-top: 10px;

}

html.codepen body {

margin: 1em;

}

</style>

</head>

<body>

<label for="firstname">First Name:</label>

</div>

<label for="email">11Email11:</label>

</div>

<label for="email">Email:</label>

</div>

<label for="color">Favorite color:</label>

</div>

</div>

</form>

</div>

$(function () {

var $sections = $('.form-section');

function navigateTo(index) {

// Mark the current section with the class 'current'

$sections

.removeClass('current')

.eq(index)

.addClass('current');

// Show only the navigation buttons that make sense for the current section:

$('.form-navigation .previous').toggle(index > 0);

var atTheEnd = index >= $sections.length - 1;

$('.form-navigation .next').toggle(!atTheEnd);

$('.form-navigation [type=submit]').toggle(atTheEnd);

}

function curIndex() {

// Return the current index by looking at which section has the class 'current'

return $sections.index($sections.filter('.current'));

}

// Previous button is easy, just go back

$('.form-navigation .previous').click(function() {

navigateTo(curIndex() - 1);

});

// Next button goes forward iff current block validates

$('.form-navigation .next').click(function() {

if ($('.demo-form').parsley().validate({group: 'block-' + curIndex()}))

navigateTo(curIndex() + 1);

});

// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.

$sections.each(function(index, section) {

$(section).find(':input').attr('data-parsley-group', 'block-' + index);

});

navigateTo(0); // Start at the beginning

});

</script>

</body>

</html>

How to add google auto search places and change date picker format in elementor's input?

Add google auto search places and change date picker format in elementor's input

add_action('wp_footer',function(){

jQuery(document).ready(function($) {

$('input[name="form_fields[field_0b486bd]"], input[name="form_fields[field_ffb1494]"]').each(function() {

var input = this;

if (typeof google !== 'undefined') {

var autocomplete = new google.maps.places.Autocomplete(input, {

componentRestrictions: { country: 'ca' },

types: ['geocode']

});

google.maps.event.addListener(autocomplete, 'place_changed', function() {

var place = autocomplete.getPlace();

if (place.geometry) {

console.log("Selected place: ", place);

} else {

console.log("Place not found");

}

});

}

});

jQuery(document).ready(function($){

setTimeout(function() {

flatpickr(".flatpickr-input", {

minDate: "today",

dateFormat: "Y-m-d",

});

}, 1000);

});

</script>

<?php

});

How to create section Showcase/Scale animation in viewport with Scrollmagic?

Section Showcase/Scale animation in viewport with Scrollmagic

add_action("wp_head", function () {

document.addEventListener("DOMContentLoaded", function() {

var controller = new ScrollMagic.Controller();

var targetElement = document.querySelector("#animate2");

var bodyElement = document.querySelector("body");

var triggerElement1 = document.querySelector("#trigger3");

var triggerElement2 = document.querySelector("#trigger4");

if (targetElement && triggerElement1 && triggerElement2) {

var screenWidth = screen.width;

var screenHeight = screen.height;

console.log("Screen resolution: " + screenWidth + "x" + screenHeight);

var scene2 = new ScrollMagic.Scene({

triggerElement: "#trigger3",

triggerHook: 0.5,

duration: screenHeight,

})

.on("progress", function(e) {

var progressHeight = e.progress * screenHeight;

targetElement.style.height = progressHeight + "px";

})

.setTween(

gsap.to(targetElement, {

backgroundColor: "green",

ease: "power1.out",

})

)

.addTo(controller);

var animationPlaying = false;

triggerElement2.addEventListener("click", function() {

if (animationPlaying) {

scene.reverse();

resetAnimation(targetElement);

animationPlaying = false;

}

});

scene.on("start", function() {

animationPlaying = true;

});

scene.on("end", function() {

animationPlaying = false;

resetAnimation(targetElement);

});

} else {

console.error("Elements #animate1, #trigger1 or #trigger2 not found!");

}

function resetAnimation(element) {

element.style.backgroundColor = "";

element.style.transform = "";

}

});

</script>

<?php

});

/*---------------------CSS---------------------------*/

.home {

position: relative;

}

body::after {

background: #fff5f9c9;

width: 100%;

height: 100%;

content: "";

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: 9999;

transition: 0.5s all;

opacity: 0;

pointer-events: none;

}

.activeOverlay::after{

opacity: 1;

pointer-events: unset;

}

#animate1{

transition: 0.5s all;

z-index: 999999;

}

.activeScaleAnimation {

transition: 0.5s all;

transform: scale(1.2);

}

How to create bubble scale animation with Scrollmagic?

Create bubble scale animation with Scrollmagic

add_action("wp_head", function () {

document.addEventListener("DOMContentLoaded", function() {

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({

triggerElement: "#bubbleTrigger1"

})

.setClassToggle(".bubbleAnimate", "activebubble")

.addTo(controller);

});

</script>

<?php

});

/*---------------------CSS---------------------------*/

.bubbleAnimate {

position: relative;

overflow: hidden !important;

}

.bubbleAnimate::after {

width: 30px;

height: 30px;

z-index: -2;

content: "";

background: #FFF5F9;

position: absolute;

top: -15px;

left: 0;

right: 0;

border-radius: 200%;

margin: auto;

transition: 0.9s all;

}

.activebubble::after{

transform: scale(100);

}

How to create section progress bar with Scrollmagic?

Create section progress bar with Scrollmagic

add_action("wp_head", function () {

document.addEventListener("DOMContentLoaded", function() {

var controller = new ScrollMagic.Controller();

var targetElement = document.querySelector("#animate1");

var bodyElement = document.querySelector("body");

var triggerElement1 = document.querySelector("#trigger1");

var triggerElement2 = document.querySelector("#trigger2");

if (targetElement && triggerElement1 && triggerElement2) {

var scene1 = new ScrollMagic.Scene({

triggerElement: triggerElement1,

triggerHook: 0.2,

duration: 800

})

.setClassToggle(bodyElement, 'activeOverlay')

.addTo(controller);

var scene2 = new ScrollMagic.Scene({

triggerElement: triggerElement1,

triggerHook: 0.2,

duration: 800

})

.setClassToggle(targetElement, 'activeScaleAnimation')

.addTo(controller);

var animationPlaying = false;

triggerElement2.addEventListener("click", function() {

if (animationPlaying) {

scene.reverse();

resetAnimation(targetElement);

animationPlaying = false;

}

});

scene.on("start", function() {

animationPlaying = true;

});

scene.on("end", function() {

animationPlaying = false;

resetAnimation(targetElement);

});

} else {

console.error("Elements #animate1, #trigger1 or #trigger2 not found!");

}

function resetAnimation(element) {

element.style.backgroundColor = "";

element.style.transform = "";

}

});

</script>

<?php

});

/*---------------------CSS---------------------------*/

#animate2 {

background: #ffe9f2 !important;

width: 3px;

height: 0px;

position: absolute;

top: -21px;

left: 0;

right: 0;

margin: auto;

z-index: 0;

}

.scrollBarSection{

position: relative;

}

How to create CSS Animation?

Create CSS Animation

/*-------zoom out and in Animation----*/

@keyframes animation-5 {

0% {

transform: scale(1);

}

100% {

transform: scale(1.1);

}

.aniamtion-key-5 {

position: relative;

animation-name: animation-5;

animation-duration: 1.5s;

animation-iteration-count: infinite;

animation-direction: alternate;

transition: all 0.4s ease-in-out;

}

/*-------Left to right Animation----*/

@keyframes animation-2 {

0% {

transform: translateX(0);

}

100% {

transform: translateX(50px);

}

.aniamtion-key-2 {

position: relative;

animation-name: animation-2;

animation-duration: 2.5s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

/*-------Top to bottom Animation----*/

@keyframes animation-1 {

0% {

transform: translateY(0);

}

100% {

transform: translateY(30px);

}

.aniamtion-key-1 {

position: relative;

animation-name: animation-1;

animation-duration: 3s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

/*-------Rotating Animation----*/

@keyframes animation-7 {

0% {

transform: rotate(0);

}

100% {

transform: rotate(-1000deg);

}

.keyframe5 {

position: relative;

animation-name: animation-7;

animation-duration: 90s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1);

}

How to track truck/Ball on track/Road animation with scroll trigger(GSAP Animation)?

Track truck/Ball on track/Road animation with scroll trigger(GSAP Animation)

<!DOCTYPE html>

<head>

<title>Truck on Curvy Road</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

}

.container {

position: relative;

width: 100%;

height: 4320px; /* Height based on your path's size */

overflow: hidden;

}

.road {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 4320px; /* Match the height of the container */

}

.truck {

position: absolute;

width: 60px;

height: 60px;

transform: translate(-50%, -50%);

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.blocks {

height: 100vh;

width: 100%;

background: pink;

display: block;

border: 1px solid black;

}

.circle {

display: block;

width: 100px;

height: 100px;

background: #FFE9F2;

border-radius: 50%;

background: -webkit-radial-gradient(15px 10px, circle, #FFE9F2, #ffc0cb);

background: -moz-radial-gradient(25px 25px, circle, red, #000);

background: radial-gradient(25px 25px, circle, red, #000);

-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

-webkit-transition: all 1s ease;

transition: all 1s ease;

position: absolute;

left: 0;

}

/* Spinning the sphere using key frames */

@-ms-keyframes spin {

from { -ms-transform: rotate(0deg); }

to { -ms-transform: rotate(360deg); }

}

@-moz-keyframes spin {

from { -moz-transform: rotate(0deg); }

to { -moz-transform: rotate(360deg); }

}

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

@-webkit-keyframes spin {

from { -webkit-transform: rotate(0deg); }

to { -webkit-transform: rotate(360deg); }

}

</style>

</head>

<body>

<defs>

<style>

.st0, .st1 {

fill: none;

stroke: #FFE9F2;

stroke-miterlimit: 10;

}

.st1 {

stroke-width: 5px;

}

</style>

</defs>

</svg>

</div>

</div>

// Register GSAP plugins

gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);

// Create a GSAP timeline for the truck animation

const truckTimeline = gsap.timeline({

scrollTrigger: {

trigger: ".container", // Element that triggers the animation

start: "top 90%", // Start when the container is centered in the viewport

end: "bottom top", // End when the container reaches the top of the viewport

scrub: true, // Make the animation scrubbed (follow scroll position)

markers: true, // Show markers for debugging (remove in production)

}

});

truckTimeline.to(".truck", {

motionPath: {

path: "#road-path",

align: "#road-path",

alignOrigin: [0.5, 0.5], // Center the truck on the path

start: 1, // Start at the end of the path

end: 0, // End at the start of the path

autoRotate: true, // Rotate the truck to follow the path

pin:true,

ease: "linear", // No easing to keep the truck moving smoothly

});

</script>

</body>

</html>