Page Navigation With Title And Thumbnail In Wordpress

Tuesday, 17 June 2014

Page Navigation With Title And Thumbnail In Wordpress

How to use thumbnails for previous/next post navigation in WordPress. The next_post_link and previous_post_link functions doesn’t have a simple enough thumbnail parameter which a new developer can simply turn on and off. In this article, we will show you how to use post thumbnails with previous and next post links in WordPress.

------------------------------------------------------------------------------------------------------------
First thing you need to do is open your theme’s single.php file and add the following code inside the loop most likely after the_content() area:
----------------------------------------------------------------------------------------------------------

<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
</div>

<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next" style="float:right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>
<?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div><!--#cooler-nav div -->

-------------------------------------------------------------------------------------------------------
Next thing you need to do is open your style.css file and add the following styles:
-------------------------------------------------------------------------------------------------------

#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
#cooler-nav img{float: left; margin: 0 10px 0 0;}
#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}
#cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}
#cooler-nav .next{float: right; width: 250px;}

Related Post for Page Navigation With Title And Thumbnail In Wordpress

IMPORT SQL CSV FILE ON PHPMYADMIN --------------------------------------------------------------------------------------------------- READ MORE: ----------------------------------------------------------------…
RENAME CORE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME Core To COAT 1) GO…
CHANGE MENU CSS COLOR IN PRESTASHOP ---------------------------------------------------------------------------------------------------------------------- OR USE THIS CODE INSIDE FILE C:\wamp\www\PrestaShop\them…
NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------…
RENAME CONTROLLERS FOLDER IN PRESTASHOP ------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME contr…
FEATURE POST WIDGET IN BLOG ------------------------------------------------------------------------------------------------------------ FEATURE POST WIDGET WITHOUT JAVA CODE 1) IT WORKS WITH POST ID 2) …
RENAME DOWNLOAD FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME download To DOG 1…
Popular Posts Widget for Blogger Tweak ---------------------------------------------------------------------------------------------------------- 1- ADD POPULAR POST WIDGET IN BLOG 2- ADD HTML/JAVA WIDGET IN BLOG A…
GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbs…
25 JS FILES DELETE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ NO:1 JS FILE DELETE jquery-1.11.0.min.js FILE IN …
GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.…
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS ----------------------------------------------------------------------------------------------------------------- BEFORE INSTALL PRESTASHOP TWO BLANK FOLDERS CACHE SMARTY…
PRESTASHOP THUMBNAIL WITH HOVER EFFECT ----------------------------------------------------------------------------------------------------------- PRESTASHOP THUMBNAIL WITH HOVER EFFECT STEP1: GO INSIDE IN BELOW LIN…
RENAME DOCS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME docs To …
PAGINATION IN BLOG ---------------------------------------------------------------------------------------------------------- 1- FIND BODY CLOSE TAG AND REPLACE WITH BELOW CODE READ MORE: http:/…
BlogPagerWithJavaCode BLOG PAGER - YouTube ▶ 6:22 https://www.youtube.com/watch?v=u54p0R8tS30 4 mins ago - Uploaded by SAVE MONEY BLOG PAGER ... how to create paging,pagination in …
Direct Link Generator CODE ----------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------------------…
POPULAR POST WIDGET ADOSOSIVE STYLE -------------------------------------------------------------------------------------------------------- 1- USE THIS OR OTHER TEMPLATE Read More For Multi Colors:http://fbgadg…
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE RED JAVA CODE AND JAVA FILE LINK PAG…
RENAME CACHE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME cache To CASH 1) G…
RENAME PDF FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME pdf To PAK 1) …
MAKE WODPRESS THEME ------------------------------------------------------------------------------------------------------------------------ MAKE AND SAVE ALL FILE ONE BY ONE IN SAME FOLDER -…
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP ------------------------------------------------------------------------------------------------------------------ 1.C:\wamp\www\PrestaShop\README.md 2.&nbs…
RENAME CSS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME css To CAT 1) BEFO…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE ----------------------------------------------------------------------------------------------------------------- YOUTUBE LINK: https://www.youtube.com/watch?v=96BeqS8bueU 0) …
WAMP TO WORDPRESS INSTALL ------------------------------------------------------------------------------------------------------------- READ MORE: STEP NO:0 = CHECK WINDOW OPERATING SYSTEM STEP NO:1 …
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
PRESTASHOP NEW THEME FOLDER -------------------------------------------------------------------------------------------------------------- YOUTUBE LINK: https://youtu.be/emfINPXYuGc 0) ONLY …
PHP CONTACT FORM WITH CAPTCHA ------------------------------------------------------------------------------------------------------------------ BEFORE SEND MESSAGE 1) FIRST SOVLE SMTP PROBLEM …
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE -------------------------------------------------------------------------------------------------------------------------- USEFULL LINKS http://alternativeto.net/software/filese…
RENAME ADAPTER FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME adapter To APPLE…
ABSOLUTE POPUP BOX WITH PRINT ----------------------------------------------------------------------------------------------------------------- POP BOX WITHOUT JAVA CODE 1: COPY AND PASTE BELOW CODE IN POS…
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGE…
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES ------------------------------------------------------------------------------------------------------------------ YOU TUBE LINK https://youtu.be/UbE4O--D9i4?list=PL4AC2C4F0F53…
ADD POP UP REMOVER STEP 2: Remove FocusBase pop-up ads from Internet Explorer, Firefox and Google Chrome with AdwCleaner The AdwCleaner utility will scan your computer and web browser for …
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ▶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/…
BLOG HOSTING HELP DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE…
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN THIS CODE U NEED SAME POST HTML CODE,P…
HOME FEATURE TAB CHANGE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ AFTER PRESTA SHOP INSTALLATION FIND REQUIRE FILE ONE…
Platinum Arts Sandbox Free 3D Game Maker ----------------------------------------------------------------------------------------------------- READ MORE: ------------------------------------------------------…