I needed my pagination for Wordpress to be AJAX-powered. So when a visitor clicks "older entries", the page does not have be reloaded to show older posts.
I've serched and found a solution here. But the problem is, it loads the same post everytime.
Here is my query:
<ul class="recipe-list">
<?php
$home_rcp = $redux_imd['home_rcp'];
$rcpquery = new WP_Query(array(
'cat'=> $home_rcp,
'posts_per_page' => 4
));
while ($rcpquery->have_posts()) : $rcpquery->the_post();
?>
<li>
<?php the_post_thumbnail('recipe-thumb'); ?>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div class="post-title">
<h5><?php the_title() ?></h5>
</div>
<div class="recipe-home-meta">
<p>Posted on
<?php the_time('Y/m/d'); ?> By
<?php the_author(); ?>
</p>
</div>
<a href="<?php the_permalink() ?>" rel="bookmark">
SEE THIS RECIPE
</a>
</div>
</div>
</li>
<?php endwhile; ?>
<div id="pagination">
<?php next_posts_link( '« Older Entries', $rcpquery->max_num_pages) ?>
<?php previous_posts_link( 'Newer Entries »') ?>
</div>
</ul>
And here is my AJAX-code:
$('.recipe-list').on('click', '#pagination a', function (e) {
e.preventDefault();
var link = $(this).attr('href');
$('.recipe-list').fadeOut(500, function () {
$(this).load(link + ' .recipe-list', function () {
$(this).fadeIn(500);
});
});
});
what I'm doing wrong here?
$ redux_imd in your first line of PHP-code will definately throw an error. And thus you won't receive another page.
As per the wordpress code snippet you added, seems like you are always loading first 4 items it should be next 4 item every time you click on next page till last page.
Get the page number from the url and try some thing like
$wp_query->query('posts_per_page=10'.'&paged='.$paged)
basically you have to add another parameter in your wp_query as
paged => $paged;
Also instead of using some one's code you can write your own wordpress pagination. If you are not capable of doing so you can use number of plugins available in wordpress to achieve it.
Hope This will help you.
Related
I'm using the following code to display recent posts from a specific category on the homepage of my WordPress website.
<div class="frontleft">
<div id="four-columns" class="grid-container" style="display:block;">
<?php $catquery = new WP_Query( 'cat=3&posts_per_page=24' ); ?>
<ul class="rig columns-4">
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</a>
<h3>
<?php the_title(); ?>
</h3>
</li>
<?php endwhile; ?>
</ul>
</div>
<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
<?php } ?>
</div>
</div>
Issue: WP-pageNavi plugin isn't working correctly.
Note: I'm able to open website.com/page/2 without having any issues. But the post list is precisely the same on each page.
How to fix it?
If I were you I would just use different Page Templates for homepage and other pages.
It's hard to debug a plugin that we aren't using.
There is a function in Wordpress is_page() where you can input the name of the page in the para. Throwing that in an if statement is also another way to separate the posts.
There are a ton of ways to achieve what your looking for without the use of a plugin.
I'm quite new to wordpress and php in generall and am currently building my first real theme.
On one of my sites I show various projects which are child-pages of the overview-page
On that page I show preview-Images and then on hover I add a div with a background-color and blend in the project-Name and a button to get to the project (it's sort of a hover in a hover). But that isnt my real problem, most of that actually works. But I can't seem to figure out how to actually link to the displayed child pages. It allready gets the right thumbnails and everything, just the link that uses the same function doesnt seem to work.
Can one of you tell me how I modify my code to link the h6 to its child page?
Would be a huge help.
Thanks a lot in advance.
<div id="mainContent">
<div id="primary">
<p>
<?php the_content(); ?>
</p>
<?php
$args = array(
'child_of' => get_the_ID(),
'sort_order' => 'ASC'
);
$pages = get_pages($args);
// var_dump($pages);
foreach($pages as $page) {
?>
<div class="moreProjectsImages left">
<div class="projectHover">
<h5 class="title center">
<?php echo $page->post_title ; ?>
</h5>
<a href="<?php get_permalink($page->ID) ?>" class="btnDoubleHover">
<h6 class="center">
View Project
</h6>
</a>
</div>
<img src="<?php echo ''.get_the_post_thumbnail($page->ID, array(285,175)).''; ?>" />
</div>
<?php
}
?>
</div>
</div>
The function get_permalink() only returns the result, you need to echo it which you are doing for the thumb but not for the URL. Also there is a function specifically for page links get_page_link().
Correct code to get the link:
<a href="<?php echo get_page_link($page->ID) ?>" class="btnDoubleHover">
I'm trying to pull post types into my Bones based theme, and I'd like those posts to live inside of divs. eg.
<div class="fourcol"></div>
The problem is, some of the divs will also need a class of "first" or "last".
Right now, I'm using JQuery to find all of the divs with the class "fourcol" and adding a "first" class to the first div in the row, and a "last" class to the last div in the row. It seems to work, but there's a little bit of shifting when the page loads, and it doesn't seem as safe as I'd like it to be. It also causes issues when trying to filter the post types, as the first and last div are constantly changing, and the jQuery isn't reloading to reflect the posts new position.
Is there better way to pull these posts into divs?
I've tried everything I can to come up with minor fixes, but I'm sure it's come up before so I figured I'd post it here. Let me know if you have any suggestions!
Here's my loop so far:
<?php query_posts( array( 'cat' => 10, 'post_type' => 'people', 'showposts'=>-1 ) ); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="threecol">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?> role="article">
<header class="article-header">
<center><h3><?php the_title(); ?></h3></center>
</header> <?php // end article header ?>
<section class="entry-content clearfix">
<a class="ctp-hover" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<span class="hover-caption">VIEW</span>
<?php the_post_thumbnail('full'); ?>
</a>
</section> <?php // end article section ?>
</article> <?php // end article ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
I'm working on a site that has a buy now option on a book catalog page (each book is a custom posts). The books are added as custom posts by an admin in addition to custom fields with links, etc. When the user clicks a buy it now button, Fancybox pops up a window that has different places where one can buy the book. The problem I'm running into is each popup is just of the first post in the array. I'm extremely new to jQuery and PHP. I'm assuming I have to create some kind of counter, but I have no idea how to do that. But basically, each buy it now button has to open the separate custom post.
Relevant code:
js:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox(); });
</script>
html:
<?php else: ?>
<li>
<div class="thumbnail"><?php the_post_thumbnail(); ?></div>
<div class="content">
<h2><?php the_title(); ?></h2>
<p><?php echo substr(get_the_content(), 0, 250); ?></i>...
<a class="read-more" href="<?php echo get_permalink(); ?>">Read More ></a></p>
<a class="buy-now fancybox" href="#buy-now-popup2">
<img class="buy-now-img2" src="http://www3.patriciacornwell.com/wordpress/wp-content/uploads/buy-now.png">
</a>
</div>
</li>
<div id="buy-now-popup2">
<h2>Choose a Format</h2>
<ul>
<li>
<div class="thumb"><img src="http://www3.patriciacornwell.com/wordpress/wp-content/uploads/paperback.png"></div>
<h4>Paper Back</h4>
<div class="stores">
<?php $pbamazon = get_post_meta($post->ID, 'paperback-amazon', true); ?>
<?php $pbbn = get_post_meta($post->ID, 'paperback-barnesnoble', true); ?>
<?php $pbib = get_post_meta($post->ID, 'paperback-indiebound', true); ?>
<?php $pbpenguin = get_post_meta($post->ID, 'paperback-penguin', true); ?>
</div>
</div>
That isn't the whole buy-now-popup2 div but I don't think the rest of it has anything to do with my problem. Thanks in advance.
Well, I was able to figure this out on my own, and it was much simpler than I thought it would be.
I simply changed the fancybox href attribute to:
<a class="buy-now fancybox" href="#buy-now-popup<?php the_ID(); ?>">
and the popup id to:
<div id="buy-now-popup<?php the_ID(); ?>" class="buy-now-catalog">
so that Wordpress would automatically generate new divs for each link.
For my portfolio site, I would like to add anchor links to both the 'work' and 'blog' sections so that when clicked through to the next page it goes to the respective section. I noticed this is possible using jQuery from this question: WordPress pagination - Adding an Anchor link, but am unsure how this would work with two loops on the same page?
my current loops look like this, just replacing categories for each section:
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args=array('category_name'=>'portfolio','posts_per_page'=>4,'paged'=>$paged);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="blog-post">
<div class="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
<a class="details" href="<?php the_permalink(); ?>">
<h6><?php echo get_the_excerpt(); ?></h6>
</a><!-- DETAILS -->
</div><!-- THUMBNAIL -->
<div class="aside">
<h4><?php the_title(); ?></h4>
</div><!-- ASIDE -->
</div><!-- BLOG - POST -->
<?php endwhile; ?>
<div class="navigation">
<h3><?php posts_nav_link('∞','« Newer Posts','Older Posts »'); ?></h3>
</div><!-- PAGED-NAVIGATION -->
<?php wp_reset_query(); ?>
Ah I see what you mean; actually you are better off using wordpresses $args for the paginate_links() function. You can see it here: http://codex.wordpress.org/Function_Reference/paginate_links .
The one you want to change is 'format'=>'?page=%#%', (which is the page number) and changing it to something like 'format' => '?page=%#%#work', and 'format' => '?page=%#%#blog',
So you can do:
echo paginate_links(array('format' => '?page=%#%#work')); which should make clicking the link jump back down to the work anchor.
The problem is, you will still have a page jump if the user isn't scrolled exactly to the position of the anchor link. You are best to implement an Ajax solution so there is no reload of the page at all. Here is a good tutorial to get you started: http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/
Where you have your first <div class="navigation">
Add an id="work" and to the second id="blog"
so you would have
<div class="navigation" id="work">
</div>
<div class="navigation" id="blog">
</div>
Somewhere on your page.
Then you need a small modification to the jquery from the question you referred to to make the correct anchor link:
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){
$(a).attr('href',$(a).attr('href')+'#'+a.parents('.navigation').attr('id'));
//$(a).attr('href',$(a).attr('href')+'#blog') <-- instead of this
});
});
</script>
The parents('.navigation').attr('id') tells jquery to move up the dom intil it finds the navigition tag, and just grab it's ID to use as the text for the achor text
If you already have the ids blog and work on the page, you could use rel="work" instead and then you would in the jquery use attr('rel')