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 movie you might like to see :

FLICKITY SLIDER SCROLL WITH RADIO N...

FLICKITY JS CSS SLIDER

RADIO BUTTON SLIDER TO KEY FRAME SL...

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BODY JS FILE LINK IN MAGENTO

INTENSO MAGENTO QUICK VIEW BUTTON

Magento Hello World Module (Extensi...

FEATURE POST WIDGET IN BLOG

IMPORT SQL CSV FILE ON PHPMYADMIN

Direct Link Generator CODE

Direct Links to your Files on Googl...

PHP CONTACT FORM WITH CAPTCHA

ON LINE JAVA LIBRARY

GOOGLE PROJECT HOSTING

PRESTASHOP THUMBNAIL WITH HOVER EFF...

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

GOOGLE CONSOLE

GOOGLE CHROME EXTENSION FILE SAVE O...

OPEN DESKTOP TEXT FILE BY COMMAND P...

RELATED POST WIDGET LIST WITHOUT TH...
?
+
X
Recommended for you
Loading..
Related Post for Page Navigation With Title And Thumbnail In Wordpress
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS ----------------------------------------------------------------------------------------------------------------- BEFORE INSTALL PRESTASHOP TWO BLANK FOLDERS CACHE SMARTY…
RENAME DOWNLOAD FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME download To DOG 1…
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…
PRESTASHOP NEW THEME FOLDER -------------------------------------------------------------------------------------------------------------- YOUTUBE LINK: https://youtu.be/emfINPXYuGc 0) ONLY …
GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbs…
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…
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGE…
RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE -------------------------------------------------------------------------------------- RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE: ADD HTML/JAVA WIDGET AND PASTE BELO…
RENAME CACHE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME cache To CASH 1) G…
ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ http…
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES ------------------------------------------------------------------------------------------------------------------ YOU TUBE LINK https://youtu.be/UbE4O--D9i4?list=PL4AC2C4F0F53…
PRESTASHOP THUMBNAIL WITH HOVER EFFECT ----------------------------------------------------------------------------------------------------------- PRESTASHOP THUMBNAIL WITH HOVER EFFECT STEP1: GO INSIDE IN BELOW LIN…
HOME FEATURE TAB CHANGE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ AFTER PRESTA SHOP INSTALLATION FIND REQUIRE FILE ONE…
Direct Links to your Files on Google Drive DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINK…
Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
RENAME ADAPTER FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME adapter To APPLE…
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 …
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE ----------------------------------------------------------------------------------------------------------------- YOUTUBE LINK: https://www.youtube.com/watch?v=96BeqS8bueU 0) …
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/…
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
WAMP TO WORDPRESS INSTALL ------------------------------------------------------------------------------------------------------------- READ MORE: STEP NO:0 = CHECK WINDOW OPERATING SYSTEM STEP NO:1 …
RENAME CSS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME css To CAT 1) BEFO…
RENAME DOCS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME docs To …
Direct Link Generator CODE ----------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------------------…
IMPORT SQL CSV FILE ON PHPMYADMIN --------------------------------------------------------------------------------------------------- READ MORE: ----------------------------------------------------------------…
RENAME CORE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME Core To COAT 1) GO…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
25 JS FILES DELETE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ NO:1 JS FILE DELETE jquery-1.11.0.min.js FILE IN …
ABSOLUTE POPUP BOX WITH PRINT ----------------------------------------------------------------------------------------------------------------- POP BOX WITHOUT JAVA CODE 1: COPY AND PASTE BELOW CODE IN POS…
JAVA FILE MAKE & SAVE IN NOTE PAD CLICK AND OPEN NOTE PAD IN WNDOW MENU BAR -------------------------------------------------------------------------------------------------------- COPY…
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
CHANGE MENU CSS COLOR IN PRESTASHOP ---------------------------------------------------------------------------------------------------------------------- OR USE THIS CODE INSIDE FILE C:\wamp\www\PrestaShop\them…
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN THIS CODE U NEED SAME POST HTML CODE,P…
GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.…
RENAME CONTROLLERS FOLDER IN PRESTASHOP ------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME contr…
BLOGGER INCLUDABLE SECTION ------------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------…
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…
FEATURE POST WIDGET IN BLOG ------------------------------------------------------------------------------------------------------------ FEATURE POST WIDGET WITHOUT JAVA CODE 1) IT WORKS WITH POST ID 2) …
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.