WordPress query posts into two Divs - wordpress

I want to display my wordpress posts in a category in two divs. So for example:
<ul id="left">
<li class="post">POST 1</li>
<li class="post">POST 3</li>
<li class="post">POST 5</li>
<li class="post">POST 7</li>
</ul>
<ul id="right">
<li class="post">POST 2</li>
<li class="post">POST 4</li>
<li class="post">POST 6</li>
<li class="post">POST 8</li>
</ul>
So want I need to do is tell the query_posts to somehow start spitting out the first 4 posts oddly and then evenly for each div. I don't want to have two seperate WP_Queries as this is a category.php file and needs to have the default loop. Not quite sure how to do this.
Any help much appreciated.

I have not test this before, this is not the best way but a solution
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$count++;
if( $count % 2 ) {
$left_array[] = array( 'content' => get_the_content('more...') );
}
else {
$right_array[] = array( 'content' => get_the_content('more...') );
}
?>
<?php endwhile; ?>
<ul id="left">
<?php
foreach( $left_array as $post ) {
echo '<li class="post">'.$post['content'].'</li>';
}
?>
</ul>
<ul id="right">
<?php
foreach( $right_array as $post ) {
echo '<li class="post">'.$post['content'].'</li>';
}
?>
</ul>
<?php else : ?>
<?php endif; ?>
or the same idea, but another way:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<ul id="left">
<?php
$count++;
if( $count % 2 ) {
}
else {
?>
<li class="post"><?php the_content('more...'); ?></li>
<?php
}
?>
</ul>
<ul id="right">
<?php
$count++;
if( $count % 2 ) {
?>
<li class="post"><?php the_content('more...'); ?></li>
<?php
}
?>
</ul>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

How about preconstructing the two lists: (I can't recall the WP query syntax, so it's pseudo-PHP:)
<?php
$list1 = array();
$list2 = array();
$i=0;
foreach($query_results as $res) {
if(($i++)&1) $list2[] = $res;
else $list1[] = $res;
}
?>
Now list1 contains the first, third, ... item and list2 contains the second, fourth, ...
You can then print them in the two divs as you wish.
(On a tangent: Does PHP have any succinct way to do what the above code does? Python has the stepped slicing syntax...)

If your goal is to have a two-column list of posts, it would be much easier to just output the posts in one list, and then use CSS to give the visual appearance of two columns using float, for instance:
width: 50%;
float: left;

Related

Display "accordion" when there are more than 6 posts in a category

On my project I am displaying posts by category.
I have a "summary-section" and a "detail-section". The "detail-section" opens with a click on an "more-less-button" with a javascript-function.
The goal I don't achieve is, that i only want to display the button, if there are more than 6 blog-posts in the category.
Can anybody help me in programming an if/else statement or is there a much easier way?
<div class="slide">
<div class="summary">
<?php $catquery = new WP_Query( 'cat=5&posts_per_page=6' ); ?>
<ul>
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<article>
<li><?php the_title(); ?></li>
</article>
<?php endwhile;
wp_reset_postdata();
?>
</ul>
</div>
<div class="details">
<?php $catquery = new WP_Query( 'cat=5&posts_per_page=6&offset=6' ); ?>
<ul>
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<article>
<li><?php the_title(); ?></li>
</article>
<?php endwhile;
wp_reset_postdata();
?>
</ul>
</div><!-- end .details -->
<a class="more-less-button-d" href="#" title="mehr Referenzen zur Ingenieurgeologie">mehr
<span class='ti-arrow-down'></span>
</a>
</div>
You would have to query to get the number of posts within that category first. Assuming post type is post.
<?php
$args = array(
'cat' => 5,
'post_type' => 'post'
);
$query = new WP_Query($args);
$totalPost = $query->found_posts;
?>
This would get you the total number of posts within that category.
So then you could do this
<?php if ($totalPost > 6) : ?>
<a class="more-less-button-d" href="#" title="mehr Referenzen zur Ingenieurgeologie">mehr<span class='ti-arrow-down'></span></a>
<?php endif; ?>

Give class to list item if item has submenu in custom menu structure

