So I need to use the repeater field in ACF to output a section of my website. The way I have it set up it creates a new <div class="row landing-item"> every time its called. I need it to create that every 2 times so the html will be correct for the layout.
<section class="row landing">
<h2>Featured Sections</h2>
<?php if( have_rows('landing_page_landing_items') ): ?>
<?php while ( have_rows('landing_page_landing_items') ) : the_row(); ?>
<div class="row landing-item">
<div class="small-12 medium-6 columns">
<img src="<?php the_sub_field('landing_image'); ?>">
<h3><?php the_sub_field('landing_title'); ?></h3>
<p><?php the_sub_field('landing_text'); ?></p>
<a class="button" href="<?php the_sub_field('landing_link'); ?>">Learn More</a>
</div>
</div><!-- end landing-item -->
<?php endwhile; ?>
<?php endif; ?>
If you look at the above the end result I need is a row with 2 columns, then row with 2 columns and so on and so on. Again right now it gives me a row with 1 column every time. I tried moving about the script initiations outside and inside the rows and columns but could not get the right sequence.
It looks like you may be able to accomplish your end goal by using the Foundation Block Grid feature rather than the standard grid. If you use the block grid, You'll continue to repeat row after row based only on the number of items in the list. See below:
<section class="row landing">
<h2>Featured Sections</h2>
<div class="row landing-item">
<ul class="small-block-grid-1 medium-block-grid-2">
<?php if( have_rows('landing_page_landing_items') ): ?>
<?php while ( have_rows('landing_page_landing_items') ) : the_row(); ?>
<li>
<img src="<?php the_sub_field('landing_image'); ?>">
<h3><?php the_sub_field('landing_title'); ?></h3>
<p><?php the_sub_field('landing_text'); ?></p>
<a class="button" href="<?php the_sub_field('landing_link'); ?>">Learn More</a>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div><!-- end all landing items -->
</section>
You may need to do some CSS if you'd need to do any special per row editing. I'm thinking this may be one solution to your dilemma though.
Related
I am using the ACF Repeater to create rows of images/content and to show/hide when clicked. Everything looks good on desktop screens, with a row of 3 images, when an image is clicked, the hidden div shows up below and the background color toggles on so you know which image's content you are looking at.
My problem, is I am trying to get the same functionality on mobile, but when an image is clicked, the content shows up under the 3rd div. I want to be below the image that was clicked. Since I am using the ACF repeater, my php script creates the parent div (3 across) first and then the hidden divs below.
I don't mind creating a separate html markup for mobile, I just can't figure out how to make it work with the ACF repeater.
<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box">
<img src="<?php the_sub_field('staff_image'); ?>"><div class="image-box"><h3>
<?php the_sub_field('staff_name'); ?></h3>
<h3><?php the_sub_field('staff_position'); ?></h3></div>
</a>
<?php endwhile;
endif; ?>
<?php if (have_rows('staff_bios')):
while (have_rows('staff_bios')): the_row(); ?>
<div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row"><?php
the_sub_field('bio_text'); ?></div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>
http://toolboxdevmachine.com/TechNiche/about-us
Thanks for your help
I'm guessing you've already figured this out by now, in 2019. It looks like you are missing a few closing <div> tags, as well as ending your while loop and the primary conditional. I broke out the code, indented it and wrote it with the correct closing tags:
<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box">
<img src="<?php the_sub_field('staff_image'); ?>">
<div class="image-box">
<h3><?php the_sub_field('staff_name'); ?></h3>
<h3><?php the_sub_field('staff_position'); ?></h3>
</div>
</a>
<?php endwhile;
endif; ?>
<?php if (have_rows('staff_bios')):
while (have_rows('staff_bios')): the_row(); ?>
<div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row">
<?php the_sub_field('bio_text'); ?>
</div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
I'm having a major issue with trying to render Wordpress pagination. I'm not that good with PHP and I've tried just about every solution I can Google. Some of the queries "work" in that they display a set of page numbers, but they break when I add more variables.
For example, when I told it to display ALL pages, it did just that, but then I couldn't limit it using mid_size or any of that. So it was kind of "display all" (which I don't want), or nothing at all. I'm not sure what's breaking, so any pushes in the right direction would be excellent.
My objective: Create a list of numbered page links that truncate properly so it looks like:
[ 1 2 3 ... 97 98 99 ]
Thanks to anyone who can help me out. I'm running Wordpress 4.9.7.
My code looks like this:
<!-- post loop -->
<div class="auto cell">
<?php
// the query
$wpb_all_query = new WP_Query(array('post_type'=>'review', 'posts_per_page' => 3, 'orderby'=>'name', 'order'=>'ASC')); ?>
<?php if ( $wpb_all_query->have_posts() ) : ?>
<!-- start of main news loop -->
<?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
<div class="grid-x grid-margin-x">
<div class="cell large-2 small-2">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="thumbnail">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/img/default_thumb.png" alt="<?php the_title(); ?>" />
<?php } ?></a>
</div>
<div class="cell large-10 small-10">
<h2><?php the_title(); ?></h2>
<span class="post-meta"> By <?php the_author_posts_link(); ?> · <?php the_time('F jS, Y, g:i A'); ?> <?php edit_post_link(__('Edit This'), ''); ?></span>
<ul class="list-meta">
<li>Developer: <?php echo(types_render_field( 'game-developer' )); ?></li>
<li>Genre: <?php echo(types_render_field( 'game-genre' )); ?></li>
</ul>
</div>
<div class="post-categories cell"><?php the_category(', '); ?></div>
</div>
<?php endwhile; ?>
<!-- start of pagination -->
<div class="row">
<?php if (function_exists("pagination")) {
pagination($custom_query->max_num_pages);
} ?>
</div>
<!-- end of pagination -->
<!-- end of main news loop -->
I use this plugin for my pagination. It gives you a settings screen in the back end where you can set up how it's numbered. Hope it helps!
I've created a custom post type called 'portfolio' and am looking to create the loop in 2 columns and 3 columns and also using Advanced Custom Fields to upload an image but I'm not sure what to add to the following code to make it happen.
My Steps
First: I want to generate custom post type that is coming from the portfolio page.
Second: When the user uploads their previous projects to the portfolio page. I want to only loop 8 previous samples to the Homepage.
Third: The 2 columns grid I want to only display the most previous post. But 3 columns grid I want to only display the less previous post. I'm doing the bootstrap 4 grid correctly.
Here's the code that currently doesn't work for me. When I upload the images to the Portfolio page doesn't appear on the homepage.
<!-- recent work -->
<div class="old-portfolio recent_work">
<div class="container-fluid text-center">
<div class="row">
<?php
$alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true ) );
if ( $alter_args->have_posts() ) : while ( $alter_args->have_posts() ) : $alter_args->the_post(); ?>
<div class="portfolio-work col-xs-12 col-md-6 col-lg-12">
<a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image">
<img class="" src="<?php the_field('portfolio_image'); ?>"/>
</a>
<li class="portfolio-item">
<h3><?php the_title(); ?></h3>
</li>
</div>
</div>
<div class="row">
<div class="portfolio-work col-md-4">
<a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image">
<img class="" src="<?php the_field('portfolio_image'); ?>"/>
</a>
<li class="portfolio-item">
<h3><?php the_title(); ?></h>
</li>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- recent work -->
You need to start a counter (by setting a variable) at the beginning of the loop to assign a number to each item in the loop. You can do it by adding $i == 0; And at the end of the loop you need to increase that variable by one $i++; so that the number will change after each item. After doing this you can easily change the treatment of the items by writing an if/else statement within the loop. In your example you want to set the first 2 items to have col-md-6 class and the rest to have col-md-4 class so you add <?php if($i < 2){echo "6";} else {echo "4";} ?>
<?php
$alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true ) );
if ( $alter_args->have_posts() ) : ?>
<?php $i == 0; //Start a counter by setting a variable ?>
<?php while ( $alter_args->have_posts() ) : $alter_args->the_post(); ?>
<div class="portfolio-work col-xs-12 col-md-<?php if($i < 2){echo "6";} else {echo "4";} //For the first 2 items in the loop echo 6 else echo 4 ?> col-lg-12">
<a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image">
<img class="" src="<?php the_field('portfolio_image'); ?>"/>
</a>
<li class="portfolio-item">
<h3><?php the_title(); ?></h3>
</li>
</div>
</div>
<?php $i++; //this will increase the counter by 1 at the end of each item in the loop ?>
<?php endwhile; ?>
<?php endif; ?>
Round 2: Trying to figure out why my content looks fine when screen size is under 992px but not when it is over. Everything looks fine in the lower screens but hardly anything is in the right place in full screen size. I have a feeling it's because of the containers inside the loop, but I'm not sure how to properly take them out without it forcing everything into a narrow column from the .col-md-1 container.
<?php get_header(); ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blog</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-1 text-center">
<p><?php the_time('l, F jS, Y'); ?></p>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="col-md-5">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
</a>
</div>
<?php endif; ?>
<div class="col-md-6">
<h3>
<?php the_title(); ?>
</h3>
<p>by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
<hr>
<?php endwhile; ?>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
</div>
<?php include 'include.php'; ?>
</div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Any insight is greatly appreciated :)
As has been mentioned by others, you need to use some additional grid classes.
For your 8 | 4 grid to work on medium and large devices, you would need to use col-md-8 col-lg-8 on your content area and col-md-4 col-lg-4 on your sidebar.
You'll also want to make sure that your blog posts grids have col-lg-* classes alongside their col-md-* classes.
For your layout to work properly on mobile and tablet devices you'll also want to add some col-xs-* and col-sm-* classes.
For more information on the Bootstrap grid system, I would recommend you view: https://getbootstrap.com/css/#grid
My guess is that its because you are using
<div class="col-lg-8">
but not filling the remaining 4 columns at the lg size (and all contained elements are of the-md class so display fine) and also not clearing the float - so at lg size your elements will be floating next to each other and out of position at the large size but not at smaller sizes where they will display as full rows.
you need to rethink your layout (and either have it go full screen) or add a clearfix class to the parent rows to ensure that the floats are cleared before adding the next row.
Always remember that 12 is the magic number - you don't have to use all the columns (and having col-lg-8 is absolutely fine) but if you dont fill the row you need to clear the float from it - Bootstrapp adds a float:left to the column classes - hence giving your dodgy layout only at the lg size.
Just give it a try with
col-xs-
col-md-
col-lg-
col-xl-
if you need any other info just see the bootstrap "grid system"
http://getbootstrap.com/css/#grid-options
My goal here is to use multiple wordpress loops to style each post in a given category separately. I do believe I have it mostly figured out except for the actual query..
I need to be able to query the {MOST RECENT} post in a category in the first loop, then on the second loop query the 2nd most recent post in a category, then the 3rd most recent post in the next loop, enabling me to have separate classes & styles for each.
Any help would be amazing +++!!
<?php if (have_posts()) : ?>
<?php query_posts('category_name=Main&posts_per_page=1&={MOST RECENT}'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="row1">
<div class="one">
<div class="post_data">
<div class="icons_right"><img src="pop_out_icon.png" alt="pop out icon" /></div>
<h1 class="post_title"><?php the_title(); ?></h1>
<h2 class="post_snippet">Lorem Ipsum Dolar Sit Amet.</h2>
<p class="post_date"><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></p>
</div> <!-- post_data //-->
<?php the_content(); ?>
</div> <!-- 1 //-->
<?php endwhile; ?>
<?php query_posts('category_name=Main&posts_per_page=1&={SECOND MOST RECENT}'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="row2">
<div class="two">
<div class="post_data">
<div class="icons_right"><img src="pop_out_icon.png" alt="pop out icon" /></div>
<h1 class="post_title"><?php the_title(); ?></h1>
<h2 class="post_snippet">Lorem Ipsum Dolar Sit Amet.</h2>
<p class="post_date"><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></p>
</div> <!-- post_data //-->
<?php the_content(); ?>
</div> <!-- 2 //-->
<?php endwhile; ?>
<?php endif; ?>
I notice that although you want to use different loops to define unique classes, your loop blocks are largely the same. If all you want to do is change the classes of your elements, there's no need to use three separate loops, as that will clutter up your template and end up being much slower than using a single loop.
You should also avoid using query_posts, as it overrides the default Wordpress Loop, and may have unintended consequences, especially if you forget to reset the query.
The order of the posts in the loop defaults to the most recent posts, so you don't need to worry about setting the ordering parameters.
Using your example, I've reworked everything to apply dynamic classes to your wrappers depending on how many iterations the loop has gone through. Keep in mind, you can use attributes of the post itself to define your classes to make them unique (in this case, the post ID is used):
<?php
$count = 0;
$postsPerRow = 4; //<-- This will help set your top wrapper
$query = new WP_Query('category_name=Main&posts_per_page=3');
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
if($count<(floor($query->found_posts/$postsPerRow)*$postsPerRow)){
$open = !($count%$postsPerRow) ? '<div class="row row-'.(floor($count/$postsPerRow)+1).'">' : '';
$close = !($count%$postsPerRow) && $count ? '</div>' : '';
echo $close.$open;
?>
<div class="<?php echo "loop-$count post-".get_the_ID(); ?>">
<div class="post_data">
<div class="icons_right">
<img src="pop_out_icon.png" alt="pop out icon" />
</div>
<h1 class="post_title">
<?php the_title(); ?>
</h1>
<h2 class="post_snippet">Lorem Ipsum Dolar Sit Amet.</h2>
<p class="post_date"><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></p>
</div> <!-- post_data //-->
<?php the_content(); ?>
</div> <!-- 1 //-->
<?php
$count++;
}
endwhile;endif;
echo $count ? '</div>' : ''; //<-- Close row wrapper
?>
UPDATE: Now your top wrapper will store 4 posts per row. This can be adjusted however you need through the $postsPerRow variable, and you can always increase the Posts_per_page parameter as needed.
EDIT 2: Using WP Query has the added benefit of separating out values you might need. Review the code for an update to your latest question.