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.
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.
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've created a plugin for Wordpress that display's a bunch of information in a table.
I have an options page where you can enter a color for odd, and even rows. The options page saves the user input fine. But I'm not sure how to update the CSS with the user input.
This is what I have, it technically works, but when I place any other widget in my sidebar, all the options of that widget disappears. So I'm obviously doing something wrong. There must be a better way.
ob_start();
function change_row_color(){
global $odd;
global $even;
if(!get_option('gfd_rc_odd')){
$odd = "eee";
}else{
$odd = esc_attr(get_option('gfd_rc_odd'));
}
if(!get_option('gfd_rc_even')){
$even = "fff";
}else{
$even = esc_attr(get_option('gfd_rc_even'));
}
?>
<style type="text/css">
#stockchart tr:nth-child(odd){
background-color:#<?php echo $odd; ?>;
}
#stockchart tr:nth-child(even){
background-color:#<?php echo $even; ?>;
}
</style>
<?php
}
change_row_color();
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.
I want to show a template content if ad not available
i use this code but
both ad & template content are showing
<?php
if(dt_show_ads('position=Header&before=<div>&after=</div>'))
{
?>
<!-- Some content here -->
<?php
}
else
{
include TEMPLATEPATH.'/templates/newsleft_col.tpl.php';
}
?>
dt_show_ads('position=Header&before=<div>&after=</div>') seems to not return any value. This evaluates to false in PHP.
What dt_show_ads() does, though, is to insert ad html (if there is any).
Therefor, no matter if there are ads or not, your else part is always executed.
A quick google query didn't turn up any sensible documentation on dt_show_ads for me, you might wanna try this though:
if (strlen($ads = dt_show_ads('position=Header&before=<div>&after=</div>&echo=false')) !== 0)
{
echo $ads;
// whatever other content you want to show
}
else
{
include TEMPLATEPATH.'/templates/newsleft_col.tpl.php';
}
Edit:
Since, per your comment, dt_show_ads() doesn't support the WP-semi-standard echo argument, you'll need to buffer its output to be able to check it:
ob_start();
dt_show_ads('position=Header&before=<div>&after=</div>');
$ads = ob_get_contents();
ob_end_clean();
if (strlen($ads) !== 0)
{
echo $ads;
// whatever other content you want to show
}
else
{
include TEMPLATEPATH.'/templates/newsleft_col.tpl.php';
}
There is no posibility to get both states of the IF statement. There is something wrong with your code. You may have not show up here all of your code correctly ?
Answer #2
The function that you check:
if(dt_show_ads('position=Header&before=<div>&after=</div>'))
{
}
else
{
}
It can print out the appropriate HTML and at the end return a false in example. In that case you get false for the first IF statement and the because of the false you get the else part.
To be sure what is the result of the dt_show_ads(); do that:
echo "<pre>" . print_r(dt_show_ads('position=Header&before=<div>&after=</div>'), true) . "</pre>";
<?php
if (!dt_show_ads('position=Header&before=<div>&after=</div>')) {
include TEMPLATEPATH.'/templates/newsleft_col.tpl.php';}
?>