I'm making a custom structure for my main menu in my first Wordpress theme. This is my code so far:
<ul class="nav navbar-nav">
<?php
$count = 0;
$submenu = false;
foreach( $menuitems as $item ):
$link = $item->url;
$title = $item->title;
// item does not have a parent so menu_item_parent equals 0 (false)
if ( !$item->menu_item_parent ):
// save this id for later comparison with sub-menu items
$parent_id = $item->ID;
?>
<li>
<a href="<?php echo $link; ?>">
<?php echo $title; ?>
</a>
<?php endif; ?>
<?php if ( $parent_id == $item->menu_item_parent ): ?>
<?php if ( !$submenu ): $submenu = true; ?>
<ul class="dropdown-menu">
<?php endif; ?>
<li>
<a href="<?php echo $link; ?>" ><?php echo $title; ?></i></a>
</li>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
</ul>
<?php $submenu = false; endif; ?>
<?php endif; ?>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
</li>
<?php $submenu = false; endif; ?>
<?php $count++; endforeach; ?>
</ul>
Currently it generates the menu I want, except for a specific class I want my submenu parents to have.
Foreach list item that includes a submenu, I want it to have the class "hasSubmenu". How do I make this work?
Why don't you use the same code that you used to add the submenu to add the class to the submenu parent? This is the code that's doing that:
<?php if ( !$submenu ): $submenu = true; ?>
<ul class="dropdown-menu">
<?php endif; ?>
So add something like this to your li item...
<li class="
<?php if ( !$submenu ): $submenu = true; ?>
<?php echo "hasSubmenu"; ?>
<?php endif; ?>
">
Hope that helps!

Get permalink to page?

I know this is going to be simple but I can't work it out.
I want to create a nav in the footer listing each page and it's child pages.
It will look something like this
<ul>
<li>Parent</li>
<li>Child One</li>
<li>Child Two</li>
<li>Child Three</li>
</ul>
I'm using this code to do it.
<div id="footerLinks">
<?php
$args = array(
'sort_column' => 'menu_order',
'parent' => 0,
);
$pages = get_pages($args);
foreach($pages as $page){
?>
<ul>
<li>
<?php echo $page->post_title;?>
</li>
<?php
wp_list_pages('title_li=&depth=1&child_of='.$page->ID.'');
?>
</ul>
<?php
}
?>
</div>
My problem is getting the permalink to the parent page.
<?php echo $page->post_title;?>
How do I get the permalink in this situation?
Maybe you can do something like this:
<? echo get_permalink($page->post_parent); ?>

Wordpress Query - The Loop changing CSS for a div

I have built a WP Loop that is limited to "2" articles that it loads. What I'd like to do is the second article in the loop or the bottom one, Not have a border-bottom on it.
How can I do this in the WP Loop?
My PHP Code is :
<div class="span content"> <!-- This is column 1 -->
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<p class=""<?php the_content(); ?>
<?php endwhile; ?>
</div><!-- /.span8 .content -->
CSS for that is :
.article {
border-bottom: 1px dotted #000000;
width: 170px;
}
Thanks
Just do it with simple CSS. Should work down to IE7.
.article {
width: 170px;
}
.article:first-child {
border-bottom: 1px dotted #000000;
}
Note: The :first-child implemtation in IE7 is a bit buggy if your first-child is a text-node like a comment.
:first-child will match Item 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
:first-child does not match Item 1 because the comment.
<ul>
<!-- Comment -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
Workarround
<ul><!-- Comment --><li>Item 1</li>
<li>Item 2</li>
</ul>
or just strip the comment.
You could also count your iteration in the while-loop. Thats not an elegant Method but should work for you...
<?php
//Set Counter to 0
$counter = 0;
// Start Loop
if ( have_posts() ) while ( have_posts() ) : the_post();
// Increment Coounter
$counter++;
?>
<div class="span content item-<?php echo $counter; ?>">
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</div><!-- /.span8 .content -->
<?php endwhile; ?>
Each iteration of your WP-Loop will increment the $counter by 1.
First Iteration:
<div class="span content item-1">
Second Iteration:
<div class="span content item-2">
Third Iteration:
<div class="span content item-3">
... and so on.

CSS positioning help

http://rent.neighborrow.com/items/herndon need help moving the need have tabs to the right
<div id="tabs" style="width:350px;height:50px;">
<ul style="width:320px;height:35px;">
<li>USERS Have</li>
<li>USERS Want</li>
</ul>
<div id="tabs-1" style="width:350px;height:50px;"">
<ul class="user_have_list" style="width:350px;height:50px;">
<?php if(count($approved_items)): ?>
<?php foreach($approved_items as $item): ?>
<?
//print_r($item);
?>
<li style="width:330px"><?= $html->link($item["items"]["item"], array("controller" => "items", "action" => "view", $item["items"]["id"])); ?></li>
<?php endforeach; ?>
<?php else: ?>
<li style="width:330px">Nothing Here</li>
<?php endif; ?>
</ul>
</div>
<div id="tabs-2" style="width:350px;height:50px;"">
<ul class="user_want_list">
<?php
//if($_SESSION[Auth][User][id]!="")
if(1==1)
{
if(count($requests)): ?>
<?php foreach($requests as $request): ?>
<li style="width:330px"><?= $html->link($request["Request"]["item"], array("controller" => "requests", "action" => "view", $request["Request"]["id"])); ?></li>
<?php endforeach; ?>
<?php else: ?>
<li style="width:330px">Nothing</li>
<?php endif; } ?>
</ul>
</div>
</div>
using firebug, I added float:right; inside the div='tabs'.is this what you want?
<div id="tabs" style="width:350px;height:50px;float:right;">

Resources