I am trying to create a Slick JS with ACF repeater, but it doesn't work.
The following code just shows image after image.
Is there something I have forgotten?
By the way, I have already registered the CSS and JavaSscript's on functions.php.
<section>
<div id="slick-hero">
<a id="slick-hero-left" class="slick-hero__arrow-container slick-hero__arrow-container--prev">
<div class="slick-hero__icon-container">
<div class="slick-hero__icon">
<i class="fas fa-angle-left"></i>
</div>
</div>
</a>
<a id="slick-hero-right" class="slick-hero__arrow-container slick-hero__arrow-container--next">
<div class="slick-hero__icon-container">
<div class="slick-hero__icon">
<i class="fas fa-angle-right"></i>
</div>
</div>
</a>
<div class="slick-hero__slider">
<?php if ( have_rows( 'slider_2019_home' ) ) : ?>
<?php while ( have_rows( 'slider_2019_home' ) ) : the_row(); ?>
<div class="slick-hero__slide" style="background-image:url(<?php the_sub_field('slider_home_2019_image'); ?>)">
<div class="container slick-hero__slide__container">
<div class="row">
<div class="col-12">
<div class="slick-hero__slide__content">
<a class="slick-hero__slide__link" href="<?php the_sub_field('slider_home_2019_link'); ?>">
<h4 class="slick-hero__slide__heading">
<?php the_sub_field('slider_home_2019_heading'); ?>
</h4>
<h2 class="slick-hero__slide__title">
<?php the_sub_field('slider_home_2019_sub_title'); ?>
</h2>
<hr class="hero-slider__divider">
<p class="slick-hero__slide__body">
<?php the_sub_field('slider_home_2019_body'); ?>
</p>
<p class="slick-hero__slide__cta-text">
<?php the_sub_field('slider_home_2019_cta_text'); ?>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
</div> <?php // end slick-hero__slider ?>
</div> <?php // end slick-hero ?>
</section>
Are you running
$(document).ready(function(){
$(".slick-hero__slider").slick()
})
anywhere?
Related
I'm new to WordPress, and I've created a custom template, I'm facing a problem when I try to fetch the posts to the front page (homepage).
In (dashboard->Reading) I set my homepage displays as a Static page and selected Home page as (home) and Post page as (posts).
In the index.php the code that's showing the posts in Posts page is :
<section class="recent-posts" id="recent-posts">
<div class="container">
<div class="title text-center">
<h1 class="title-blue">posts</h1>
</div>
<div class="row">
<?php
while(have_posts()) {
the_post();
?>
<div class="col-lg-6">
<div class="single-rpost d-sm-flex align-items-center" data-aos="fade-right"
data-aos-duration="800">
<div class="post-thumb">
<img class="img-fluid" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="post-1">
</div>
<div class="post-content text-sm-right">
<time datetime="<?php the_time('l, jS/n/Y'); ?>">
<?php the_time('l, jS/n/Y'); ?>
</time>
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<p class="post-excerpt">
<?php echo wp_trim_words(get_the_excerpt(), 10); ?>
</p>
<p>
<!-- <a href="#"> -->
<?php echo get_the_category_list(' ') ?>
<!-- </a> -->
</p>
<a class="post-btn" href="<?php the_permalink(); ?>">
<i class="fa fa-arrow-left"></i>
</a>
</div>
</div>
</div>
<?php
}
wp_reset_query();
?>
</div>
<!-- Posts Navigation -->
</div>
</section>
<!-- Paginate through pages -->
<div class="pagination">
<?php echo paginate_links(); ?>
</div>
It works fine in posts page but when I copy the same code in page-home.php file it doesn't work and fetches no posts at all.
Sorry I'm a beginner, but I need help.
Thanks.
Try this
<?php
global $paged, $wp_query, $wp;
$args = wp_parse_args($wp->matched_query);
if ( !empty ( $args['paged'] ) && 0 == $paged ) {
$wp_query->set('paged', $args['paged']);
$paged = $args['paged'];
}
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('paged='.$paged.'&showposts=10&cat='.get_option('prototype_blog_cat'));
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="col-lg-6">
<div class="single-rpost d-sm-flex align-items-center" data-aos="fade-right"
data-aos-duration="800">
<div class="post-thumb">
<img class="img-fluid" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="post-1">
</div>
<div class="post-content text-sm-right">
<time datetime="<?php the_time('l, jS/n/Y'); ?>">
<?php the_time('l, jS/n/Y'); ?>
</time>
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<p class="post-excerpt">
<?php echo wp_trim_words(get_the_excerpt(), 10); ?>
</p>
<p>
<!-- <a href="#"> -->
<?php echo get_the_category_list(' ') ?>
<!-- </a> -->
</p>
<a class="post-btn" href="<?php the_permalink(); ?>">
<i class="fa fa-arrow-left"></i>
</a>
</div>
</div>
</div>
<?php endwhile; ?>
<span >
<?php echo paginate_links( array(
'prev_text' => '<span>Previous</span>',
'next_text' => '<span>Next</span>'
)); ?>
It should solve the problem.
I've been searching through questions/answers on here, but can't seem to find something that works with my code.
Most of the solutions I've found cause the whole page to get a 500 error. They're generally just snippets of the odd/even php, and aren't working for me to easily integrate with the custom post type loop php I have. I'm probably just not putting it in the right place, but nothing seem to be working.
I'm not super great with php, but this is the one thing I've always had an issue getting to work.
Goal:
Odd posts have the headshot on the left, bio info on the right.
Even posts have the headshot on the right, bio info on the left.
Below is my code, which does load on the page (no 500 error), but doesn't output the alternating layout, just outputs the same layout as if I didn't have the odd/even code.
<?php // theloop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $loop = new WP_Query( array( 'post_type' => 'team', 'posts_per_page' => -1, 'order' => 'ASC') ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if ($wp_query->current_post % 2 == 0): ?>
<div class="row team-member"> <!--ODD LAYOUT // HEADSHOT LEFT - BIO RIGHT-->
<div class="container">
<div class="row is-table-row">
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="row team-member"> <!--EVEN LAYOUT // HEADSHOT RIGHT - BIO LEFT-->
<div class="container">
<div class="row is-table-row">
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
</div>
</div>
</div>
<?php endif ?>
<?php endwhile; wp_reset_query(); ?>
Is there anything I've done wrong here, or a better solution to this? I'm frustrated that this is theoretically a simple request that I just can't seem to make work properly. Any help is much appreciated!
OK, pro tip: programmers are lazy. We like the DRY principle. We don't like to duplicate code, nor do we like to maintain giant blocks of duplicated code.
So, below is a modified version of your loop that is somewhat simpler, with less duplication. I would encourage you to consider other ways to reduce duplication, for example, using CSS classes (floats, possibly) to alternate which is on the left or right, and only render one version of the HTML one time.
The specific problem is that you're not accessing the $current_post property of the correct query object. You should be using $loop->current_post instead of $wpdb->current_post. However, to be super clear / explicit, I would manually set a counter, and use that instead:
<?php // theloop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $loop = new WP_Query( array( 'post_type' => 'team', 'posts_per_page' => -1, 'order' => 'ASC') ); ?>
<?php
// initialize the counter here
$post_count = 0;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="row team-member">
<div class="container">
<div class="row is-table-row">
<?php
// move the if condition here to reduce / simplify code
// reference (and increment) the counter
if ($post_count++ % 2 == 0): ?>
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
<?php else: ?>
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
I'm developing a website in wordpress and I want to load more news when scrolling but I already have a html structure and when I put ajax load more it put own structure and I don' want that.
I'm using the Ajax Load More plugin.
So, How can I use Ajax load more with this html structure:
<?php
$posts = get_posts(['cat' => get_cat_ID("news")]);
foreach($posts as $post){
setup_postdata($post);
?>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="news-link" href="<?php the_permalink() ?>">
<div class="news">
<div class="image">
<?php the_post_thumbnail('thumbnail') ?>
<div class="mask">
<div class="icon">
<i class="icon-plus"></i>
</div>
</div>
</div>
<div class="title">
<span>
<?php the_title(); ?>
</span>
</div>
<div class="excerpt">
<p class="date">
<?php echo get_the_date('Y-m-d'); ?>
</p>
</div>
<div class="excerpt">
<p>
<?php the_excerpt(); ?>
</p>
</div>
</div>
</a>
</div>
<?php
wp_reset_postdata();
} ?>
If i put this shortcode it shows but not with the structure that i want.
[ajax_load_more id="7279302844" container_type="div" post_type="post" category="news"]
Thank you
I have just created thus BEAUTIFUL loop
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row sectionrow" onclick="void(0)">
<div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
<div class="textsmall" >
<?php the_field(titlebreak); ?>
</div>
</div>
<div class="col-sm-8">
<div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
<div class="textbigrecipes">
<div class="inner">
<?php the_excerpt(); ?>
<button type="button" class="btn btn-default">READ MORE</button>
</div>
</div>
</div>
</div>
</div>
</div>
But I would like to invert the positon of the bootstrap divs on the second post and return to orginal on the third and ....
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row sectionrow" onclick="void(0)">
<div class="col-sm-8">
<div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
<div class="textbigrecipes">
<div class="inner">
<?php the_excerpt(); ?>
<button type="button" class="btn btn-default">READ MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
<div class="textsmall" >
<?php the_field(titlebreak); ?>
</div>
</div>
</div>
Is it possible?
1. First declare a variable Outside the loop (like as $i =1),
Then check the condition.
Mode of i
example:
if($i% 2 == 0) {
-----layout First code-----
}else
{
-----layout Second code-----
}
Increment the variable value ($i++)
I want to be able to conditionally load a class containing the word 'AUTHOR' in the comments section, next to the name of the person who was the author of the post. I know it has something to do with class bypostauthor, what I've got so far is:
<?php if $class == 'bypostauthor' ?>
<div class="author">AUTHOR</div>
<? endif; ?>
More info:
In comment section of my wordpress post page, the class .bypostauthor exists whenever a the author of post page comments on there post page, giving this for one of the comments in the comment section ->
<li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1 clearfix" id="li-comment-28">
<div class="comment-block" id="comment-28">
<div class="comment-inside-block">
<div class="comment-info">
<div class="comment-author vcard clearfix">
<img alt="" src="http://0.gravatar.com/avatar/6dbfd7e6bd95881c5736647c8736dd89?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32">
<div class="comment-meta commentmetadata">
<cite class="fn">Trent Aughey</cite>
<div style="clear:both;"></div>
<a class="comment-time" href="http://trentaughey.com/test/#comment-28"> 1 day ago </a> </div>
</div>
<div class="clearfix"></div>
</div>
<div class="comment-text">
<p>comment – 2</p>
<p class="reply">
<a class="comment-reply-link" href="/test/?replytocom=28#respond" onclick="return addComment.moveForm("comment-28", "28", "respond", "570")">Reply</a> </p>
</div>
</div>
</div>
<ul class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2 clearfix" id="li-comment-29">
<div class="comment-block" id="comment-29">
<div class="comment-inside-block">
<div class="comment-info">
<div class="comment-author vcard clearfix">
<img alt="" src="http://0.gravatar.com/avatar/6dbfd7e6bd95881c5736647c8736dd89?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32">
<div class="comment-meta commentmetadata">
<cite class="fn">Trent Aughey</cite>
<div style="clear:both;"></div>
<a class="comment-time" href="http://trentaughey.com/test/#comment-29"> 1 day ago </a> </div>
</div>
<div class="clearfix"></div>
</div>
<div class="comment-text">
<p>HELLO</p>
<p class="reply">
</p>
</div>
</div>
</div>
When a non-author of the post page leaves a comment on the post the following code is used
<li class="comment even thread-even depth-1 clearfix" id="li-comment-20">
<div class="comment-block" id="comment-20">
<div class="comment-inside-block">
<div class="comment-info">
<div class="comment-author vcard clearfix">
<img alt="" src="http://0.gravatar.com/avatar/6dbfd7e6bd95881c5736647c8736dd89?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" class="avatar avatar-32 photo" height="32" width="32">
<div class="comment-meta commentmetadata">
<cite class="fn">Trent Aughey</cite>
<div style="clear:both;"></div>
<a class="comment-time" href="http://trentaughey.com/test/#comment-20"> 1 month ago </a> </div>
</div>
<div class="clearfix"></div>
</div>
<div class="comment-text">
<p>Test, Test</p>
<p class="reply">
<a class="comment-reply-link" href="/test/?replytocom=20#respond" onclick="return addComment.moveForm("comment-20", "20", "respond", "570")">Reply</a> </p>
</div>
</div>
</div>
I'm trying to accomplish having the word 'AUTHOR' next to the author of post name whenever they comment on there page. Considering bypostauthor class appears whenever page author post a comment on his page I tried to use the following code to make a div class conditionally appear whenever the post author comments ->
<li <?php comment_class('clearfix'); ?> id="li-comment-<?php comment_ID() ?>">
<div class="comment-block" id="comment-<?php comment_ID(); ?>">
<div class="comment-inside-block">
<div class="comment-info">
<div class="comment-author vcard clearfix">
<?php echo get_avatar( $comment->comment_author_email, 32 ); ?>
<div class="comment-meta commentmetadata">
<?php printf(__('<cite class="fn">%s</cite>', 'playne'), get_comment_author_link()) ?><?php if $class == 'bypostauthor' ?>
<div class="author">AUTHOR</div>
<? endif; ?>
<div style="clear:both;"></div>
<a class="comment-time" href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>"> <?php echo themeblvd_time_ago_1(); ?> </a><?php edit_comment_link(__('(Edit)', 'playne'),' ','') ?>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="comment-text">
<?php comment_text() ?>
<p class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</p>
</div>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.', 'playne') ?></em>
<?php endif; ?>
</div>
My code fix does nothing, can anyone tell me what I'm doing wrong please.
You can filter the comment author name instead of adding something to core files. Your change will be overwritten on a WordPress update.
add_filter( 'get_comment_author', 'your_prefix_filter_the_post_author_name' );
function your_prefix_filter_the_post_author_name( $author ) {
$classes = get_comment_class();
if (in_array( 'bypostauthor',$classes) ) {
$output = '<div class="author-tag"><p>AUTHOR - ' . $author . '</p></div>';
return $output;
}
return $author;
}
I was able to fix this problem using the following code:
function author_tag() {
$classes = get_comment_class();
if(in_array('bypostauthor',$classes)) {
$output = '<div class="author-tag"><p>AUTHOR</p></div>';
} /*else {
$output = '<div class="author-tag"><p>NOT AUTHOR</p></div>';
}*/
return $output;}
Placed the function as follows:
<li <?php comment_class('clearfix'); ?> id="li-comment-<?php comment_ID() ?>">
<div class="comment-block" id="comment-<?php comment_ID(); ?>">
<div class="comment-inside-block">
<div class="comment-info">
<div class="comment-author vcard clearfix">
<?php echo get_avatar( $comment->comment_author_email, 32 ); ?>
<div class="comment-meta commentmetadata">
<?php printf(__('<cite class="fn">%s</cite>', 'playne'), get_comment_author_link()) ?>
<?php echo author_tag(); ?>
<div style="clear:both;"></div>
<a class="comment-time" href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>"> <?php echo themeblvd_time_ago_1(); ?> </a><?php edit_comment_link(__('(Edit)', 'playne'),' ','') ?>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="comment-text">
<?php comment_text() ?>
<p class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</p>
</div>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.', 'playne') ?></em>
<?php endif; ?>
</div>
Hope this helps anyone who had similar issues.