I am a new on wp develop plugins...
<td><img class="dele" src="<?php echo plugins_url( 'images/delete.png' , __FILE__ )?> " onClick="getsize1(<?php echo $Opportunitiy->ID; ?>)"/></td>
</tr>
<?php } ?>
<script type="text/javascript">
function getsize1(id){
alert (id);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(xmlhttp.responseText)
{
alert(xmlhttp.responseText);
//window.location.reload();
}
}
}
xmlhttp.open("GET","<?php echo plugins_url( 'delete.php' , __FILE__ )?>?id="+<?php echo $Opportunitiy->ID; ?>,true);
xmlhttp.send();
}
</script>
I have write this way in main plugin file.. and i call a delete.php this way..
<?php
global $wpdb;
var_dump($wpdb);
if (is_object($wpdb) && is_a($wpdb, 'wpdb')) {
echo "DELETE FROM `syn_account` WHERE ID = ".$_GET['id'];
$sql=$wpdb->prepare("DELETE FROM `syn_account` WHERE ID = ".$_GET['id']);
$wpdb->query($sql);
//$wpdb->delete("syn_account", array('ID' =>$_GET['id']));
}
?>
i have not connect other files its display errors
when i print var_dump than i got a null value plz help me..
why not using jquery ?
wordpress has native support for jquery and it's mych more easy then javascript.
i recommend reading om action and hooks, you can develop nothing without know them.
on your specific request read here:
http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/
good luck.
Related
A newbie here...I am trying to apply a system that allows readers to "infinitely" scroll down to the next posts after finishing a single post so that they don't have to manually click them.
(Like this website does:
https://dancingastronaut.com/2020/12/maceo-plex-confronts-racism-and-diversity-in-latest-single-cinemax/)
I tried the “auto load next post” plugin, but it didn’t work on my theme :(.
I’m currently using the Amphibious theme developed by templatepocket.
https://wordpress.org/themes/amphibious/
This is the biggest part I’m having a struggle with, and I think my website is good to go once it’s applied. I hope someone can help me out here!
Thanks!
You would first need to edit your single post template, usually single.php, and add a trigger when a user scrolls past that point.
<?php $gpNextPost = get_next_post(); ?>
<div class="gp-infinite-scroll" style="display: none;"><?php echo $gpNextPost->ID; ?></div>
Then call an AJAX function to load next post's content and also replace the URL in the browser's address bar.
Here's a rough example:
function gp_infinite_scroll($pid){
if (is_single()) { ?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
$(window).scroll(function() {
var footerPos = $('footer').last().position().top;
var pos = $(window).scrollTop();
if (pos+(screen.height*4) > footerPos) {
if ($(".gp-infinite-scroll").first().hasClass('working')) {
return false;
} else {
$(".gp-infinite-scroll").first().addClass('working');
}
var gpNextPostId = $(".gp-infinite-scroll").first().text();
var data = {
'action': 'gp_is',
'gpNextPostId': gpNextPostId
};
$.post(ajaxurl, data, function(response) {
$(".gp-infinite-scroll").first().replaceWith(response);
}, 'html');
}
// Update new URL
var currUrl = $(".gp-post-header").first().attr("url");
var currTitle = $(".gp-post-header").first().attr("title");
if ($(".gp-post-header").length > 1 && history.pushState) {
for (var i=0; i<$(".gp-post-header").length; i++) {
var trigger = $(".gp-post-header").eq(i).next().position().top;
if (pos+(screen.height/2) >= trigger) {
currUrl = $(".gp-post-header").eq(i).attr("url");
currTitle = $(".gp-post-header").eq(i).attr("title");
}
}
}
if (location.href != currUrl) {
history.pushState({}, currTitle, currUrl);
}
});
});
</script>
<?php }
}
add_action( 'wp_head', 'gp_infinite_scroll' );
function gp_infinite_scroll_callback() {
if (isset($_POST['gpNextPostId']) && $_POST['gpNextPostId']) {
$the_query = new WP_Query(array('p'=>$_POST['gpNextPostId']));
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
// Change to your own Single Post template file
get_template_part( 'template-parts/content', 'single' );
}
}
wp_reset_postdata();
}
wp_die();
}
add_action( 'wp_ajax_gp_is', 'gp_infinite_scroll_callback' );
add_action( 'wp_ajax_nopriv_gp_is', 'gp_infinite_scroll_callback' );
This code is untested but it should get you going. If the above seems too much for you then you migh try some of the related plugins.
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.
Hi I am having trouble doing an if state in wordpress. If multisite network url equals then do something
Any help? Thanks
<?php
var $china = "network_home_url()/china";
if($china === true){?>
<img src="..">
<?php } else { ?>
<img src="..">
<?php } ?>
escape quotes, network_home_url() is php function:
var $china = network_home_url()."/china";
And for 'if' statement use not true but the url itself:
if ($china == "http://somekindofurl.com/china") {
//do code
}
This is not the ideal solution to compare with whole string.
Instead, you can use strpos() in PHP to check whether it contains 'china'
something like
$url = 'network_home_url()/china';
if (strpos($url, 'china') !== false) {
echo '<img src="..">';
/*this is true*/
} else {
echo '<img src="..">';
}
Full doc strpos()
Thanks
I have used backstretch to switch bg image for each page on my wordpress site, all is fine except for my 'news page' (i.e. blog functionality). Even though I've identified and used the correct page ID, the script doesn't want to update it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.myurl.co.uk/wp-content/themes/name/bootstrap/js/jquery.backstretch.min.js"></script>
<?php
if(is_page(2))
{
echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_homepage.jpg");</script>';
}
else if(is_page(51))
{
echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_food_menu.jpg");</script>';
}
else if(is_page(60))
{
echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");</script>';
}
else if(is_page(53))
{
echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_drink_menu.jpg");</script>';
}
else if(is_page(57))
{
echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_where_when.jpg");</script>';
}
else if(is_page(55))
{
echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");</script>';
}
?>
From this code, page 60 is displayed without a background image. Do I need to write something specific for news/blog pages?
Any suggestions will be gratefully received.
You'll probably need to nest the whole thing inside a document.ready call, otherwise you're trying to initialise it before anything is ready.
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.myurl.co.uk/wp-content/themes/name/bootstrap/js/jquery.backstretch.min.js"></script>
<script>
$(document).ready(function(){
<?php
if(is_page(2))
{
echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_homepage.jpg");';
}
else if(is_page(51))
{
echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_food_menu.jpg");';
}
else if(is_page(60))
{
echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");';
}
else if(is_page(53))
{
echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_drink_menu.jpg");';
}
else if(is_page(57))
{
echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_where_when.jpg");';
}
else if(is_page(55))
{
echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");';
}
?>
});
Also check for any JS errors in your console that might be preventing it from running properly.
I'm attempting to add a datepicker to a custom meta box in wordpress. If I enqueue the script like so
// add stylesheets for date picker
add_action('admin_print_styles', 'add_datepicker_styles');
function add_datepicker_styles() {
global $post;
$styleFile = get_bloginfo("template_url").'/refactored-datepicker/css/ui-lightness/jquery-ui-1.8.17.custom.css';
if(file_exists($styleFile) && $post->post_type == 'show') {
wp_enqueue_style("datepicker-css", $styleFile);
}
}
// add javascript for date picker
add_action('admin_print_scripts', 'add_datepicker_js');
function add_datepicker_js() {
global $post;
$jsFile = get_bloginfo("template_url").'/refactored-datepicker/js/jquery-ui-1.8.17.custom.min.js';
if(file_exists($jsFile) && $post->post_type == 'show') {
wp_enqueue_script("datepicker-js", $jsFile);
}
}
// add date picker init
add_action('admin_head', 'add_datepicker_init');
function add_datepicker_init() {
global $post;
if($post->post_type == 'show') {
echo "<script type='text/javascript'>jQuery(document).ready(function() { jQuery('#show_date').datepicker(); });</script>";
}
}
I get an error that jQuery('#show_date').datepicker(); is not a function. When I check the processed source code I see that jQuery is loaded by default but the style and jQuery UI script are not loaded at all. The code attached to the admin_head hook loads fine and if I echo the script and styles in this function it works the way I want it to.
// add date picker init
add_action('admin_head', 'add_datepicker_init');
function add_datepicker_init() {
global $post;
if($post->post_type == 'show') {
echo "<link rel='stylesheet' type='text/css' href='".get_bloginfo("template_url").'/refactored-datepicker/css/ui-lightness/jquery-ui-1.8.17.custom.css'."' />";
echo "<script type='text/javascript' src='".get_bloginfo('template_url').'/refactored-datepicker/js/jquery-ui-1.8.17.custom.min.js'."'></script>";
echo "<script type='text/javascript'>jQuery(document).ready(function() { jQuery('#show_date').datepicker(); });</script>";
}
}
So is it a problem with the wp_enqueue_style/script() functions or with the add_action hooks? I'm new to wordpress so I'm not really sure how to troubleshoot this. I've done a google search and everywhere I go the code looks like mine. Also if you are wondering the paths to the files are correct.
Can anyone think of a solution to my problem? Is it wrong to just echo the script and styles or should I enqueue them?
Thanks!
EDIT:
file_exists($jsFile) returns false. if I remove the conditional check for the file the code works.. But why? how else can you check for a file that exists using a url beginning with http:// as opposed to a local file path?
If you want to get a local path for your theme, you can use get_theme_root():
$styleFile = get_theme_root().'/refactored-datepicker/css/ui-lightness/jquery-ui-1.8.17.custom.css';
if(file_exists($styleFile) && $post->post_type == 'show') {
From php.net/file_exists:
this code here is in case you want to check if a file exists in
another server:
<?php function fileExists($path){
return (#fopen($path,"r")==true); } ?>
unfortunately the file_exists can't reach remote servers, so I used
the fopen function.