Wordpress: help with posts_nav_link() - wordpress-theming

I have a page with many items pulled from posts.
I have it set up to only display 10 posts at a time, but my previous/next button isn't actually displaying the next or previous posts - it justs keeps displaying the same posts.
Here's the function I wrote:
function add_shop() {
if (is_page('shop') || is_page('7')) { ?>
<div id="content">
<div class="post_box">
<div id="column_1">
<div id="shop_wrapper">
<?php query_posts('tag=shop&orderby=title&order=ASC&posts_per_page=10');
if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="shop_item"> <img src="<?php getCustomField('shop_thumbnail_image'); ?>" alt='photo of <?php getCustomField('title'); ?>' class="shop_thumb" />
<div class="shop_content">
<h4><a href="<?php getCustomField('link_to_project_page'); ?>">
<?php getCustomField('title'); ?>
</a></h4>
<?php getCustomField('duration'); ?>
<?php getCustomField('paypal_code'); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php posts_nav_link(); ?>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
</div>
<div id="sidebars">
<div id="sidebar_1" class="sidebar">
<ul class="sidebar_list">
<li class="widget">
<div class="widget_box">
<?php dynamic_sidebar(5); ?>
</div>
</li>
</ul>
</div>
</div>
<?php } }

Based on the above help, I just just got it working with this:
<?php $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
if ($page == 1) {
query_posts('tag=shop&orderby=title&order=ASC&posts_per_page=10&paged=$page');
} else {
$numposts = get_option('posts_per_page');
// work out offset
$offset = (($page -1) * $numposts); // i.e. page 2 - 1 = 1 * 10 (10 for the number of posts)
query_posts("tag=shop&orderby=title&order=ASC&offset=$offset&paged=$page&showposts=$numposts");
}
if (have_posts()) : ?>

You're manually calling query_posts(), which will overwrite any variables related to fetching posts that wordpress tries to send itself. If you want to keep the query string that it's already sending, you should concatenate to it instead of replacing it:
query_posts($query_string.'&tag=shop&orderby=title&order=ASC&posts_per_page=10');
Alternatively, if you only want to include the "page" variable, include it with $paged:
query_posts('tag=shop&orderby=title&order=ASC&posts_per_page=10&paged='.$paged);

Related

Wordpress only first post different design

I have a blog(offline making) and I have Made a wordpress loop it checks if the First post it it uses different style and rest of other posts uses different.
Problem is: It works fine but when I go to next page(2) it shows again, I only want to apply for only First latest post. Not for First post on every page.
Code:
<?php
while ( have_posts() ) : the_post();?>
<?php $count++; ?>
<?php if ($count == 1 && is_home()) :
//First post different style goes here
<?php else : ?>
//Rest Other post different style goes here
<?php endif; ?>
<?php
endwhile;
?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->
<div class="page_content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</article><!-- #post-0 -->
<?php endif; ?>
You should use get_query_var('paged'). It will return the current page number, starting from 0.
So you should add
<?php if ($count == 1 && is_home() && get_query_var('paged') == 0 ) : ?>
//First post different style goes here
<?php else : ?>
//Rest Other post different style goes here
<?php endif; ?>
Add this to your function.php to change the number of posts
add_filter( 'pre_get_posts', 'custom_pre_get_posts' );
function custom_pre_get_posts($query) {
if ( is_home() && get_query_var( 'paged' ) > 0 ) {
$query->set('posts_per_page', 12);
}
return $query;
}

Wordpress post grid last posts

how can i create a grid like image? for show last posts
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $latest_post = get_posts( 'numberposts=4' ); ?>
<?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?>
<?php the_title(); ?><br />
<?php the_content(); ?>
<?php endforeach; ?>
<?php wp_reset_query(); ?>
One option is to use PHP to swap around the position of the image based on whether or not the increment is odd or even, for instance:
$i = 0;
while ( have_posts() ) : the_post();
if ($i % 2 == 0 ) {
// Display two columns with image on left
}
else {
// Display two columns with image on right
}
$i++;
endwhile;
If you're building your theme from scratch I'd suggest using a grid framework to handle your columns, otherwise see if the theme you're using has a grid framework already.
Edit:
There are also ways of doing this without actually having to change the markup of the page. For instance:
Swapping columns (left / right) on alternate rows
In this case you'd be able to generate your post markup without the if statement and just use CSS to swap the position of the image/video.
You can use the masonry technology or you can try this plugin
In your code above you fired two WordPress content loops. I am not sure why you had to fire two loops, although they both will work. First will print the recent posts depending on the number of Posts Per Page you selected via Settings->Reading tab from your WordPress Dashboard and the second one will again print the top 4 recent posts. I am using the first loop to tell you how you can create the attached image like grid.
Below is the PHP/HTML modifications that you have to make:
<?php $count = 1; if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="one-half <?php if( $count++ % 2 == 0 ): echo 'last-col'; endif; ?>">
<?php
// the function below will print the featured image attached to the post
the_post_thumbnail( 'your-featured-image-sizename' ); ?>
</div>
<!-- one-half -->
<div class="one-half">
<span class="post_stamp"><?php the_time( 'j m Y' ); ?></span>
<span class="post_cat"><?php the_category(', '); // This will print News if you filled the post under News Category ?></span>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); // Insteading of printing the whole content this function will print exceprt only ?>
</div>
<!-- one-half -->
<div class="clearfix"><!-- --></div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
You would have to put the below given links to your style file:
<style>
.one-half{width: 50%; float: left;}
.last-col{float: right;}
.clearfix{clear: both; overflow: hidden;}
</style>
After making the above changes your posts will be displayed as the attached image. Good Luck (y)

