Swipe the Next and Previous Button Pointers in Portfolio Project

  • Unknown's avatar
    phoebechui1 · Member ·

    Hi,

    I am using Orvis theme for my website (www.phoebechui.com). Click a project to view the details from the home page. At the bottom of each project, there are the “Previous” and “Next” buttons to navigate to other projects. The ultimate goal is to make Previous button link to the “newer dated project” and Next button link to the “older dated project”. The default code is doing the opposite so I would like to change it.

    Two ideas I came up with:
    1) Change the links to point to the correct projects. The link on the Previous button will point to the newer project and the link on the Next button will point to the older project.

    2) Swipe the position of the “Previous & the previous link” button and “Next & the next link” button (Previous will end up on the right side the screen, and Next will be on the Left side of the screen). Then I will just change the text on the button so eventually it will still have “Previous” text on the left, “Next” text on the right but the links pointing to the correct project order I want.

    I have looked at style.css and also single-jetpack-portfolio.php but wasn’t able to change the code to get the results I want. I would appreciate if someone can help me on how to adjust the code to achieve this.

    Thank you!
    Phoebe

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mommyhive · Member ·

    Hi there,

    Seems like your issue is related to a site that is using the WordPress.org software, which is hosted outside WordPress.com

    This forum only supports the sites hosted on WordPress.com. Please post your question on the WordPress.org support forum: https://wordpress.org/support/

    Both(WordPress.com and WordPress.org) are different products. You can find out the differences between them here: https://en.support.wordpress.com/com-vs-org/

    Having said that, give the below code a try. The previous and next button will do the functionality as you say by showing newer and older posts respectively. I have switched the buttons and just changed the title text of the button.
    Look for nav links in your HTML and copy code from <div class=”nav-links”> till you find <span class=”post-title”>Elena of Avalor: Wings Over Avalor</span></div>and replace it with the below code 

    <div class="nav-links">
<div class="nav-next">
<a href="http://www.phoebechui.com/portfolio/elena-of-avalor-wings-over-avalor/" rel="next">
<span class="meta-nav" aria-hidden="true" order="ASC">Previous</span>
<span class="screen-reader-text">Previous post:</span>
<span class="post-title">Elena of Avalor: Wings Over Avalor</span></a>
</div>
<div class="nav-previous">
<a href="http://www.phoebechui.com/portfolio/abcmouse-com/" rel="prev">
<span class="meta-nav" aria-hidden="true" order="ASC">Next</span>
<span class="screen-reader-text">Next post:</span>
<span class="post-title">ABCmouse.com</span>
</a>
</div>

    Similarly in CSS look for .post-navigation .nav-next and .post-navigation .nav-previous and place the below code

    .post-navigation .nav-next {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   margin-left: 0;
   margin-right: auto;
   text-align: left;
}

.post-navigation .nav-previous {
margin-right: 0;
margin-left: auto;
text-align: right;
}

    Hope that helps.

    Thank you.

  • Unknown's avatar
    phoebechui1 · Member ·

    Thank you! I resolved the problem :)

  • Unknown's avatar
    mommyhive · Member ·

    Cheers! :)

  • The topic ‘Swipe the Next and Previous Button Pointers in Portfolio Project’ is closed to new replies.