Facebook like button reacts on all posts - wordpress

I think something's wrong with my query I'm using below. I want to show multiple thumbnails with each its own like button. All works fine, but when you press 1 button, it will like all other images as well. Tried the reset query, but I guess it's not working or I got things wrong. Someone got a simular problem or knows how to fix this?
<?php query_posts('cat=1'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $thumb = get_post_meta($post->ID, 'thumb', $single = true); ?>
<ul>
<li>
<img src="<?php echo $thumb; ?>" alt="View <?php the_title_attribute(); ?>'s showcase" width="150" height="111" />
<div class="design"><?php the_title(); ?></div>
<div class="subtitle">view feature</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
<!-- AddThis Button END -->
</li>
</ul>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query() ?>

Add a fbml href attribute to the like button.
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:href="<?php the_permalink(); ?>"></a>

Related

<! --nextpage--> pagination is not working in Wordpress

I'm trying to make it so posts can be easily paginated in a custom theme, but I'm doing something wrong. I've included wp_link_pages(); in the while like which I believe is required, but maybe I have it in the wrong place or I'm missing something else?
<?php get_header(); ?>
<?php
while(have_posts()) {
the_post();
wp_link_pages();
?>
<div class="mainConent">
<div class="leftSidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('left_sidebar') ?>
</div>
</div>
<div class="recentBlogsWrapper">
<div class="blogWrapper">
<h2><?php the_title(); ?></h2>
<p><?php the_time('F j, Y') ?></p>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php comments_template(); ?>
<?php } ?>
<div class="backarrowwrap">
<a class="backhomelink" href="<?php echo site_url(); ?>" <?php if(is_front_page()) echo 'class="active"' ?>>
<img class="backarrow" src="<?php echo get_template_directory_uri(); ?>/img/backarrow.png" alt="back arrow" />
Go Back Home
</a>
</div>
</div>
</div>
</div>
<div class="rightSidebar" id="sidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('right_sidebar') ?>
</div>
</div>
<?php get_footer(); ?>
Another odd thing that's happening is that the code block is showing the code on the page instead of hiding it like it should.
The wordpress editor
My blog post page which shows the code
Gutenburg was preventing me from writing the comment as code, even in a code box. Once I switched to the classic view the problem went away since I could write the comment in the html directly.

How do I create a link to a pop up Advanced Custom Fields lighbox gallery?

I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>

WordPress custom post type pagination on Zylyz theme

Sorry for asking in my first question, but I have a big problem with my theme and nobody could solve it. Actually it's so simple:
I am using Zylyz recipe theme. I set the home page to a custom post type (recipes), but as you might guess, when I press the "Older Entries" button it gives "not found" error, because it tries to get ordinary blog posts, not "recipes" (you know, if I had enough blog post it wouldn't give error, but would show posts, not recipes).
So, how can I get rid of this problem?
Thank you very much in advance.
Here's the home page's codes:
<div id="content">
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('post_type=recipes'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="post clearfix" id="post-<?php the_ID(); ?>">
<?php
if ( has_post_thumbnail() ) { ?>
<img class="postimg" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&h=200&w=200&zc=1" alt="<?php the_title(); ?> Recipe"/>
<?php } else { ?>
<img class="postimg" src="<?php bloginfo('template_directory'); ?>/images/dummy.jpg" alt="" />
<?php } ?>
<div class="cover">
<div class="title">
<h2><?php the_title(); ?></h2>
</div>
<div class="recipemeta">
<span class="cooktime"> <strong>ready in</strong> <?php $cooktime=get_post_meta($post->ID, 'wtf_cooktime', true); echo $cooktime; ?> mins </span> <span class="serve"> <strong>Serving:</strong> <?php $serving=get_post_meta($post->ID, 'wtf_serving', true); echo $serving; ?> people</span>
</div>
<div class="entry" align="justify">
<?php wpe_excerpt('wpe_excerptlength_recipe', ''); ?>
<div class="clear"></div>
</div>
</div>
</div>
<?php endwhile; ?>
<div class="clear"></div>
<?php getpagenavi(); ?>
<?php $wp_query = null; $wp_query = $temp;?>
</div>

Advanced custom fields - If/ while field issue

The way I am trying to set this up is that if a link has not been chosen then only the image will be displayed, but if a link is chosen as well as an image then I want the link to be wrapped around the image, here is an example of what I have at the moment:
<?php if(get_field('block_repeater')): ?>
<ul>
<?php while(has_sub_field('block_repeater')): ?>
<li>
<!-- problem -->
<?php if( get_sub_field('block_link') ): ?>
<?php while(has_sub_field('block_image')): ?>
<a class="img" href="<?php the_sub_field('block_link'); ?>">
<img src="<?php the_sub_field('block_image'); ?>" alt="" />
<span class="square-arrow"></span>
</a>
<?php endwhile; ?>
<?php endif; ?>
<!--//problem -->
<?php if( get_sub_field('block_image') ): ?>
<img src="<?php the_sub_field('block_image'); ?>" alt="" />
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
The does not seem to be working correctly though as its rendering out about a hundred of these:
<a class="img" href="">
<img alt="" src="">
<span class="square-arrow"></span>
</a>
Don't suppose anyone knows what I have done wrong please?
It's because you are doing a loop and keeping that html block between while loop so this block is being printed until the loop ends.
<?php while(has_sub_field('block_image')): ?>
<!--
This part will be printed as long as
has_sub_field('block_image') returns true
-->
<?php endwhile; ?>
If you want to print out that part only once, then remove the loop, just comment out these lines, like
<?php //while(has_sub_field('block_image')): ?>
<!-- keep everything here as it is -->
<?php //endwhile; ?>

How to get Isotope Wordpress plugin mintthemes work?

I have installed the WordPress plugin Isotope from Mintthemes. But I don't get it to work. I have set the following snippet of code in my page.php and also filled in the optional settings for usage of custom post types.
<?php moveplugins_isotopes(); ?>
Added categories to my custom post type portfolio items but it doesn't work.
My code:
<?php moveplugins_isotopes(); ?>
<ul class="entrybox">
<?php
$args = array('post_type' => 'portfolio');
$loop = new WP_Query($args);
?>
<?php if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); ?>
<li class="grid_4 portfolio-post">
<a href="<?php the_permalink(); ?>">
<div class="thumbnail">
<img src="<?php print IMAGES; ?>/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnail -->
</a>
<div class="description">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div><!-- End div.description -->
</li><!-- End li.grid_4 projectbox -->
<?php endwhile; ?>
<?php endif; ?>
</ul><!-- End ul.entrybox -->
The problem is that your li isn't using the post_class function in WordPress. It uses that post_class to identify which items are in the loop.
It should be something like
<li class="<?php post_class( array('grid_4', 'portfolio-post') ) ?>">
You can find out more about it here:
http://codex.wordpress.org/Function_Reference/post_class

Resources