Advanced custom fields repeater / jcycle: unwanted random order

on my portfolio i have some projects (for example http://mathieuserruys.be/art-cinema-offoff-voorjaar-2015/ ). These images are called via a ACF Repeater field, and they are put into a jcycle 2 gallery.
this is the code i use:
<div class="info" style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'><span id="prev">< prev</span><br>
<span id="next">next ></span><span><?php the_post(); ?><?php the_content(); ?></span></div>
<div class="slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-cycle-center-horz=true
data-cycle-center-vert=true
data-cycle-next="img, #next"
data-cycle-prev="#prev"
data-cycle-swipe=true
data-cycle-loader="true"
data-cycle-manual-speed="1"
data-cycle-caption-template="{{slideNum}}/{{slideCount}}"
>
<div class="cycle-caption"></div>
<?php if( have_rows('images_repeat') ): ?>
<?php while( have_rows('images_repeat') ): the_row();
// vars
$image = get_sub_field('image_repeat');
?>
<img src="<?php echo $image['url']; ?>"/>
<?php endwhile; ?>
<?php endif; ?>
</div>
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
I've noticed that on first load the images appear in random order. and after that, sometimes they are right, sometimes they are not. I guess it has something to do with the Jcycle loading conflicting with how the repeater works.. any tips on this?
The jquery.cycle2.js is called after the jquery.cycle2.carousel.js and jquery.cycle2.tile.js
jquery.cycle2.js has to be available before these 2 scripts.

how to modify the wordpress main loop?

i have a single page website built on wordpress (twenty-thirteen-child template).
header content footer.
and 3 posts categories :category A category B category C.
i need to split the content into these 3 categories/sections -like this
<div class="section_top">
all the posts from category A
</div>
<div class="section_mid">
all the posts from category B
</div>
<div class="section_bot">
all the posts from category C
</div>
i got a little confused when i started to read about the wordpress main loop ,query_posts and WP_Query,eventually i have this code replacing the main loop ,so my questions are :
1 is this the correct way to do it?
2 how to give each section a unique class since i need to style each section diffrently?
here is the code (index php(in child theme)
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
$args = array('category__in' => array(catA,catB,catC));
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<div id="<?php
foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>"
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>
</div>
<div class="post-content">
<?php the_content(); ?>
</div>
</div>
<?php
endwhile;
else:
?>
Oops, there are no posts.
<?php
endif;
?>
The problem with how you're trying to solve it is that all posts are still shown chronologically, so this could happen:
Category A post 12/01
Category B post 09/01
Category A post 05/01
What I'd recommend: make 3 different WordPress loops querying each category separately like so:
<div class="section_top">
WordPress loop for all the posts from category A
</div>
<div class="section_mid">
WordPress loop for all the posts from category B
</div>
<div class="section_bot">
WordPress loop for all the posts from category C
</div>
Example of such a loop:
// The Query
$the_query = new WP_Query('category_name=categoryA');
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
Difference between get_the_...() and the_...()
When you use functions like get_the_title() you are able to store them in a PHP variable like so:
$title = get_the_title();
echo strtoupper($title); //do something with it later
When you use functions like the_title() then the title is immediately printed on the page, so there's no need for an echo statement:
the_title();
Notice: the_permalink() has a function get_permalink(), the function get_the_permalink() does not exist. Don't ask my why ;)

How to wrap every 3 div's contents in a div?

I need every three divs of class "loopcontent" to be wrapped in a new div of class "threeacross". I'm new to WordPress and really not a PHP guy yet, but I'm learning as I go.
Here's my loop:
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="loopcontent">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
// the current post lacks a thumbnail
}
?>
<h1><?php the_title(); ?></h1>
<?php the_excerpt(); ?>
</div>
<?php endwhile; else : ?>
<div class="loopcontent">
<h1>Page Not Found</h1>
<p>Looks like the page you're looking for isn't here anymore. Try browsing the categories, archives, or using the search box below.</p>
<?php include(TEMPLATEPATH.'/searhform.php'); ?>
</div>
<?php endif; ?>
Something like this should work. This keeps a running count and places your div wraps every three posts. Let me know if this helps. If not, let me know what it's outputting, and I can tweak it:
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
$open = !($count%3) ? '<div class="threeacross">' : ''; //Create open wrapper if count is divisible by 3
$close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
echo $close.$open;
?>
<div class="loopcontent">
<?php
if(has_post_thumbnail()) the_post_thumbnail();
else{
// the current post lacks a thumbnail
}
?>
<h1><?php the_title(); ?></h1>
<?php the_excerpt(); ?>
</div>
<?php endfor; else : ?>
<div class="loopcontent">
<h1>Page Not Found</h1>
<p>Looks like the page you're looking for isn't here anymore. Try browsing the categories, archives, or using the search box below.</p>
<?php include(TEMPLATEPATH.'/searhform.php'); ?>
</div>
<?php endif; ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>