Adding Paging / PageNavi to the Equilibrium Theme
A few people have emailed me over the last week asking how I got paging and PageNavi to work on On’s Equilibrium Theme for Wordpress. The following is the why it’s behaving the way it is as well as how I worked around it.
The way this beautiful theme is written, it leverages Wordpress’s query_posts to set which posts appear in the Featured section and which posts appear in the Latest Posts section. After digging through Wordpress’s forums, I found out that using the query_posts function sometimes disables paging. The way this hiccup seems to manifest itself with the PageNavi plugin is that you will get a paged listing of all your posts, however no matter which page you click on, you will always be viewing the front page.
So, in order to get the Equilibrium Theme to keep its gorgeous layout while adding the invaluable PageNavi functionality, I added an if / else statement. Written in conversational English, if the website is on its front page, run the code normally, otherwise, run the code without the query_posts lines so it navigates properly. The modified index.php code is as follows:
<?php get_header(); ?>
<?php if (is_home() && !is_paged()) :?>
INSERT ALL OF THE ORIGINAL CODE FROM RIGHT AFTER <?php get_header();?> UP TO AND INCLUDING <?php endwhile; ?> <!– END –> </div> HERE
<?php else : ?>
<div id=”front-bottom”>
<div id=”latest-wrap”>
<h2>Earlier Posts</h2>
<div class=”content”>
<!– Edit Below 3 –>
<?php while (have_posts()) : the_post(); ?>
<div class=”latest-post-wrap”>
<div class=”latest-post”>
<div class=”latest-title”>
<h2><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
</div>
<div class=”latest-image”>
<a href=”<?php the_permalink() ?>”><?php image_attachment(’image’, 164, 119); ?></a>
</div>
</div>
<div class=”latest-content”>
<div class=”postMeta-front”><span class=”date”><?php the_time(’F j, Y’) ?></span><span class=”comments”><?php comments_popup_link(’0′, ‘1′, ‘%’); ?></span></div> <div class=”clear”></div>
<p><?php $excerpt = get_the_excerpt(); echo string_limit_words($excerpt,30); ?></p>
<p class=”moretext”><a href=”<?php the_permalink() ?>”>Continue Reading…</a></p>
</div>
</div>
<?php endwhile; ?> <!– END –>
</div>
<?php endif; ?>
<div class=”clear”></div>
<!– page navi –>
<div class=”pagenavi”>
<?php if(function_exists(’wp_pagenavi’)) { wp_pagenavi(”, ”, ”, ”, 3, false);} ?>
</div>
<!– page navi end –>
<div class=”clear”></div>
</div>
<?php get_sidebar(); ?>
<div class=”clear”></div>
</div>
<?php get_footer(); ?>
When implemented, this will keep your Equilibrium Theme’s front page looking exactly as it was (with the addition of PageNavi at the bottom). Subsequent pages will be identical, except they won’t have the Featured posts displayed at the top.
It is also possible to use <?php next_posts_link(); ?> and <?php previous_posts_link(); ?> instead of PageNavi, I just wasn’t going for that aesthetic.
Hope this helps (and many thanks to Tudinh for putting together such an elegant theme).
Update:
Here is the code for my index.php. One thing to watch out for is I use an H5 tag for my Latest heading, but H5s aren’t defined in the default style.css file.
Update 2:
Here is code for my archive.php. This is what gets my category pages to display in a similar style to my front page.
hello, im having trouble with your instruction, I cant seem to get it work. can you please post your actual code for the page navi?. I would really appreciate it. thanks.
hey, thanks for posting this. But Its not working for me. Can you please explain more clearly.. thanks.. i really wanted to have pagenavi.
w0w. thanks.. ^^ really appreciate it.. more power
Hi there. Pretty sure I’ve followed this verbatim but the result is I just get a blank white page. Any ideas?
Hi Lewis,
Off the top of my head I would guess that there’s either an extra or tag floating about somewhere in the code. At the bottom of the post is a link to the index.php code I’m using. Feel free to download and use it.
Good luck!
Hello,
Your solution has worked on the front page however it does not work on the widget sidebar archive categories. Do I need to use a different widget?
Ideally, I would like to reverse this. I don’t want pagenavi on the frontpage, but I do want it in the category archive pages. Does that make sense? But most importantly I want the archive pages to be navigational.
Any help would be greatly appreciated.
Hi John,
I think what you’d need to do is leave the original index.php as it is and then create a category.php which includes the if/else pagenavi workaround. That should leave your front page without pagenavi and while inserting it into your category archive pages.
Good luck!
So in this new category.php, I would copy the contents of my current index.php, or only the new code you supplied above in the first post?
Hi John,
If your current front page (index.php) is operating the way you’d like your category archive pages (category.php) to operate, I would copy and paste the contents of your current index.php into the new category.php. If not, give it a try with the above code.
Hope this help.
Thanks for your help, Bedirhan.
Where is the category.php file? All I can find is a categories.php file, which doesn’t seem to be what I’m looking for.
Hi John,
You would need to create the category.php file in the same directory as the index.php file. You can learn more about category.php / category templates here: http://codex.wordpress.org/Category_Templates
Good luck!
^ That link didn’t mention PageNavi, which seems to be what I’m having trouble with. All I want to do is add that PageNavi to the bottom of my category pages, For example: http://www.coaster101.com/category/features/
When I added “The modified index.php code is as follows” code to the bottom of category.php, all I get is a blank page now.
Everything is working perfectly except this, there’s gotta be an easy solution.
I really appreciate your help, though!
Just wanted to thank you for putting up this info. I did all types of tweaks to the template and spent a bunch of time on it and then couldn’t get the page functionality to work. It was an essential function so I was bummed out. I know little to nothing about php so you made my life considerably easier.
Also a small note to save others possible frustration. After following your directions pagenavi was generating blank pages with no posts. It was creating the next page, with everything but the posts. It was driving me crazy.
I switched templates back to the default and also adjusted the number of posts shown on the front page and the feed within the reading settings. When I turned back on the equilibirum template wp-pagenavi pulled my posts like a charm.
Not sure which of the steps were effective, or if this is a problem that others might have run into (like I said, I had messed around with the template code a bit), but figured I’d put it out there in case someone else has the same issue.
take care and thanks again
Thank you very much. I’m surprise because the owner of this theme don’t show this solution into his website.
Very good. Thanks again.
Thanks alot for sharing this info. It worked great on my site.
Could you please tell me how you managed to get your categorie pages to look like they do. On the original theme they just list the articles. I much prefer the way yours are shown.
Best regards,
Martin
Hi Martin,
I modified my archive.php to get my categories to display the way they did. Because it’s was a less cut and dry mod, I’ve added a link to my archive.php code above.
Hope this helps.
Bedirhan Thanks alot! It works like a charm. You are the man!
hey man, how do you get the ” ” code to work? I tried putting them in my individual post pages but they dont come up! weird!
oops
the [?php next_posts_link(); ?] code…
Hi Joe,
For me, I inserted it into my single.php file, such that it was contained within the [div class="post" id="post-[?php the_ID(); ?]“], just after the [?php the_content('[p]Read the rest of this entry »[/p]‘); ?> line.
Oooh. But in my single.php file I used instead of next_posts_link, I used next_post_link.
Naturally, replace the [ and ] with < and > respectively.
Good luck!
Hi,Bedirhan
I reall appreciate for this info its really helpful
but i’m have little problems with how can i insert picturw in all post ?
thanks
Hi Amer,
Depending on your question, there are two answers.
If you are you asking how to insert pictures into the posts themselves, you can insert them through Wordpress’s post publisher (detailed directions are here: http://codex.wordpress.org/Using_Image_and_File_Attachments)
If you are asking how to insert the thumbnails for the posts, you can insert them with the Wordpress’s post publisher by navigating to the post you’d like the thumbnail to be assigned to and creating a custom field named ‘image’ (the custom field options are right below where you right posts). Then, you can assign the path of the image (for example http://www.yoursite.com/thumbnails/thumb.jpg) to the ‘image’ custom field’s value.
Hope this helps.
Really thanks, Bedirhan
Now, i can fixed it out on post image
but to day i have some questions about why on category pages that display in a similar style to front page [ copied from your code ] its shown only 5 post , but i want it to show full in 8 , Can you help me fix it!
p.s- on header can i change into my own logo ?
Thanking youy beforehand
Hi Bedirhan,
Is it possible to do what you have done with the categories page to the search results as well?
It would be so cool if the search results were shown like the front page with thumbnails and there was Pagenavi effect to.
That hack would make this theme even better.
Hope so much that you can work your magic once more
Cheers,
Martin
Hi Amer,
With regard to your category page only showing 5 posts, my first guess would be to check how many posts your blog is set to show. In the admin area, under the Settings section, there’s a Reading menu pick. Click on that and make sure that your blog page is set to show at most 8 posts.
To change the header into your own logo, you can modify the header.php file. If you replace the [?php bloginfo('name'); ?] on line 37 with an [img src="path_to_your_logo" border="0"], that should do the trick. (In the actual code, replace the [ and ] with < and > respectively)
Hi Martin,
That is a great idea!!! I’m buried in freelance work right now and will definitely put something together when I get a chance. Wordpress’s site has a good explanation of how to create a searchpage.php (http://codex.wordpress.org/Creating_a_Search_Page) based off of the index.php page. If you’re up to it, try modifying the archive.php code to put a searchpage.php together (that’s what I’m going to attempt).
i really appreciate with you help,Bedirhan
i’ll to mix it .
SOS UN MAESTRO !!!
It worked great on my site.
Tks !!!
Hi,
I’ve followed all the instructions and even copy pasted your code (to avoid any floating tags) but for some reason I still get a blank page.
Do you have any idea what I might be doing wrong?
brilliant!!
worked a treat, thank you