simply i wanted to do this for a wordpress loop and i want the fallowing result.
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>
<div class="List-Module">
<div class="List-Module-Big">TITLE OF POST#1</div>
<div class="List-Module-Grid">
<div class="List-Module-Grid-Item">TITLE OF POST#2</div>
<div class="List-Module-Grid-Item">TITLE OF POST#3</div>
</div>
<div class="List-Module-Item">TITLE OF POST#4</div>
<div class="List-Module-Big">TITLE OF POST#5</div>
<div class="List-Module-Grid">
<div class="List-Module-Grid-Item">TITLE OF POST#6</div>
<div class="List-Module-Grid-Item">TITLE OF POST#7</div>
</div>
<div class="List-Module-Item">TITLE OF POST#8</div>
</div>
//loops all through 32 items
as you see 1n, 2n, 3n and 4n posts results have to be in different classes. Can you help?
Related
I have a nested ACF repeater:
section_container (parent repeater)
section_heading (text field) sub_section_container (sub repeater)
sub_section_heading (text field) food_item (sub sub repeater)
item_name (text) item_description (text) price (text)
All of which needs to be wrapped in div Section_01 this will then appear in the first "tab" section contents, with the tab heading taken from the text field "section_heading". Section headings will be things like, Starters / Mains / Sweets / Drinks
If the user adds a row in the back end "section_container" this repeats all of the above, but this needs to be wrapped in a div called Section_02 in order for it to be displayed in the next tab. This is achieved via a counter - as I don't want a pre determined number of sections / rows.
At the moment rather than ALL of the content from parent repeater "section_container" being displayed within a single div, it's taking each single array output and then wrapping that content in a div.
What I get is:
<div class="section_01">
Starter item 1 Start Price 1 Starter Description 1
</div>
<div class="section_02">
Starter item 2 Start Price 2 Starter Description 2
</div>
What I want is:
<div class="section_01">
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2
</div>
<div class="section_02">
Mains item 1 Mains Price 1 Mains Description 1
Mains item 2 Mains Price 2 Mains Description 2
</div>
<?php
/**
* Template part for displaying the food menu
*
* #package GL_Apollo
*/
?>
<script>
function openSection(evt, sectionName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(sectionName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<div class="food-menu-container">
<div class="menu-title"><?php the_field('menu_title'); ?> </div>
<!-- Tab links -->
<div class="food-menu-tab-container">
<div class="tab">
<?php
$counter_tab = 1;
if( have_rows('section_container') ) :
while( have_rows('section_container') ): the_row();
$section_name = array( get_sub_field('section_heading') );
foreach ($section_name as $section_names) {?>
<button class="tablinks" onclick="openSection(event, 'section_0<?php echo $counter_tab; ?>')">
<?php echo $section_names; ?>
</button>
<?php $counter_tab++; // increment before foreach ends
}
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
<!-- Food content -->
<div class="menu-section-container">
<?php
$counter = 1;
// check if the repeater field has rows of data
if( have_rows('section_container') ):
// loop through the rows of data
while ( have_rows('section_container') ) : the_row();
if( have_rows('sub_section_container') ):
// loop through the rows of data
while ( have_rows('sub_section_container') ) : the_row();
$sub_head = get_sub_field('sub_section_heading');
if( have_rows('food_item') ):
// loop through the rows of data
while ( have_rows('food_item') ) : the_row();
$item = get_sub_field('item_name');
$price = get_sub_field('price');
$description = get_sub_field('item_description');
$menu_content = array (
"<div class='sub_head'>$sub_head</div>" . "<div class='item'>$item</div>" . "<div class='price'>$price</div>" . "<div class='description'>$description</div>"
);
foreach ($menu_content as $menu_contents); { ?>
<div id="section_0<?php echo $counter; ?>" class="tabcontent">
<?php echo $menu_contents ; ?>
</div>
<?php $counter++; // increment before foreach ends
}
endwhile;
endif;
endwhile;
endif;
endwhile;
endif;
echo '<pre>';
var_dump( $menu_contents );
echo '</pre>';
?>
</div> <!-- section -->
</div> <!-- menu-section-container -->
<span class="btn" data-glf-cuid="0c1de6b2-1ca9-4202-b790-3cd5a62af2b3" data-glf-ruid="9e6118c3-d144-4511-973e-d7d7f7418e1a" ><?php the_field('order_button'); ?></span>
<script src="https://www.fbgcdn.com/widget/js/ewm2.js" deferasync ></script>
</div> <!-- food-menu-container -->
Forgive me for trying to understand the question however, is it simply the case you're wanting to wrap a div around each food item section rather than each food item?
If this is the case, you can add a div between the if and while statements for the food_item.
<?php $foodItem == 1; ?>
<?php if( have_rows('food_item') ): ?>
<div class="section_<?php echo $foodItem; ?>">
<?php while( have_rows('food_item') ): the_row(); ?>
<?php the_field('item_name'); ?>
<?php the_field('item_description'); ?>
<?php the_field('price'); ?>
<?php $foodItem++; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
This should give you the outcome of:
<div class="section_1">
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2
</div>
<div class="section_2">
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2
</div>
If I have missed something, let me know.
M. Ferguson is correct in what he says, however the tabs section could also do with some cleaning up. Here is the complete cleaned up code. This should work if it does not let me know.
<script>
function openSection(evt, sectionName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(sectionName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<div class="food-menu-container">
<div class="menu-title"><?php the_field('menu_title'); ?> </div>
<!--Menu Tabs-->
<div class="food-menu-tab-container">
<?php $tabNumber = 1;
if( have_rows('section_container') ) :
<div class="tab">
while( have_rows('section_container') ): the_row();
$section_name = get_sub_field('section_heading');?>
<button class="tablinks" onclick="openSection(event, 'section_0<?php echo $tabNumber; ?>')">
<?php echo $section_name; ?>
</button>
<?php $counter_tab++;
endwhile;?>
</div>
<?php endif;?>
</div>
</div>
<div class="menu-section-container">
<!--Food Menu-->
<?php $foodItem = 1; ?>
<?php if( have_rows('food_item') ): ?>
<div class="section_0<?php echo $foodItem; ?> section">
<?php while( have_rows('food_item') ): the_row(); ?>
<!--Add styling: .section .section_inner > div {display:inline-block;}-->
<div class="section_inner_0<?php echo $foodItem; ?> section_inner">
<div class="sub_head"><?php get_sub_field('sub_section_heading');?> </div>
<div class="item"><?php the_field('item_name'); ?> </div>
<div class="price"><?php the_field('item_description'); ?> </div>
<div class="description"><?php the_field('price'); ?></div>
<?php $foodItem++; ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
<span class="btn" data-glf-cuid="0c1de6b2-1ca9-4202-b790-3cd5a62af2b3" data-glf-ruid="9e6118c3-d144-4511-973e-d7d7f7418e1a" ><?php the_field('order_button'); ?></span>
<script src="https://www.fbgcdn.com/widget/js/ewm2.js" deferasync ></script>
Outcome HTML:
<div class="section_01">
<div class="section_inner_01 section_inner">
<div class="sub_head">Starter </div><div class="item">item 1 </div><div class="item_price">Start Price 1 </div><div class="description">Starter Description 1</div>
</div>
<div class="section_inner_01 section_inner">
<div class="sub_head">Starter </div><div class="item">item 2 </div><div class="item_price">Start Price 2 </div><div class="description">Starter Description 2</div>
</div>
</div>
<div class="section_02">
<div class="section_inner_02 section_inner">
<div class="sub_head">Starter </div><div class="item">item 1 </div><div class="item_price">Start Price 1 </div><div class="description">Starter Description 1</div>
</div>
<div class="section_inner_02 section_inner">
<div class="sub_head">Starter </div><div class="item">item 2 </div><div class="item_price">Start Price 2 </div><div class="description">Starter Description 2</div>
</div>
</div>
Outcome Front End:
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2
I have an HTML structure that I need to dynamically output.
I am using a counter within my loop to check for the first post, and applying the class headline-big and m-grid-item for the first post. Then I'm applying the second class headline-scroll for the subsequent posts.
The problem is, the 2nd, 3rd and 4th posts are not being nested inside headline-scroll they are each getting their own div.headline-scroll which is messing up site.
I need the 2nd, 3rd and 4th posts to be nested inside a single div.headline-scroll instead of each one of them being nested under a separate one.
This is the HTML for structure
<!-- / 1ST POST -->
<div class="headline-big">
<div class="m-grid-item">
...
</div>
</div>
<!-- / END OF FIRST POST -->
<!-- / 2ND, 3RD AND 4TH POST - ALL NESTED INSIDE div.headline-scroll -->
<div class="headline-scroll">
<!-- / 2ND POST -->
<div class="m-grid-item -medium">
...
</div>
<!-- / END OF 2ND POST -->
<!-- / 3RD POST -->
<div class="m-grid-item -small">
...
</div>
<!-- / END OF 3RD POST -->
<!-- / 4TH POST -->
<div class="m-grid-item -small">
...
</div>
<!-- / END OF 4TH POST -->
</div>
And this is the PHP
if ( $featured->have_posts() ) {
$i = 0;
while ( $featured->have_posts() ) {
$featured->the_post();
if ( $i == 0 ) :
?>
<div class="headline-big">
<div class="m-grid-item">
<?php endif; ?>
<?php if ( $i != 0 ) : ?>
<div class="headline-scroll">
<div class="m-grid-item -medium">
<?php endif; ?>
<?php the_title(); ?>
</div>
</div>
<?php $i++;
}
} else {
echo 'Add some posts';
}
I'm not sure if I could be able to answer your question well. But this is how I understand. If there is a question, please let me know and I will modify.
if ( $featured->have_posts() ) {
$i = 1;
while ( $featured->have_posts() )
{
$featured->the_post();
if( $i == 1)
{
?>
<div class="headline-big">
<div class="m-grid-item">
<?php the_title(); ?>
</div>
</div>
<div class="headline-scroll">
<?php
}
else
{
$small = array(3,4); //list of small classes
$class = ( in_array($i, $small)) ? '-small' : '-medium';
<div class="m-grid-item <?php echo $class; ?>">
<?php the_title(); ?>
</div>
<?php
}
$i++;
}
echo '</div><!-- end of headline-scroll -->';
} else {
echo 'Add some posts';
}
I've simplified it here with if conditions.
If it's the first post, create the headline-big div.
If it's the second post, create the headline-scroll div and the medium class div.
For all subsequent posts, just use the small div. Finally, outside the while loop, if we had more than 1 post, we need to add a closing div to close off the headline scroll.
if ( $featured->have_posts() ) {
$i = 0;
while ( $featured->have_posts() )
{
$featured->the_post();
if( $i == 0)
{
?>
<div class="headline-big">
<div class="m-grid-item">
<?php the_title(); ?>
</div>
</div>
<?php
}
else if($i == 1)
{
?>
<div class="headline-scroll">
<div class="m-grid-item -medium">
<?php the_title(); ?>
</div>
<?php
}
else
{
<div class="m-grid-item -small">
<?php the_title(); ?>
</div>
}
$i++;
}
if($i > 1){
?>
</div><!-- end of headline-scroll -->
<?php
}
} else {
echo 'Add some posts';
}
You never closed many of your DIV tags, and you were opening your div.headline-scroll inside a loop, so you were bound to get more than one. Try this instead maybe? Consistent indent and minimal PHP in your HTML will make things easier to debug, though you're hamstrung by Wordpress' awful functions.
<?php if (!$featured->have_posts()):?>
<p>Add some posts!</p>
<?php else: $i = 0; while ($featured->have_posts()): $featured->the_post();?>
<?php if (!$i):?>
<div class="headline-big">
<div class="m-grid-item">
<?php the_title(); ?>
</div>
</div>
<div class="headline-scroll">
<?php else:?>
<div class="m-grid-item -medium">
<?php endif; ?>
<?php the_title(); ?>
</div>
<?php $i++; endwhile;?>
</div>
<?php endif?>
I am building a wordpress site using bootstrap, and I want to create a featured work section on my homepage using masonry to display the thumbnails and titles of my 3 most recent portfolio items.
I would like the portfolio items to be placed in a seemingly random fashion (similar to this: http://studiosweep.com/) rather than just an orderly grid format. I can't figure out how to assign different widths to my portfolio items because they're just being generated in the featured work section via wordpress loop.
Here's my HTML:
<section id="work">
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-6 col-sm-6 text-center">
<h1>Featured Work</h1>
</div>
</div>
<div class="row" id="ms-container">
<?php query_posts('posts_per_page=3&post_type=work'); ?>
<?php while ( have_posts() ) : the_post();
$thumbnail = get_field('thumbnail');
$medium = get_field('medium');
$size = "large";
?>
<div class="ms-item col-lg-6 col-md-6 col-sm-6 col-xs-12">
<figure>
<?php echo wp_get_attachment_image($thumbnail, $size); ?>
</figure>
<h3><?php the_title(); ?></h3>
<div class="clearfix"></div>
</div>
<?php endwhile; // end of the loop. ?>
<?php wp_reset_query();
</div>
<div class="clearfix"></div>
</div>
</section>
Here's the script:
<script type="text/javascript">
jQuery(window).load(function() {
// MASSONRY Without jquery
var container = document.querySelector('#ms-container');
var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',
});
});
</script>
As for CSS, I don't really know how to go about assigning the different column widths, so I only have this so far:
.ms-item {
width: 38.23%;
margin-right: 80px;
margin-bottom: 70px;
}
Any help would be appreciated!
Let's say you have 3 different classes for column widths:
.ms-item-width-1, .ms-item-width-2, .ms-item-width-3
A possible solution is to add those 3 classes to your css file and randomly assign one of your classes to your container after .ms-item class. Masonry will give the width of the last class you added to that container. For example:
<div class="ms-item <?php echo 'ms-item-width-' . (rand(0, 3) + 1); ?> col-lg-6 col-md-6 col-sm-6 col-xs-12">
<figure>
<?php echo wp_get_attachment_image($thumbnail, $size); ?>
</figure>
Update: To have a randomized without getting repeated values you could have an array $widths = array(1,2,3); and then shuffle this array shuffle($widths); and instead of calling the random function you would be removing the elements of the array and replace it with the following code:
<div class="ms-item <?php echo 'ms-item-width-' . array_shift($widths); ?> col-lg-6 col-md-6 col-sm-6 col-xs-12">
This will provide an unique width to this 3 items.
I have this html code:
<div class="row elem2">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row elem4">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row elem3">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
and I am looking for a way to implement it in my php while (wordpress).
The while is as
while ( have_posts() ) : the_post();
echo '<div class="item"></div>';
endwhile;
I've tried a lot of stuff, but none have worked. I need to divide every 2 items and put them in a wrap <div class="row elem2"> after that the next 4 items in <div class="row elem4"> and after that the next 3 items in <div class="row elem3">
I did a lot of searching, but I am not even sure what to search for.
A little crude but here's one solution
$i = 0; // Number of items made so far in the row
$mode = 0; // Current row type enumerated by $elem
$elem = array(2,4,3); // Enumeration of the desired row sizes
while ( have_posts() ) : the_post();
// Make a new row when there's no items yet
if ($i == 0) echo '<div class="row elem'. $elem[$mode] .'">';
echo '<div class="item"></div>';
$i++;
// Once the items in the current row has reached the row's maximum size
if ($i % $elem[$mode] == 0):
echo '</div>';
$i = 0; // Reset items made for the row back to 0
$mode = ($mode + 1) % 3; // Increment mode and wrap if necessary
endif;
endwhile;
if ($i > 0) echo '</div>'; // Finish the last row if it wasn't finished
This is what the modulos was built for!
Project: WordPress project
Query: WP_Query()
With the single query I'm dealing with two loops - I call it loop within a loop. Structure is like below:
<?php
while( $my_query -> have_posts() ) :
$my_query -> the_post();
if( condition) { ?>
<div class="grid-box">
<div class="item">Item of this kind</div>
</div> <!-- .grid-box -->
<?php
}
if( condition) {
$someCounter = grab some counter here;
for( $inner = 0; $inner < $someCounter; $inner ++ ) {
?>
<div class="grid-box">
<div class="item">Item of that** kind#<?php echo $inner; ?></div>
</div> <!-- .grid-box -->
<?php
} //end for
}
endwhile;
?>
With CSS the query is doing excellent job for me, showing the items in nice grid-blocks. But with more items than a row, the items in second row colliding with the first. So I planned to put them within row class like:
<div class="row">
<!-- every 6 items within a grid -->
<div class="grid grid-first>Item of this kind</div>
<div class="grid>Item of this kind</div>
<div class="grid>Item of that** kind</div>
<div class="grid>Item of that** kind</div>
<div class="grid>Item of this kind</div>
<div class="grid grid-last>Item of that** kind</div>
</div>
<div class="row">
<div class="grid grid-first>Item of that** kind</div>
<div class="grid>Item of that** kind</div>
<div class="grid>Item of this kind</div>
</div>
Now I need to count the total items. How can I do this? Do I need to pass two counter and if so then how can I combine them both to count the exact counts and then use the count as conditions to load the div with .row? Please note as what I'm dealing with, the $inner counter is important for my dynamic code. But we can use the count for our total count.
For count you can use like this
<?php wp_count_posts( $type, $perm ); ?>
To get the published status type, you would call the wp_count_posts() function and then access the 'publish' property.
<?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
?>
Counting pages status types are done in the same way as posts and make use of the first parameter. Finding the number of posts for the post status is done the same way as for posts.
<?php
$count_pages = wp_count_posts('page');
?>