OK, this is a bit complicated so Ill try my best to explain it:
I have a while loop which has a next link, before I just had it in standard html, so it was farely simple, on click of the class 'arrow' it would just to the next section e.g:
$i = 0;
while ( have_rows('sections') ) : the_row();
$sectionName = $i++;
?>
<section id="<?php echo $sectionName; ?>" class="full-bg-image" style="background-image: url('<?php the_sub_field('section_image'); ?>')">
<div class="image divider" id="partnersImg" style="background-image: url('<?php the_sub_field('section_image'); ?>')">
<div class="wrapper">
<div class="overlay" style="color: <?php the_field('section_text_colour','options'); ?>">
<?php the_sub_field('divider_text'); ?>
</div>
</div>
</div>
<div class="sectionContent">
<div class="wrapper">
<div class="centerContent">
<div class="contentWrapper">
<div class="text animation-element" data-sr="enter center wait 0.5s, no reset" style="background-color: <?php the_field('text_block_bg_colour','options'); ?>; color: <?php the_field('text_block_text_colour','options'); ?>">
<?php the_sub_field('section_text'); ?>
<div class="arrowContainer"></div>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</section>
<?php endwhile;
The sectionName variable is set for each item name that is added in the wordpress admin however the issue comes when my above code shows and the anchor is linking too itself and not the next section, I would like to know how to link it to the next section and if its the last section then to have a anchor which links to the first.
<section id="0">
<div class="arrowContainer"></div>
</section>
<section id="1">
<div class="arrowContainer"></div>
</section>
<section id="2">
<div class="arrowContainer"></div>
</section>
<section id="3">
<div class="arrowContainer"></div>
</section>
In this case I am using Advanced Custom Fields repeater and not posts.
Related
It's my first time working with wordpress, ACF and PHP, and well, I've
been in this trouble for days, does anyone know what's going wrong for
the Loop not working?
<div class="swiper">
<div class="swiper-wrapper">
<?php
foreach (get_field('fleet_slides') as $fleet_slide) {
$image = $fleet_slide['image_slide']['url'];
?>
<div class="img-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="<?php echo $image?>" />
</div>
</div>
<?php
}
?>
</div>
<!-- Additional required wrapper -->
<div class="swiper-controls">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
I never liked this syntax:
while( have_rows('fleet_slides', 'option') ) : the_row();
I just treat them as arrays. (I have a repeater called slides with sub fields: image, html). This code works for me.
foreach (get_field('slides') as $slide) {
$image = $slide['image']['url'];
$html = $slide['html'];
?>
<div class="banner-carousel-item" style="position:relative; background-image:url(<?php echo $image; ?>)">
<div style="background:rgba(0,0,0,0.25); position: absolute; top: 0; bottom: 0; left:0; right: 0; ">
</div>
<div class="slider-content">
<div class="container h-100">
<div class="row align-items-center h-100">
<?php echo $html ?>
</div>
</div>
</div>
</div>
<?php
}
?>
<?php $section1 = get_field('section1'); ?>
<div class="section1" id="section1">
<div class="container">
<h2><?php echo $section1['title']; ?></h2>
<div class="quote-triangle">
<p>
<?php echo $section1['quote']; ?>
</p>
<div class="quote__moving-border"></div>
</div>
<div class="bottom">
<div data-aos="fade-down">
<div class="leftside">
<h3>
<?php echo $section1['title_image']; ?>
</h3>
<div class="caption"><?php echo $section1['caption_image']; ?></div>
<div class="desc">
<p>
<?php echo $section1['desc_image']; ?>
</p>
</div>
</div>
</div>
<div data-aos="fade-down">
<div class="rightside">
<img src="<?php echo esc_url( $secttion1['image']['url'] ); ?>" alt="" class="rightside__img">
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
I had followed literally the ACF documentation for the GROUP type but when I put the if in the PHP tag the whole section disappears and when I remove if the section back but The Group type still not worked.
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 something that I just can't understand. I did a one page layout site in wordpress. It consist of one template-index.php that only have one mainContainer div and about 6 include_once template-. Then in the admin section of wordpress I used advanced custom fields to create the different fields all related to template-index.php.
Everything shows up just fine except for the text on the last frame or last include if you will. But here is the strange thing. If I change the order of the last two includes both text shows up just fine and then when I change the order back the last include loose it's text again.
I checked the code, every php tag is closed just fine, the include before also. I don't know. Did something like this ever happen to one of you? What could it be?
Thanks
edit:
here is a bit of code.
So the index page is pretty simple:
<?php
/* Template Name: index template */
?>
<?php get_header(); ?>
<div class="mainContainer"id='fullpage'>
<?php include_once 'template-about.php'; ?>
<?php include_once 'template-theDesign.php'; ?>
<?php include_once 'template-theApp.php'; ?>
<?php include_once 'template-getApp.php'; ?>
<?php include_once 'template-community.php'; ?>
<?php include_once 'template-contact.php'; ?>
</div>
<?php get_footer(); ?>enter code here
the last two includes look like this:
<?php
/* Template Name: Bob community template */
?>
<!-- <div id="section-5"> -->
<div class="sectionContainer community section" id='section_five'>
<div class="container main">
<div class="vertical100 firstSection col-md-12 topSection ">
<section class='worldMap animation col-md-6'>
<div class="imgContainer">
<div class="wordpressImg">
<img class='worldMap' src="<?php echo get_template_directory_uri(); ?>/img/worldmap.png" />
</div> <!-- wordpressImg -->
</div><!-- imgContainer -->
</section>
<section class="explications col-md-6">
<div class="communityExplication">
<div class="wordpressTexte">
<?php the_field('community_text'); ?>
<div class="stories">
<?php
$args = array( 'post_type' => 'stories', 'posts_per_page' => 8, 'orderby' => 'rand' );
$loop = new WP_Query($args);
$posts = $loop->posts;
if(have_posts()) {
$first = true; ?>
<div class="storieAligner">
<div class="stories-container ">
<?php
$count = 0;
while($loop->have_posts() ) : $loop->the_post();
$randomPost = $posts[$count];
$image = get_field('images');
$temoignage = get_field('temoignage');
?>
<!-- <div class="storiePhoto"> -->
<div class='storiesThumbs' style='background-image: url("<?php echo $image['url']; ?>")' data-temoignage="<?php echo $temoignage; ?>"></div>
<div class="categorie"></div>
<!-- </div> -->
<?php $count++; endwhile; ?>
</div> <!-- stories-container -->
<div class="fullStorie hiddenStorie">
<div class="back"></div>
<div class="leftDiv">
<div class="leftContent">
</div>
</div>
<div class="rightDiv">
<div class="rightContent"></div>
</div>
</div>
</div> <!-- storieAligner -->
<?php }; ?> <!-- if have_posts -->
</div> <!-- stories -->
<div class="linkContainer" ><a class='formToggle pinkButton roll' href="#" title="Wha you say"><span data-title='What you say'>What you say</span></a></div>
</div> <!-- wordpressTexte -->
</div> <!-- commnunityExplication -->
<!-- <div class="storiesFormContainer"> -->
<div class="storiesForm hidden">
<div class="formContainer">
<h1><?php echo __('Leave a Review of your app ', 'site'); ?></h1>
<?php echo do_shortcode('[contact-form-7 id="89" title="community-contact"]'); ?>
</div>
</div>
<!-- </div> storiesFormContainer -->
</section>
</div> <!-- get app -->
</div> <!-- main -->
and the contact template like this
<?php
/* Template Name: Contact-us template */
?>
<!-- section-6 -->
<div class="sectionContainer contact section" id='section_six'>
<div class="container main" >
<div class="vertical100 col-md-12 topSection ">
<section class='explications col-md-3'>
<div class="blockTexte">
<div class="wordpressTexte">
<?php the_field('questions'); ?>
<a class ='pinkButton roll' href="#" title="visit page"><span data-title='<?php echo __('visit page', 'site'); ?>'><?php echo __('visit page', 'site'); ?></span></a>
</div>
</div>
</section>
<section class="formulaire col-md-9">
<div class="formContainer">
<div class="wordpressForm">
<?php echo do_shortcode('[contact-form-7 id="44" title="contact-us"]'); ?>
</div>
</div>
</section>
</div> <!-- knowBob -->
</div>
So what could be wrong?
P.s. I know there's a bit a french and english in the code. I usually write what comes up first in my head.
You need to reset the post data to the original query using wp_reset_postdata after you're done looping through a custom query:
<div class="stories-container ">
<?php
$count = 0;
while($loop->have_posts() ) : $loop->the_post();
$randomPost = $posts[$count];
$image = get_field('images');
$temoignage = get_field('temoignage');
?>
<!-- <div class="storiePhoto"> -->
<div class='storiesThumbs' style='background-image: url("<?php echo $image['url']; ?>")' data-temoignage="<?php echo $temoignage; ?>"></div>
<div class="categorie"></div>
<!-- </div> -->
<?php $count++; endwhile; wp_reset_postdata(); ?><!-- this line here -->
</div> <!-- stories-container -->
Otherwise the $post object will remain the last post of the $loop query, causing any other behind the scenes requests for post data down the road (in your case get_field) to reference the wrong post until you hit the outer loop again.
I have a chunk of content in a textarea that I can call dynamically to the front by using <php the_content ?> See full code below.
The problem is, I dont have an assigned area for the image. (I'm open to options to create one but I think it will be too much effort), anyway, is there anything I can do (JQuery / JS is fine) that I can call the image to fill the: <?php echo $the_content['image'] ?> that you see in my code, which obviously does not work? Meanwhile leaving the actual text part or rest of the content separate.
I am attaching an illustration for a more visual idea of what I am looking for
Here is the entire code for that section
<section class="box classes-box" id="classes_box"><!-- Section Events -->
<div class="container light-grey-background">
<div class="row">
<div class="col-md-6 no-padding">
<div class="boxing-classes" style="background-image: url('<?php echo $the_content['image'] ?>')">
<div class="classes">
<nav class="classes-nav">
<ul class="clean-list toggle-list clearfix">
<?php foreach($slides as $i => $slide): ?>
<li class="classes-menu-item ">
<input type="radio" id="toggle-<?php echo $slide['post']->ID; ?>" name="toggle-helper" autocomplete="off">
<label for="toggle-<?php echo $slide['post']->ID; ?>"><?php echo get_the_title( $slide['post']->ID ) ?></label>
</li>
<?php endforeach; ?>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-6 no-padding ">
<?php foreach($slides as $i => $slide): ?>
<div class="classes-content-block" id="classes_content_<?php echo $slide['post']->ID ?>" style="display:none;">
<header class="padding white-background">
<h2 class="entry-header black-background"><?php echo get_the_title( $slide['post']->ID ) ?></h2>
</header>
<div class="entry-content padding">
<?php echo apply_filters('the_content', $slide['post']->post_content); ?>
<?php if ( !empty( $slide['options']['button'] )): ?>
<div class="white-background">
<a class="read-more text-center red-black-hover" href="<?php echo $slide['options']['button']['link'] ? $slide['options']['button']['link'] : '#'; ?>"><?php echo $slide['options']['button']['link_text'] ? $slide['options']['button']['link_text'] : 'View Timeline' ; ?></a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
Normally, what people do is to create a Shortcode that will produce the desired HTML, something like:
[image-block src="apple-touch-icon.png" class="all-imgs" id="my-img"]The content[/image-block]
This would be the shortcode:
add_shortcode( 'image-block', function( $atts, $content) {
return sprintf(
'<div class="left"><img src="%1$s" class="%2$s" id="%3$s"></div><div class="right">%4$s</div>',
$atts['src'],
$atts['class'],
$atts['id'],
$content
);
});
And this the output:
See CSS property FLOAT : left|right
<div id=container class="clearfix">
<div class="image-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<img src="images/mypicture.jpg" alt="" class="rwd-image" id="mymage">
</div>
<div class="content-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<p>Lorem Ipsum</p>
</div>
</div>