wp_footer action hook generating error in my WordPress files - wordpress

I am using beaver builder theme and beaver builder plugin, currently I am creating a new module my own and trying to send all my script code to footer for that my code looks like shown below:
<?php function gt_footer_script(){?>
<script>
jQuery(document).ready(function($) {
"use strict";
if ($('#gt-lightgallery_v<?php echo $gt_filter_counter; ?>').length) {
$('#gt-lightgallery_v<?php echo $gt_filter_counter; ?>').lightGallery({
selector: '.gt-gallery-box',
});
}
});
</script>
<?php } add_action('wp_footer', 'gt_footer_script');?>
my function is gt_footer_script but once I run my code it says can't re-declare function gt_footer_script its already declared on line number 110, while its first function created i am otherwise i have never used this function ever or in my current plugin but still having issue in running my code.

You should just check it's already loaded once. Your plugin probably loads these actions when it's called and then load again your function when it calls your module. Like :
<?php
// We check first if the function wasn't declared earlier :
if(!function_exists('gt_footer_script')) :
// Then we load it
function gt_footer_script(){
?>
<script>
jQuery(document).ready(function($) {
"use strict";
if ($('#gt-lightgallery_v<?php echo $gt_filter_counter; ?>').length) {
$('#gt-lightgallery_v<?php echo $gt_filter_counter; ?>').lightGallery({
selector: '.gt-gallery-box',
});
}
});
</script>
<?php
}
endif;
// If the function already exists, no issue to run this code :
add_action('wp_footer', 'gt_footer_script');
?>

Related

I'd like to delay the Cookie Banner popup on my Wordpress site, currently using Complianz plug in - how to configure?

From the Complianz site - the instructions were to modify the following code in a text editor and save it - changing line 11 to the desired m/s.
Copy and pasted code below from Complianz site.
`
<?php
function cmplz_delay_banner() {
ob_start(); ?>
<script>
document.addEventListener("cmplz_before_cookiebanner", function() {
document.querySelector('#cmplz-cookiebanner-container').classList.add('cmplz-hidden');
});
document.addEventListener("cmplz_cookie_warning_loaded", function() {
setTimeout(function(){
document.querySelector('#cmplz-cookiebanner-container').classList.remove('cmplz-hidden');
}, 3000);
});
</script>
<?php
$script = ob_get_clean();
$script = str_replace(array('<script>', '</script>'), '', $script);
wp_add_inline_script( 'cmplz-cookiebanner', $script);
}
add_action( 'wp_enqueue_scripts', 'cmplz_delay_banner', PHP_INT_MAX );
`
I've done that and the next steps for configuration are to " Save this as a .php file in the folder /wp-content/mu-plugins/ on your website"
Where would I go to do that from the dashboard?
Thanks in advance!
I've read this post of Must-use plugins but still unsure of where to navigate on the dashboard to get to wp-content/

How to clear form input on page load woocommerce checkout

I am offering customers a repurchase on the order confirmed page. If they click the link they are sended directly to the checkout page. However, the form is then prefilled with the previous data. I would like to clear it, because the idea is one product(ticket) per person.
So far i have the following (and in the page source i can see the script is loaded):
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)){
echo '<script>
window.addEventListener("load", function(){myFunction()};
function myFunction() {
document.getElementsByClassName("woocommerce-checkout").reset();
}
</script>';
}
}
add_action('wp_print_scripts', 'print_script');
I tried other triggers too, such as window.load but no result yet.
Anyone?
You should put the script in the footer using add_action( 'wp_footer', 'print_script' ); to make sure the form gets cleared after the data was loaded into it.
Wordpress has jQuery on default, so I'm using it to look for all the forms in the document and clear them. The function is automatically called on page load, therefore no need for a event listener.
<?php
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)) { ?>
<script type="text/javascript">
( function( $ ) {
$('form').each(function() { this.reset() });
}( jQuery ) );
</script>
<?php }
}
add_action( 'wp_footer', 'print_script' ); ?>

Is there a way to use wp_enqueue_script for adding JavaScript directly?

