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;
}
}

#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>
#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>

#4. Result
