Develop Reference

Wordpress - JS to select only the current user i clicked to follow

I'm using "User Follow System" plugin, and i would like to know how to make this js select only one user of the current user i clicked to follow.
I am showing a list of followers and following using get_users in foreach loop.
The problem I am facing is when i click on the follow link for one user, the loading images for all users show up and all the follow links get toggled. $(‘.follow-links a’).toggle();
When i asked the plugin owner he said: Sounds like you may just need to adjust the selector used in the JS to target only the one you clicked on. This was originally built with only one user’s links displayed on the page.
But sorry, I failed to figure it out!
jQuery(document).ready(function($) {
/*******************************
follow / unfollow a user
*******************************/
$( '.follow-links a' ).on('click', function(e) {
e.preventDefault();
var $this = $(this);
if( pwuf_vars.logged_in != 'undefined' && pwuf_vars.logged_in != 'true' ) {
alert( pwuf_vars.login_required );
return;
}
var data = {
action: $this.hasClass('follow') ? 'follow' : 'unfollow',
user_id: $this.data('user-id'),
follow_id: $this.data('follow-id'),
nonce: pwuf_vars.nonce
};
$('img.pwuf-ajax').show();
$.post( pwuf_vars.ajaxurl, data, function(response) {
if( response == 'success' ) {
$('.follow-links a').toggle();
} else {
alert( pwuf_vars.processing_error );
}
$('img.pwuf-ajax').hide();
} );
});
});
display-function.php
<?php
/**
* Retrieves the follow / unfollow links
*
* #access public
* #since 1.0
* #param int $user_id - the ID of the user to display follow / unfollow links for
* #return string
*/
function pwuf_get_follow_unfollow_links( $follow_id = null ) {
global $user_ID;
if( empty( $follow_id ) )
return;
if( ! is_user_logged_in() )
return;
if ( $follow_id == $user_ID )
return;
ob_start(); ?>
<div class="follow-links">
<?php if ( pwuf_is_following( $user_ID, $follow_id ) ) { ?>
<span><span>Following</span>
Follow
<?php } else { ?>
Follow
<span><span>Following</span>
<?php } ?>
<img src="<?php echo PWUF_FOLLOW_URL; ?>/images/loading.svg" class="pwuf-ajax" style="display:none;"/>
</div>
<?php
return ob_get_clean();
}

The line $('.follow-links a').toggle() is toggling every follow link because the query selector doesn't specify a single child. The call of the toggle method is applied to every child found.
Just replace $('.follow-links a').toggle() with $this.toggle().

Unable to use jQuery in WordPress Child Theme

