Buy me a coffee

(Portfolio/Personal Plan) Add a List Project under Pagination

Suppose you need to add a list of projects with name/URL like below, under pagination on all Portfolio Pages.

  • All – /portfolio
  • Roam Around – /porfolio/roam-around
  • TDA Education – /portfolio/tda-education
  • Get the Facts – /portfolio/get-the-facts
  • Google Play – /portfolio/google-play

You can follow these steps:
#1. Paste this code to the Custom CSS box

ul.list-custom-pagination {
  display: none;
}
ul.list-custom-pagination {
    justify-content: center;
    list-style: none;
    padding-left: 0;
}

ul.list-custom-pagination li {
    margin-left: 10px;
    margin-right: 10px;
}

ul.list-custom-pagination li a:hover {
    border-bottom: 1px solid black;
}

ul.list-custom-pagination li a {
    border-bottom: 1px solid transparent;
}
@media screen and (max-width:767px) {
    ul.list-custom-pagination {
        flex-wrap: wrap;
    }
}

Portfolio Item Add A List Project Under Pagination 01 Min

#2. Add a Code Block in the Site Footer > Paste the code

<ul class="list-custom-pagination">
    <li><a href="/portfolio">All</a></li>
    <li><a href="/portfolio/roam-around">Roam Around</a></li>
    <li><a href="/portfolio/tda-education">TDA Education</a></li>
    <li><a href="/portfolio/get-the-facts">Get the Facts</a></li>
    <li><a href="/portfolio/google-play">Google Play</a></li>
</ul>
<style>
body.view-item .list-custom-pagination {
  display: flex !important;
}
</style>

Portfolio Personal Plan Add A List Project Under Pagination 01 Min#3. Add a Markdown Block in the Site Footer > Paste the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
        $('ul.list-custom-pagination').insertAfter('section#itemPagination');
    });
  </script>

Portfolio Personal Plan Add A List Project Under Pagination 02 Min

#4. Result

Portfolio Item Add A List Project Under Pagination 04 Min