How can I have multiple loops on one page in Wordpress? - wordpress

I am using a nice jquery slideshow plugin I found and trying to get it to work into my Wordpress template. I have tried the code below in various formats but I can't seem to get it the way I want.
The first part is where the title and content of the post reads into the slider, using a specific category. I have 3 of these sections:
<div class="details_wrapper">
<div class="details">
<div class="detail">
<?php query_posts('cat_ID=7&showposts=1');
if (have_posts()) : while (have_posts()) : the_post();?>
<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>">
<?php the_title() ?></a><?php the_excerpt(); ?></h2>
<?php endwhile; endif;
?>
</div><!-- /detail -->
<div class="detail">
<?php query_posts('cat_ID=8&showposts=1');
if (have_posts()) : while (have_posts()) : the_post();?>
<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>">
<?php the_title() ?></a><?php the_excerpt(); ?></h2>
<?php endwhile; endif;
?>
</div><!-- /detail -->
<div class="detail">
<?php query_posts('cat_ID=9&showposts=1');
if (have_posts()) : while (have_posts()) : the_post();?>
<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>">
<?php the_title() ?></a><?php the_excerpt(); ?></h2>
<?php endwhile; endif;
?>
</div><!-- /detail -->
</div><!-- /details -->
</div>
Now this actually works, but I just need it to post the title and excerpt from one of the posts from the category noted. I was reading that I may need to add the wp_reset_query(); line somewhere to destroy the previous loop's query, but I'm not sure.
Here's the second part of the code where the post's featured image is retrieved:
<div class="item item_1">
<?php query_posts('cat_ID=7&posts_per_page=1'); ?>
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</div><!-- /item -->
<div class="item item_2">
<?php query_posts('cat_ID=8&posts_per_page=1'); ?>
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</div><!-- /item -->
<div class="item item_3">
<?php query_posts('cat_ID=9&posts_per_page=1'); ?>
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</div>
Any help would be greatly appreciated :) Here's an example.

Have you tried using...
query_posts('cat_ID=9&posts_per_page=1');
Or I have used get_post before as while to get certain amount of post like so...
<?php
global $post;
$myposts = get_posts('posts_per_page=1&numberposts=-1&category=1');
foreach($myposts as $post) :
?>
<h6><?php the_title(); ?></h6>
<?php setup_postdata($post);?>
<?php the_excerpt(); ?>
<?php endforeach; ?>
</div>
If its just one post you want you wouldn't really need the foreach or while loop.

I used the method Tianbo84 suggested above both to query the posts AND the featured images from that post to finish the job :) Thanks Tianbo84! To my understanding, the get_posts and <?php endforeach; ?> lines were key... like opening a query and then closing it once the data was retrieved.

Related

Creating Links to Custom Post Type's on Wordpress Page

I'm trying to have two things on a Wordpress page: a list of Custom Posts as well as the content of the custom posts. I would like the titles of the Custom Posts to link to the section of the page with the posts' content.
For example:
Item One
Item Two
Item Three
ITEM ONE HEADING
Item One content...
ITEM TWO HEADING
Item two content...
ITEM THREE HEADING
Item three content...
So "Item One" would link to "ITEM ONE HEADING". Here's the code I'm using which shows the Custom Post List as well as the content, but the list items link out to the Custom Post's page.
<ul>
<?php
$query = new WP_Query( array( 'post_type' => array( 'drilling' ) ) );
while ( $query->have_posts() ) : $query->the_post();
echo '<li><a href="';
the_permalink();
echo '">';
the_title();
echo '</a></li>';
endwhile;
?>
</ul>
<?php wp_reset_query(); ?>
and
<?php query_posts( 'post_type=drilling'); ?>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<section class="service-middle">
<div class="container">
<div class="service-middle-content sixteen columns">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><?php echo get_the_title($ID); ?> </h2>
<?php the_content(); ?>
<br class="clear">
<?php edit_post_link(); ?>
</article>
<!-- /article -->
</div> <!--end service-middle-content-->
</div> <!--end container-->
</section> <!--end service-middle-->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
Thanks so much for any help!
-Dan
You want to use HTML Anchors
http://www.w3schools.com/html/html_links.asp
It is worth mentioning that you don't actually need to query the posts twice. You could you the WP get_posts function (https://codex.wordpress.org/Template_Tags/get_posts) to get the posts as an array and then loop through this array to generate a nav and your post contents.
Hope this helps!
<ul>
<?php
$query = new WP_Query( array( 'post_type' => array( 'drilling' ) ) );
while ( $query->have_posts() ) :
$query->the_post();
?>
<li><?php the_title(); ?></li>
<?php endwhile; ?>
</ul>
<?php wp_reset_query(); ?>
<?php query_posts( 'post_type=drilling'); ?>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<section class="service-middle">
<div class="container">
<div class="service-middle-content sixteen columns">
<!-- Anchor Tag -->
<a name="post-<?php the_ID(); ?>"></a>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><?php echo the_title(); ?> </h2>
<?php the_content(); ?>
<br class="clear">
<?php edit_post_link(); ?>
</article>
<!-- /article -->
</div> <!--end service-middle-content-->
</div> <!--end container-->
</section> <!--end service-middle-->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>

ACF Repeater Field in Flexible Content

