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