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...
Related Post for Page Navigation With Title And Thumbnail In Wordpress
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
RENAME DOWNLOAD FOLDER IN PRESTASHOP
RENAME PDF FOLDER IN PRESTASHOP
MAKE WODPRESS THEME
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
PRESTASHOP NEW THEME FOLDER
GOOGLE FILTER BUTTON IN IMAGE SEARCH
BLOG HOSTING HELP
INTENSO MAGENTO QUICK VIEW BUTTON
RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE
RENAME CACHE FOLDER IN PRESTASHOP
ON LINE JAVA LIBRARY
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
HOME FEATURE TAB CHANGE IN PRESTASHOP
Direct Links to your Files on Google Drive
Magento Hello World Module (Extension)
RENAME ADAPTER FOLDER IN PRESTASHOP
BlogPagerWithJavaCode
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
BOOTSNIPP LOGIN SIGNUP FORM
WAMP TO WORDPRESS INSTALL
RENAME CSS FOLDER IN PRESTASHOP
RENAME DOCS FOLDER IN PRESTASHOP
Direct Link Generator CODE
IMPORT SQL CSV FILE ON PHPMYADMIN
RENAME CORE FOLDER IN PRESTASHOP
BODY JS FILE LINK IN MAGENTO
25 JS FILES DELETE IN PRESTASHOP
ABSOLUTE POPUP BOX WITH PRINT
JAVA FILE MAKE & SAVE IN NOTE PAD
Recommended Post Slide out for Blogger
CHANGE MENU CSS COLOR IN PRESTASHOP
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
GOOGLE PROJECT HOSTING
RENAME CONTROLLERS FOLDER IN PRESTASHOP
BLOGGER INCLUDABLE SECTION 
PHP CONTACT FORM WITH CAPTCHA
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
FEATURE POST WIDGET IN BLOG
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.