I can't figure out how to use jQuery in my WordPress child theme scripts. From my research on SO, I have enqueued my external JavaScript file and have tried coding the jQuery commands in NoConflict mode with no success. Here is the barebones template I'm experimenting on right now (it is essentially a blank page.php and I added a button and paragraph at the bottom):
<?php
/**
*
* Template Name: My JQ Template
*
* #package GeneratePress
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header(); ?>
<?php
global $wpdb;
$course_result = $wpdb->get_results('SELECT * FROM SC_COURSES ORDER BY COURSE_NAME');
?>
<div id="primary" <?php //generate_content_class();?>>
</div>
<main id="main" <?php generate_main_class(); // Page title and content ?>>
<?php
do_action( 'generate_before_main_content' );
while ( have_posts() ) : the_post();
get_template_part( 'content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || '0' != get_comments_number() ) : ?>
<div class="comments-area">
<?php comments_template(); ?>
</div>
<?php endif;
endwhile;
do_action( 'generate_after_main_content' );
?>
<br>
<div class="container">
<div>
<input id="testbutton" type="button" onClick="myFunction()" value="POP!">
<p>This is a test</p>
</div>
</div><!-- container -->
</main><!-- #main -->
<?php
do_action( 'generate_after_primary_content_area' );
get_footer();
?>
In functions.php, I have the following:
<?php
function enqueue_child_theme_styles() {
if ( is_page_template( 'jqtemplate.php' ) ) {
//deregister the parent bootstrap style and script
wp_deregister_style( 'bootstrap' );
wp_deregister_script( 'bootstrap' );
wp_deregister_script( 'mycustomjs' );
//enqueue my child theme stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );
//enqueue bootstrap in the child theme
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');
//Enqueue the custom jQuery specific scripts
wp_enqueue_script('mycustomjs', get_stylesheet_directory_uri().'/js/mycustomjs.js', array('jquery'), NULL, true);
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
Within mycustomjs.js, I have the following:
jquery(document).ready(function(){
jquery("p").mouseenter(function(){
jquery("p").text("This is some new text");
});
});
function myFunction() {
var txt;
if (confirm("Press a button, mkay!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("testbutton").value = txt;
}
I am positive the script is loading, because that little demo with changing the button text works. I know the Bootstrap styles and scripts are loading because in the production version they are visible.
I can't make jQuery do anything, though. I have tried adding var j = jQuery.noConflict(); and then using j instead of jquery as described here, I have changed jquery to jQuery, and I have tried putting the jQuery lines directly into the jqtemplate.php header with no success.
I know WordPress includes jQuery, so what am I missing here?

WordPress includes jQuery indeed. But it still has to be loaded.
After loading jQuery you just have to make sure that you use jQuery instead of jquery. like this:
jQuery( document ).ready( function() {
alert( 'test to see if this is working' );
jQuery("p").mouseenter( function() {
jQuery("p").text("This is some new text");
});
});

Adding a fixed ID to Body in Wordpress via functions.php

Should be fairly simple and have had a good search around the web, but most solutions are too complex.
Trying to implement a jquery menu system and need to add a body ID to the main body of my Wordpress site in order to target by ID, easier I think that way.
I would like to add this via functions.php to avoid touching the theme header files directly in child theme incase of updates etc.
So far I have the below - doesn't seem to be working though haha, so I've clearly missed something obvious!
Trying to target all pages, then add the id 'st-container'
Thanks in advance:
// create a custom function
function my_custom_body_id($id) {
if ( is_page() ) $id = 'st-container';
return $id;
};
add_filter('body_id','my_custom_body_id');

From https://codex.wordpress.org/Function_Reference/body_class
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
// add 'st-container' to the $classes array
if(is_page()) {
$classes[] = 'st-container';
}
// return the $classes array
return $classes;
}
Give that a go - you need to return an array

template (header.php)
<body <?php body_id(); ?>>
functions.php
function body_id() {
if( is_page_template('page-service.php') ) {
$id = 'id="service-page"';
}
echo $id;
}
my view-source output was
<body id="service-page">

Save advert click to database using PHP, then open link

I am creating a WordPress widget that shows and advert. When the advert is clicked I want to record the clicks with some detail.
The database table is already created and entries can be saved correctly using the function f1_add_advert_click($advert_id) in save-advert-click.php, which resides in the same directory as the Widget's PHP that I want to call it from (the plugin's root directory).
Requirements:
link will be on a piece of text, just a plain a href
a visitor should see the target link when he hovers his cursor over the link, not appended by a parameter for the next page
no 'middle' page that registers the click then redirects onto the target page. Just straight from the origin to the target.
secure: the advert ID is passed on to the f1_add_advert_click function and then inserted into the database. I would like to be sure that it's the correct ID (not something a visitor could change).
there can be multiple instances of this Widget on a page
I have seen and tried a lot of examples on Stackoverflow, but either I don't get it or the situation there is different from mine. Would gladly appreciate a well commented code example that works in my situation. Please be aware that I am not a seasoned programmer, especially 'green' when it comes to JavaScript and jQuery.
From what I have read on the web I think I should be using AJAX to first register the click, then send the browser to the target page. Not sure if I have to use onclick or not, based on the bottom answer of this post.
Have put in about four hours so far on this part. Now asking for help. Not much code to show, because I deleted everything that didn't work.
This is what I have currently got within the widget function of the plugin (left out the regular php showing title and so on):
<script type="text/javascript">
function myAjax() {
$.ajax({
type: "POST",
url: './wp-content/plugins/facilitaire-advert-widget/save-advert-click.php',
data:{action:'call_this'},
success:function(html) {
alert(html);
}
});
}
</script>
Followed by the link and the click action
<p>Link of Advert
Then these are my contents for save-advert-click.php
// check for action signal
if($_POST['action'] == 'call_this') {
f1_add_advert_click ();
}
/**
* Records a click event in the database
*/
function f1_add_advert_click ()
{
$advert_id = random_int(1,300); // change to $clicked_advert_id later
$user_ip = get_user_ip();
global $wpdb;
$table_name = $wpdb->prefix . 'f1_advert_clicks';
$wpdb->insert( $table_name, array(
'advert_id'=> $advert_id,
'user_agent'=> $_SERVER['HTTP_USER_AGENT'],
'ip_address'=> $user_ip
),
array(
'%d',
'%s',
'%s'
)
);
}
/**
* Get user IP
*/
function get_user_ip()
{
$client = #$_SERVER['HTTP_CLIENT_IP'];
$forward = #$_SERVER['HTTP_X_FORWARDED_FOR'];
$remote = $_SERVER['REMOTE_ADDR'];
if ( filter_var($client, FILTER_VALIDATE_IP) ) {
$ip = $client;
} elseif ( filter_var($forward, FILTER_VALIDATE_IP) ) {
$ip = $forward;
} else {
$ip = $remote;
}
return $ip;
}
UPDATE WITH SOLUTION
Thanks to #mplungjan's suggestion I updated my code to the following, working code. Please note some differences with #mplungjan's code, because I had to make some adjustments to make it work in WordPress.
contents of bottom part of show-advert.php
<script>
jQuery(function() {
jQuery(".advertLink").on("click",function(e) {
e.preventDefault(); // stop the link unless it has a target _blank or similar
var href = this.href;
var id= <?php echo $advert_id; ?>;
jQuery.post("<?php echo get_home_url(); ?>/wp-content/plugins/facilitaire-advert-widget/save-advert-click.php",
{ "action":"register_click", "advert_id":id },
function() {
location=href;
}
);
});
});
</script>
Link of Advert<br />
<?php
Then in the top part of save-advert-click.php I have
<?php
// check for action signal
if($_POST['action'] == 'register_click') {
f1_add_advert_click( $_POST["advert_id"] );
}
/**
* Records a click event in the database
*/
function f1_add_advert_click ( $advert_id )
{
$user_ip = get_user_ip();
// need to load WordPress to be able to access the database
define( 'SHORTINIT', true );
require_once( '../../../wp-load.php' ); // localhost needs this, production can have require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );
global $wpdb;
$table_name = $wpdb->prefix . 'f1_advert_clicks';
$wpdb->insert( $table_name, array(
'advert_id'=> $advert_id,
'user_agent'=> $_SERVER['HTTP_USER_AGENT'],
'ip_address'=> $user_ip
),
array(
'%d',
'%s',
'%s'
)
);
}

