If you are running a classified website using OSCLASS CMS with some of the default themes available, you might have noticed that there is not NEXT and PREVIOUS links when an item is viewed. So, the visitor will have to either go back to home or click on related listings, tags etc. if available to view other listings. The NEXT and PREVIOUS links are desired on the item page.
If you are running an OSCLASS website, and would like to add NEXT and PREVIOUS item links, we shall see how to add in this post.
Code to display NEXT ITEM and PREVIOUS ITEM in the item page of OSCLASS website:
<div class=”prev-next-item”>
<?php
$itemId = osc_item_id();
$pItem = $itemId – 1;
$nItem = $itemId + 1;
?>
<div class=”next-listing-item”>
<a href=”<?php echo osc_item_url_ns($nItem); ?>”>
<?php _e(‘<< Next Item’,’OSCLASSWIZARDS_THEME_FOLDER’); ?></a>
</div>
<div class=”prev-listing-item”>
<a href=”<?php echo osc_item_url_ns($pItem); ?>”>
<?php _e(‘Prev Item >>’,’OSCLASSWIZARDS_THEME_FOLDER’); ?></a>
</div>
<br>
</div>
Add the code above to item.php wherever you want to display the links.
Whether you are developing OSCLASS website locally or you have a live website, item.php is the only file where you need to edit.
- Connect to your OSCLASS website using an FTP client or through the host Control Panel
- Navigate to your theme folder. Eg: \htdocs\eadserve\oc-content\themes\osclass-theme-child
- Find item.php and download it.
- Open the file in a notepad or better with notepad++
- Depending on your theme, scroll down to find the code related to the end of the content area and beginning of comments. It is better to put the NEXT AND PREVIOUS LINK after the content but before the comments. You may also put the link just below the TITLE if you like. I prefer after the later.
- Copy and paste the code
- Save the file
- Upload to the same theme’s folder and replace previous file
- View an item on your website if the NEXT and PREVIOUS LINKS appear or not.
STYLING THE NEXT AND PREVIOUS LINK
After adding the code in item.php, the links should appear. Now it’s time to style the links a bit. You can use the DIV classes to specify some styles via CSS. Add some CSS code to the theme’s CSS file such as main.css or if your theme supports custom CSS code insertion, you may add it there.
Example CSS codes are given below:For the main “<div class=”prev-next-item”>”:
.prev-next-item {
display: block;
width: 100%;
margin: 0;
background-color: #dddfe2;
padding: 2%;
border: 0;
border-radius: 5px;
}
For the “<div class=”next-listing-item”>”:
.next-listing-item {
display: block;
width: 50%;
float: left;
font-size: 1.3em;
font-weight: 700;
/* clear: both; */
}
For the “<div class=”prev-listing-item”>”:
.prev-listing-item {
display: block;
width: 50%;
float: right;
font-size: 1.3em;
font-weight: 700;
/* clear: both; */
text-align: right;
}
You can use browser’s inspect element to change colors etc. and see what suits your needs.
After adding the NEXT and PREVIOUS ITEM code in item.php and after applying the CSS codes to the theme’s main.css, the NEXT and PREVIOUS ITEM links appear as shown below:
