I have the following code (inherited, I didn't write it) and I'm struggling to understand why it's only bringing back the 4 most recent posts instead of all of them. That being said, I don't WANT all at once, but I want to be able to control how many come back.
Additionally, I'm going to need to write a function with a link at the bottom of this that says "Load more" and, when clicked, will bring back (via AJAX) the next four (or however many) posts to render immediately beneath the already displayed ones. How would I go about that?
Thanks!
<?php if (have_posts()): ?>
<div class="postSection">
<?php
while (have_posts()) : the_post();
$pdf_download = get_post_meta($post->ID, 'pdf_download', true);
$pdf_label = get_post_meta($post->ID, 'pdf_label', true);
?>
<div class='postBox <?php foreach ((get_the_category()) as $cats) {
echo $cats->slug . ' ';
} ?>'>
<div class="postImage">
<a href="<?php the_permalink(); ?>"
title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
<div class="postContent">
<h3><a href="<?php the_permalink(); ?>"
title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h3>
<div class="postExcerpt">
<p><?php the_excerpt_rss(); ?> <a class="readMore"
href="<?php the_permalink(); ?>"
title="<?php the_title_attribute(); ?>">Read
More</a></p>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif;
Related
I have created a custom Gutenberg block that is basically a link. When I click the block in the editor I immediately get sent to the page the block links to instead of being able to edit the block. How do I stop this from happening? I've already tried putting pointer-events: none as a style on it but that doesn't do anything surprisingly.
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
</a>
Since this may help others in the future, wrap your <a> tag in an if statement to check if your in the admin area. If you are, then it won't output those tags.
<?php if ( ! is_admin() ) : ?>
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<?php endif; ?>
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
<?php if ( ! is_admin() ) : ?>
</a>
<?php endif; ?>
I have tried to code my wordpress theme as simple as possible but I don't really understand why I can't display an image from Advanced Custom Field into a modal box using Featherlight.js (http://noelboss.github.io/featherlight/)
Here is my online page http://www.skuar.com
This is my single.php code, which simply display the image custom field
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
and this is the wp loop content
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>" data-featherlight="image">
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
</div>
I just would like to open the image in a lightbox...
Is that make sense?
Thanks!
In invalid double quotes in your code. Try this code:
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php $image = get_field('image');
if( !empty($image) ): ?>
<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>
<?php endif; ?>" data-featherlight="image">
</div>
</a>
</div>
Any idea why the code below is only loading the thumbnail into the fancybox overlay? The image array within .portfolio-slideshow is loading in the background fine, it's just not being triggered correctly with fancybox.
Wordpress code:
<a class="fancybox" href="<?php print $slideshow['guid']; ?>" rel="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<div class="portfolio-slideshow">
<?php
$slideshow = get_custom_field('portfolio_images:to_array', 'get_post');
foreach($slideshow as $img) {
?>
<img src="<?php print $img['guid']; ?>" />
<?php } ?>
</div>
<h4><?php the_title(); ?></h4>
</a>
I had to wrap the array of images in the fancybox link + the rel title, this did the trick:
<div class="portfolio-slideshow">
<?php
$slideshow = get_custom_field('portfolio_images:to_array', 'get_post');
foreach($slideshow as $img) {
?>
<a class="fancybox" href="<?php print $img['guid']; ?>" rel="<?php the_title(); ?>"><img src="<?php print $img['guid']; ?>" /></a>
<?php } ?>
</div>
<a class="fancybox" href="<?php print $img['guid']; ?>" rel="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<h4><?php the_title(); ?></h4></a>
I try to show an WordPress Gallery on home page, but with the same effect present in a post page. Basically is show the gallery post on homepage when you clicking a post-thumb. I explain the problem:
When I click on post_thumb, show in the home I like this show me, a Gallery attatch in this post. This my code:
<ul id="rb-grid" class="list rb-grid">
<?php $number = 0; query_posts('category_name=atracciones-home'); if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<li>
<!-- <a data-fancybox-group="gallery" class="item fancybox" href="<?php the_permalink(); ?>"> -->
<a data-fancybox-group="gallery" class="item fancybox iframe" href="<?php get_attachment_link(); ?>">
<?php
if ( has_post_thumbnail() )
the_post_thumbnail('home-atracciones');
else
echo '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/default-thumbnail.png' . '" alt="" />';
?>
<div class="over" id="gallery-atracciones">
<h2 class="page-title" title="<?php the_title(); ?>"><?php the_title(); ?><span class="border"></span></h2>
</div>
</a>
</li>
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>
</ul>
Need to check is_home() For More Details about is_home() function Click Here
<?php
if ( is_home() ) {
// This is the blog posts index
<ul id="rb-grid" class="list rb-grid">
<?php $number = 0; query_posts('category_name=atracciones-home'); if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<li>
<!-- <a data-fancybox-group="gallery" class="item fancybox" href="<?php the_permalink(); ?>"> -->
<a data-fancybox-group="gallery" class="item fancybox iframe" href="<?php get_attachment_link(); ?>">
<?php
if ( has_post_thumbnail() )
the_post_thumbnail('home-atracciones');
else
echo '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/default-thumbnail.png' . '" alt="" />';
?>
<div class="over" id="gallery-atracciones">
<h2 class="page-title" title="<?php the_title(); ?>"><?php the_title(); ?><span class="border"></span></h2>
</div>
</a>
</li>
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>
</ul>
} else {
// This is not the blog posts index
get_sidebar();
}
?>
I have found this code:
<?php
$myposts = get_posts('');
foreach($myposts as $post) :
setup_postdata($post);
?>
<div class="post-item">
<div class="post-info">
<h2 class="post-title">
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p class="post-meta">Posted by <?php the_author(); ?></p>
</div>
<div class="post-content">
<?php the_content(); ?>
</div>
</div>
<?php comments_template(); ?>
<?php endforeach; wp_reset_postdata();
?>
Is it good way to display posts? Because it shows, but if I click some post, it shows again all posts but with comments..Is it possible to show only that topic which I have clicked?
(or if you have some better code to show posts, please write it here)