You will want to do something like
$(function() {
$(".advertLink").on("click",function(e) {
e.preventDefault(); // stop the link unless it has a target _blank or similar
var href = this.href;
var id=this.id; // or $(this).data("advertid") if you have data-advertid="advert1" on the link
$.post("./wp-content/plugins/facilitaire-advert-widget/save-advert-click.php",
{ "action":"call_this", "advert_ID":id },
function() {
location=href; // or window.open
}
);
});
});
using
Link of Advert

How to debug PHP script not executing?

I'm working on a wordpress page here http://beta.fray.it/invite and on clicking the Twitter icon I have this onclick attribute set on a list element
onclick="window.location.href = '<?php echo get_template_directory_uri(); ?>/components/invite/twitter/redirect.php';">
this takes me to the php file which should redirect users to Twitter for authentication. I got this working on another server I use for testing, but not here. What happens is that I see content from the main page http://beta.fray.it but no redirection. What is the reason for this?

After you enable WP_DEBUG and WP_DEBUG_LOG in wp-config.php (WP_DEBUG is disabled by default since WP_DEBUG is set to false).
debug.log is generated in your /wp-content/ directory upon an error, warning, a notice or a log call.
You can also utilize a wrapper function to centralize your log calls
if(!function_exists('_log')){
function _log( $message ) {
if( WP_DEBUG === true ){
if( is_array( $message ) || is_object( $message ) ){
error_log( print_r( $message, true ) );
} else {
error_log( $message );
}
}
}
}
you can read more about that here
Check out the codex as well:
http://codex.wordpress.org/Debugging_in_WordPress

try changing your link href
onclick='window.location.href =' + "<?php echo get_template_directory_uri(); ?>" + '/components/invite/twitter/redirect.php';