I am trying to add a repeater field into a flexible content row but for some reason nothing is being output. I have checked the fields and they seem correct so could someone please point me out to where I am going wrong? Thanks
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_field('collection_images_grid')): ?>
<?php while(has_sub_field('collection_images_grid')): ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
your <?php if(get_field('collection_images_grid')): ?> statement should be <?php if(get_sub_field('collection_images_grid')): ?>
<?php
// check if the flexible content field has rows of data
if( have_rows('the_process') ){
// loop through the rows of data
while ( have_rows('the_process') ) : the_row();
if( get_row_layout() == 'content' ){
?>
<h1><?php the_sub_field('headline');?></h1>
<h2 class="tagLine paddingBottom80"><?php the_sub_field('sub_headline');?></h2>
<div class="steps clearAfter">
<?php if(get_sub_field('process_steps')): ?>
<?php
while(has_sub_field('process_steps')):
?>
<!--Step-->
<div class="processStep rel boxSizing">
<img src="images/ph.png" width="200" height="200" class="borderRadius50Perc imageBorder boxSizing" />
<div class="processBox border1 padding20 clearAfter">
<div class="third processNumber boxSizing font70 darkBlue">
<div class="border1 padding20">
<?php echo $i;?>
</div>
</div>
<div class="twothird boxSizing processContent">
<h3><?php the_sub_field('step_headline'); ?></h3>
<div class="processContentTxt grey">
<?php the_sub_field('step_content'); ?>
</div>
</div>
</div>
</div>
<!--Step-->
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php
}
endwhile;
}
?>
You should change one thing in your code. Change <?php if(get_field('collection_images_grid')): ?> to <?php if(get_sub_field('collection_images_grid')): ?> and it will works! I've simulate your issue and after change to sub_field it works. Your code will be like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_sub_field('collection_images_grid')): ?>
<?php while(has_sub_field('collection_images_grid')): ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
I had a little problems to use repeaters inside acf flexible content. So if I could say something to help in this cases is to use a variable to print the elements of repeater array, like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_sub_field('collection_images_grid')): ?> // considering that collections_images_grid are a repeater
<?php $collection_image = get_sub_field('collection_images_grid');?>
<?php echo $collection_image['url']; ?> <?php echo $collection_image['alt']; ?> //Or something that you would like to use [... and than the rest of code]
Assuming your repeater field is collection_images_grid, you should loop through the items with have_rows(), like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(have_rows('collection_images_grid')): ?>
<?php while(have_rows('collection_images_grid')): the_row(); ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
This essentially checks if the flexible content field has rows of data (<?php if(have_rows('collection_images_grid')): ?>), and then loops through / displays them (<?php while(have_rows('collection_images_grid')): the_row(); ?>).
More details about looping through fields with have_rows(): https://www.advancedcustomfields.com/resources/have_rows/
To debug all the Advanced Custom Fields on a page and get a better understanding of the structure, I often use the following PHP snippet:
echo '<pre>';
var_dump(get_fields());
echo '</pre>';
This helps to make sure the data is available, and figure out how to reach it in the nested structure.

Can't show / hide a part in WordPress with the normal loop

I tried the following. When there is content to show, show it + show H3 <h3>Overview</h3>, if not show noting.
But this will not work for me.
My code:
<?php
$heroimage = get_field('hero_image' );
$alt = $image['title' ];
?>
<?php if ($heroimage) : ?>
<div class="grid_12">
<img src="<?php echo $heroimage; ?>" alt="<?php echo $alt; ?>"/>
</div><!-- End div.grid_12 -->
<?php endif; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article class="grid_8">
<h3>Overview</h3>
<?php the_content(); ?>
</article><!-- End article.grid_8 -->
<?php endwhile; ?>
The first part of the Hero image is to get the image from the plugin Advanced Custom Fields. The problem lies on the if have_posts etc..
Thanks for advance!
regarding to the codex, it should be
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="grid_8">
<h3>Overview</h3>
<?php the_content(); ?>
</article><!-- End article.grid_8 -->
<?php endwhile;
endif;
?>
You forgot to close your if statement.

WordPress Query Posts To Show All & Style Each One

I am trying to include every post onto my index page on WordPress and have each one of them be styled with the included CSS. I am able to query all of the posts and have them show up, but only the first post is actually styled. The rest inherit the base h1, h2, p and other generic styles, but they aren't inheriting the "box" class for each one. All of the information is being thrown into one 'box' class instead of starting a new 'box' class for each post like I would like it to do. Any help on this would be appreciated.
Here is my code I am using
<?php get_header(); ?>
<div id="index-float-left">
<div class="box">
<?php query_posts( 'showposts=-1' ); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<p class="post-date"><?php echo $post_date = get_the_date(); ?></p>
</div>
</div> <!-- END BOX -->
</div> <!-- FLOAT BOX BOX -->
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
There is a problem with "End Box" and "Fload Box Box". Can you try like this:
<?php get_header(); ?>
<div id="index-float-left">
<?php query_posts( 'showposts=-1' ); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="box">
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<p class="post-date"><?php echo $post_date = get_the_date(); ?></p>
</div>
</div> <!-- END BOX -->
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div> <!-- FLOAT BOX BOX -->
<?php get_sidebar(); ?>

wordpress list of posts

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)

Resources