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; ?>
Related
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'm building a theme and on my category.php page I want to show several full posts (let's say 3, but need to be able to change this to 2 or 1 easily), and then the rest of the posts in the category as title links.
I have quite a bit of HTML in my loop for styling my posts and adding custom fields so sorry about all the code, but this is what my category.php page looks like now. I've tried a few things that haven't worked so have edited this to show my original code which just has a normal list of posts. I'm somewhat new to editing The Loop so would appreciate as much explanation/clarity as possible.
<?php
/**
* The template for displaying Category Archive pages.
*/
get_header(); ?>
<div id="primary" class="<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>">
<div id="feature-container" class="full-width-container">
<div class="full-width-container content-page" id="tagline-wrapper">
<div id="left-black"></div>
<div class="page-width-container">
<div id="tagline-box">
<h1 class="category-title">Transactions</h1>
</div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="project-menu" class="page-width-container">
<?php wp_nav_menu( array( 'theme_location' => 'project-types' ) ); ?>
</div>
<div id="content" role="main" >
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="story-container" class="module-container">
<div class="our-story">
<div class="story-image">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<div class="story-text">
<article class="post" id="post-<?php the_ID(); ?>">
<div class="entry-container">
<h2><?php the_title(); ?></h2>
<div class="project-details">
<p><span class="details-location"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-location', true);
wp_reset_query();
?></span><br />
<span class="details-funding"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-type', true);
wp_reset_query();
?> | <?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-source', true);
wp_reset_query();
?></span><br />
<span class="details-value"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-value', true);
wp_reset_query();
?></span></p>
</div>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => __('Pages: ','html5reset'), 'next_or_number' => 'number')); ?>
</div>
<?php edit_post_link(__('Edit this entry','html5reset'), '<p>', '</p>'); ?>
</div>
</article>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div><!-- #content -->
</div>
</div><!-- #primary -->
<?php get_footer(); ?>
You can achive above thing using following code:
First you have to loop all post and and put counter when it reach more then 2 its stop to print a content.but title will be there always.
<?php $countPost=1;?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>">
<?php the_title(); ?></h2>
<?php if($countPost>2) : /*Condition for Content*/
the_content();
endif;
?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','« Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries »','') ?>
</div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>
</div>
For more details please refer :
https://codex.wordpress.org/The_Loop_in_Action
I figured out a bit of a workaround solution on my own, although it relies on using plugins/widgets which isn't what I'd prefer.
I simply set the Reading settings to display 2 posts, and then below the Loop I added a widget area and used the Recent Posts Extended widget to display a list of titles/links. This widget allows you to skip a certain amount of posts in the list, so I set it to start at post #3. There was no option to show posts from the current category only, so I had to use the Widget Context plugin as well and make individual widgets with a specific category to show on each corresponding category page. As I said, a bit of a convoluted solution, but the end result is exactly what I wanted to achieve.
I'm trying to use CSS multicolumn to create a masonry layout for the blog index page of a WordPress website I'm building, and I'm having some issues with it. I'm using Bones as the starter theme.
I adjusted the loop in the home.php file to create the masonry effect:
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
<div class="masonry-container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="masonry-item">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<a href="<?php the_permalink(); ?>">
<section class="entry-content cf">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<?php the_post_thumbnail('masonry-thumb'); ?>
<span class="caption"><span><?php the_title(); ?></span></span></a>
<?php endif; ?>
</div><!--.masonry-thumbnail-->
</div> <!--.masonry-item-->
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
<div class="blog-index-content"><?php the_content(); ?></div></a>
</section>
</article>
<?php endwhile; ?>
<?php bones_page_navi(); ?>
<?php else : ?>
<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1><?php _e( 'Oops, Post Not Found!', 'bonestheme' ); ?></h1>
</header>
<section class="entry-content">
<p><?php _e( 'Uh Oh. Something is missing. Try double checking things.', 'bonestheme' ); ?></p>
</section>
<footer class="article-footer">
<p><?php _e( 'This is the error message in the index.php template.', 'bonestheme' ); ?></p>
</footer>
</article>
<?php endif; ?>
</div> <!--.masonry-container-->
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
I'm trying to get the image to fill the entire .masonry-item div with the post thumbnail (featured image), and right now, the .masonry-item div is larger that the post thumbnail.
There's also an empty <a> tag that appears under the image and I can't figure out where it's coming from.
I'm also trying to get the post title to appear over the thumbnail image once it, and I haven't figured out how to get it to work.
Here's a link to my test site: http://tippingpointphoto.flywheelsites.com/blog/
Any help would be much appreciated!
Inside your .masonry-thumbnail div there is a <a> link, this is the empty tag. Give it a class name and assign it these style properties:
.link { // for example if you called it link
display:block; // this will wrap it around the image
position:relative; // to position the caption
}
Now update your .caption class and add:
position:absolute;
top:auto;
bottom:0; // to text will start from the bottom of the image
z-index:1; // to position the text above the image
And when i looked at your site the image width appeared to match the div width so I'm assuming you managed to fix that problem? If not change it's css so that width is set to 100%.
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.
I have
<?php while ( have_posts() ) : the_post(); ?>
<div class="boxes-third boxes-first">
<div class="latestthree">
<div class="title">
<?php get_the_title($id); ?> // I am trying to get the post title here but doesn't work
<span class="titlearrow"></span>
</div>
<div class="latestthreeimage">
<a rel="prettyPhoto" title="<?php get_the_title($id); ?>"> /same here
<?php the_post_thumbnail(array(300,133)); ?>
</a></div>
<div class="text">
Here i would like to get the excerpt of the post that is no longer than 25 words
<span class="textarrow"></span>
</div>
</div>
</div>
<?php endwhile; ?>
I am trying to do the above mentioned, but did not worked and on the last one did not find related info. I am using wp 3.7.1. Please help me.
You have used get_the_title() which does not print. To print out the title, add an extra echo:
<?php echo get_the_title(); ?>
Or you can use the_title(), which also prints:
<?php the_title();?>
Try just using,
the_title();
Reference.