Is there a way of adding Javascript to a page directly but having Wordpress to wait for jQuery to load? Just as with using wp_enqueue_script?
In the custom page template I have the following code:
<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') : ?>
<script>
$(function() {
App.dialogs.afterPetitionCreate();
});
</script>
<?php endif; ?>
Wordpress barks that $ is undefined. Now I do not want to load a entire .js file just to call that function. So in that sense wp_enqueue_script isn't an option. I only want to fire some JavaScript directly on the page but I do want to wait for jQuery to load.
This is what I also tried, adding the JavaScript to the footer with Wordpress:
<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') :
add_action('wp_footer', 'my_footer_scripts');
function my_footer_scripts() { ?>
<script>
$(function () {
App.dialogs.afterPetitionCreate();
});
</script>
<?php } ?>
<?php endif; ?>
But unfortunately the same error appears $ is undefined.
So what would be the correct way to quickly load some Javascript on a custom Wordpress page template AND wait for jQuery to load?
I do not think this is a good practice.
It is better to change logic to something like this:
<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') : ?>
<input type='hidden' id='status' name='status' value='newly_created'>
<?php endif; ?>
script.js:
$(function() {
if ( $('#status').val() === 'newly_created' ) {
App.dialogs.afterPetitionCreate()
}
});
and
wp_enqueue_script( 'afterPetitionCreate', '/path/to/script.js', array( 'jquery' ), '', true );
p.s. you can wrap wp_enqueue_script() into is_page_template( 'my-cool-page-teplate.php' ).
Have you tried running the script within the document ready event like the following code below?
<script>
jQuery(document).ready(function($){
$(function () {
App.dialogs.afterPetitionCreate();
});
});
</script>
The .ready event occurs when the object of the document or the DOM is loaded which makes it perfect to place all of your jquery events and other functions.
This is the code I ended up writing, and does exactly what I want. Like Submit Parkash mentioned, jQuery needs to be used instead of $.
/*
* Adds a single bit of Javascript to the page.
*/
function theme_embed_script($script) {
add_action('wp_footer', function ($script) {
echo '<script type="text/javascript">' . $script . '</script>';
}, 10);
do_action('wp_footer', $script);
}
Usage:
<?php theme_embed_script('jQuery(function () { alert("Hello"); });'); ?>
OR use Wordpress' wp_add_inline_script() script like David mentioned.

It is possible to add php to this script in Wordpress?

I use this script to filter posts from single category. I based on tags which generate also a class. It is possible to generate this script by WordPress with all tags from my site?
For example below 2 scripts (now I have 12 scripts of this type):
$(document).ready(function(){
$('tr').show();
$("#aipa").click(function(){
$("tr").show();
$('tr:not(:first)').not(".aipa").slideToggle('fast');
});
});
$(document).ready(function(){
$('tr').show();
$("#ris").click(function(){
$("tr").show();
$('tr:not(:first)').not(".ris").slideToggle('fast');
});
});
Now when I add new tags I must manually add another script:
$(document).ready(function(){
$('tr').show();
$("#next-tag").click(function(){
$("tr").show();
$('tr:not(:first)').not("#next-tag").slideToggle('fast');
});
});
Here's a way to do this. This assumes that you're using the standard blog tag system, and that your variable you're using as your ID and class is the tag's slug. Alter it as needed for your needs.
<?php $tags = get_tags(); ?>
<script>
$(document).ready(function(){
<?php foreach ( $tags as $tag ) { ?>
$('tr').show();
$("#<?php echo $tag->slug; ?>").click(function(){
$("tr").show();
$('tr:not(:first)').not(".<?php echo $tag->slug; ?>").slideToggle('fast');
});
<?php } ?>
});
</script>
This will create a single document ready function, and then generate multiple click functions.

enqueue script in wordpress plugin for specific hook

When custom php function is called, need to register and enqueue script from within that called function. Then the whole thing gets added to wp_footer hook.
the echoed div in code below shows up in the developer tool, but the script is not showing or even giving any errors, i.e.- if this were an issue with the file path, then there would be resource error, yes? Any comments as to why there wouldn't be an error in loading the script?
The code:
if(get_option('show_content')) {
function add_time() {
echo '<div id="txt">' . '</div>';
// add script tut pro word plugin dev ch12.3
function py_enqueue_script () {
wp_register_script( 'timescript', plugin_url('../time.js', __FILE__));
wp_enqueue_script( 'timescript');
} // end py_enqueue_script
add_action('wp_enqueue_scripts', py_enqueue_script);
} // end show add_time
add_action("wp_footer",add_time);
} // end if
Try this (spotted some syntax errors):
if(get_option('show_content')) {
function add_time() {
echo '<div id="txt">' . '</div>';
// add script tut pro word plugin dev ch12.3
function py_enqueue_script () {
wp_register_script( 'timescript', plugins_url('../time.js', __FILE__), false, null, false));
wp_enqueue_script( 'timescript');
} // end py_enqueue_script
add_action('wp_enqueue_scripts', 'py_enqueue_script');
} // end show add_time
add_action('wp_footer', 'add_time');
} // end if
Brackets on add_action custom action (i.E. 'add_time' instead of add_time).
Plugins URL Function goes plugins_url not plugin_url
Some very good additional article on enqueueing scripts: http://wp.tutsplus.com/tutorials/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins/
Some additional info on plugins_url:
http://codex.wordpress.org/Function_Reference/plugins_url

Resources