Andrew Spackman
asked on
Custom Wordpress Loop
Hi,
I am trying to create a custom loop with multiple count queries so it will behave as follows
1) Open div loop container
2) Start Loop
3) Open title div container
4) Count out 4 post titles
5) Close title div container
6) Open description div container
7) Count out 4 post descriptions
8) Close description div container
9) End loop
10) Close loop container
Really struggling with this one. Hope it makes sense
Many Thanks,
Andrew
I am trying to create a custom loop with multiple count queries so it will behave as follows
1) Open div loop container
2) Start Loop
3) Open title div container
4) Count out 4 post titles
5) Close title div container
6) Open description div container
7) Count out 4 post descriptions
8) Close description div container
9) End loop
10) Close loop container
Really struggling with this one. Hope it makes sense
Many Thanks,
Andrew
ASKER
ASKER
I've tried this but receiving syntax error?
<?php if ( have_posts() ) : ?>
<?php // get the number of posts
if(!isset($wp_query)){
global $wp_query;
}
$count = $wp_query->post_count;
?>
<?php while ( have_posts() ) : the_post(); ?>
<?php // current post index
$index = $wp_query->current_post +1; // add 1 for proper modulus
// start the wrapper
if($index %4 == 1) {
echo '<div style="border:1px solid black; padding: 10px 0px;margin: 10px 0px;"><div style="border:1px solid red; class="icons">';
}
// inner wrapper float
$float = "left";
if(($index+1) % 4 == 0){
$float = "right";
}
// display 4 post titles
echo '<p>' .the_title() . '</p>';
// close outer wrapper - account for number of items not divisible by 4
if($index % 4 == 0 || $index == $count){ // end a row
echo '<br style = "clear:both;" />';
echo '</div>';
$index = $wp_query->current_post +1; // add 1 for proper modulus
// start the wrapper
if($index %4 == 1) {
echo '<div style="border:1px solid black; padding: 10px 0px;margin: 10px 0px;"><div style="border:1px solid red; class="icons">';
}
// inner wrapper float
$float = "left";
if(($index+1) % 4 == 0){
$float = "right";
}
// display 4 post descriptions
echo '<p>' .the_content() . '</p>';
// close outer wrapper - account for number of items not divisible by 4
if($index % 4 == 0 || $index == $count){ // end a row
echo '<br style = "clear:both;" />';
echo '</div>';
?>
<?php endwhile;?>
ASKER
Ok so the syntax error was my fault, amended the last bit to...
....echo '<br style = "clear:both;" />';
echo '</div>';
}}?>......
Now when I view the page im only getting one description, the titles work fine. I think its the count that im having trouble with
....echo '<br style = "clear:both;" />';
echo '</div>';
}}?>......
Now when I view the page im only getting one description, the titles work fine. I think its the count that im having trouble with
The question about boxes in a row - as per your diagram is a function of your html and styling - if you are using something like Bootstrap it is very easy to do - if you are using your own framework you can copy what Bootstrap does.
The loop logic remains the same.
I suggest you create a mockup of the page with 4 titles and descriptions - and put dummy content in the various fields - once you have it looking the way you want it to - bring it into the loop
To be able to do the 4 4 4 layout as per your docs - simply add an if statement in the loop to check if you have done more than 4 and then simply stop appending to title and description and start appending to a secondary title variable which is output after the description.
The loop logic remains the same.
I suggest you create a mockup of the page with 4 titles and descriptions - and put dummy content in the various fields - once you have it looking the way you want it to - bring it into the loop
To be able to do the 4 4 4 layout as per your docs - simply add an if statement in the loop to check if you have done more than 4 and then simply stop appending to title and description and start appending to a secondary title variable which is output after the description.
ASKER
I'm not very good at this sort of thing, wouldn't it be ok just to process a single loop and save title content to one variable and the description content to another variable, echo both vars, then start the next four items.
Unfortunately my deadline in close of business today so im really up against it. How much would it cost for a gig?
Unfortunately my deadline in close of business today so im really up against it. How much would it cost for a gig?
then start the next four items.Of course.
Gig - that is up to individual experts - I am thinking an hour or so should cover it.
ASKER
Thats what I tried in my last bit of code I sent you, but its only displays the 4 titles then the last description.
http://www.mabwealthmanagement.co.uk/service-category/services/
http://www.mabwealthmanagement.co.uk/service-category/services/
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi, thanks for that. I used the script below in the end to try and get it working. I have progressed but there are still issues with the post thumbnail and it seems to toggle all descriptions below not the one thats relevant to that poat ID
Here is my jQuery
<?php if ( have_posts() ) : ?>
<?php // get the number of posts
if(!isset($wp_query)){
global $wp_query;
}
$count = $wp_query->post_count;
$titles = NULL;
$descriptions = NULL;
$id = get_the_ID();
?>
<?php while ( have_posts() ) : the_post(); ?>
<?php // current post index
$index = $wp_query->current_post; // add 1 for proper modulus
$titles[$index] = get_the_title();
$descriptions[$index] = get_the_excerpt();?>
<?php endwhile; ?>
<div id="main-wrapper" style="">
<?php // output the boxes
$desc = '';
for($x=0;$x<=$index; $x++){
if($x+1==1 || ($x)%4 ==0){
echo '<div id="service-row" class="team-row clearfix" style="border:1px solid blue; margin:10px 0px;">';
}
echo '<div id="post-'.$id.'" class="tg-services-col" style="border:1px solid yellow; width:24%; float:left; margin:10px 0px;">';
echo '<div class="team-image">';
echo '<div class="bio-toggle bio-button post-'.$id.'">';
echo '<a href="javascript:void(0)" class="bio-toggle services bio_inner post-'.$id.'" id="'.$id.'">'.$titles[$x].'</a>';
echo '</div>';
echo get_the_post_thumbnail( $id, 'thumbnail', array( 'class' => 'services-thumb' ) );
echo '</div>';
echo '</div>';
echo '</div>';
$desc .= '<section id="tab-'.$id.'" class="bio post-'.$id.' tab-content" style="border:1px solid cyan"> desciption' . $descriptions[$x] . '</section>';
if(($x> 1 && ($x+1)%4 == 0) || $x==$index){
echo '<br style="clear:both;">';
echo '<div id="desc-wrapper" style="border:1px solid green">' . $desc .'</div>';
echo '</div>';
$desc = '';
}
// close title wrapper
}?>
</div>
<?php else: ?>
<p>Sorry, no posts to list</p>
<?php endif; ?>
Here is my jQuery
<script>
$(function(){
var $allItems = $(".team-row section.bio");
$( ".bio-button a, .bio_close" ).click(function() {
var id = this.id, itemId = ".bio.post-" + id;
$allItems.not($(itemId).slideToggle('slow')).hide();
});
});
</script>
How you solve this depends on the behaviour you want - if opening one closes all others then separate those out.
Also give your <section class="bio ..."> an id like <section id="post_<?php echo $id'?>"
That way you can access it directly.
Assumes you want only one to show at a time - however this might make for a jumpy display.
Also give your <section class="bio ..."> an id like <section id="post_<?php echo $id'?>"
That way you can access it directly.
Assumes you want only one to show at a time - however this might make for a jumpy display.
$('.bio-button a').click(function() {
var id = '#post_' + this.id;
$(".team-row section.bio").slideUp();
$(id).slideDown();
});
Post back with the effect you want to achieve.
ASKER
I want it so if you toggle estate planning, then just the description for that appears underneath, not all of them.
ASKER
Like they do on here http://www.lifetime.co.uk/wealth/
ASKER
You can see what Im trying to achieve here http://www.mabwealthmanagement.co.uk/service-category/services/ the top one is my new layout and the bottom one is how I want it to look and behave
Does this come close to what you are looking for http://www.marcorpsa.com/ee/t2161.html
ASKER
That's exactly how I want it to behave.
ASKER
Although it doesnt seem to work for me :/
There are several things wrong with the script
1. Your id's don't seem to be changing - they are all set to the same value
2. I have modified your script for your page
1. Your id's don't seem to be changing - they are all set to the same value
2. I have modified your script for your page
$(function() {
// your <a> is a child of .bio-toggle
$('.bio-toggle a').click(function() {
// You are using id not data-id
var id = '#post_' + this.id;
$(".team-row section.bio").slideUp();
$(id).slideDown();
});
});
ASKER
That might be why its toggling all of them and the featured thumbnail is all the same. Why is it not adding in the post ID correctly do you think
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ive put it here
<?php while ( have_posts() ) : the_post(); ?>
<?php // current post index
$index = $wp_query->current_post; // add 1 for proper modulus
$id = get_the_ID();
$titles[$index] = get_the_title();
$descriptions[$index] = get_the_excerpt();?>
<?php endwhile; ?>
Is that right, because it still doesn't work
<?php while ( have_posts() ) : the_post(); ?>
<?php // current post index
$index = $wp_query->current_post; // add 1 for proper modulus
$id = get_the_ID();
$titles[$index] = get_the_title();
$descriptions[$index] = get_the_excerpt();?>
<?php endwhile; ?>
Is that right, because it still doesn't work
ASKER
I even changed it to $id[$index] as it works with the titles and descriptions
Alternative build up the title html and the description html in variables and then output them
Modify to suit your formatting requirements
Open in new window