I have a blog page on my website. I took the template from the internet, but I don’t think there’s a javascript for the pagination buttons. Do I need to just make a separate page and link to the buttons?
I want to make sure that I’m doing it in the most efficient way. If it’s not best to create a new page and link it to the numbers and next button, then I would need some guidance.
<!-- #masthead -->
<div id="content" class="site-content">
<div id="primary" class="content-area column full">
<main id="main" class="site-main">
<div class="grid portfoliogrid">
<!-- leave empty -->
<!------- NEW ARTICLE ABOVE THIS LINE -------->
<article class="hentry">
<header class="entry-header">
<div class="entry-thumbnail">
<a href="../blog/posts/url"><img alt="example" src="../blog/img/top-5-asian-cinema/thumbnail.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="title"/></a>
<span style="font-family:candara">16th February, <a href="../blog/tags/2022" rel="category tag">2022</a></span> | <span style="font-family:candara"><i>author: name</i></a></span>
</div>
<h2 class="entry-title" style="font-family:corbel"><a href="../blog/posts/url" rel="bookmark"><b>title</b></a></h2>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/list'>list</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/top-5'>top 5</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/asian-cinema'>asian cinema</a>
</header>
</article>
<!------- NEW ARTICLE ABOVE THIS LINE -------->
<article class="hentry">
<header class="entry-header">
<div class="entry-thumbnail">
<a href="../blog/posts/url"><img alt="example" src="../blog/img/mary-poppins/thumbnail.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="title"/></a>
<span style="font-family:candara">12th February, <a href="../blog/tags/2022" rel="category tag">2022</a></span> | <span style="font-family:candara"><i>author: name</i></a></span>
</div>
<h2 class="entry-title" style="font-family:corbel"><a href="../blog/posts/url" rel="bookmark"><b>title</b></a></h2>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/review'>review</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/walt-disney'>walt disney</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/julie-andrews'>julie andrews</a>
</header>
</article>
<!------- NEW ARTICLE ABOVE THIS LINE -------->
<article class="hentry">
<header class="entry-header">
<div class="entry-thumbnail">
<a href="../blog/posts/url"><img alt="title" src="../blog/img/charlie-cox-mcu/thumbnail.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="example"/></a>
<span style="font-family:candara">11th February, <a href="../blog/tags/2022" rel="category tag">2022</a></span> | <span style="font-family:candara"><i>author: name</i></a></span>
</div>
<h2 class="entry-title" style="font-family:corbel"><a href="../blog/posts/url" rel="bookmark"><b>title</b></a></h2>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/opinion'>opinion</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/mcu'>mcu</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/charlie-cox'>charlie cox</a>
</header>
</article>
<!------- NEW ARTICLE ABOVE THIS LINE -------->
<article class="hentry">
<header class="entry-header">
<div class="entry-thumbnail">
<a href="../blog/posts/url"><img alt="title" src="../blog/img/gentlemen/thumbnail.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="title"/></a>
<span style="font-family:candara">9th February, <a href="../blog/tags/2022" rel="category tag">2022</a></span> | <span style="font-family:candara"><i>author: name</i></a></span>
</div>
<h2 class="entry-title" style="font-family:corbel"><a href="../blog/posts/url" rel="bookmark"><b>title</b></a></h2>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/review'>review</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/guy-ritchie'>guy ritchie</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/crime'>crime</a>
</header>
</article>
<!------- NEW ARTICLE ABOVE THIS LINE -------->
<article class="hentry">
<header class="entry-header">
<div class="entry-thumbnail">
<a href="../blog/posts/title"><img alt="example" src="../blog/img/eternals/eternals thumb.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="title"/></a>
<span style="font-family:candara">21st January, <a href="../blog/tags/2022" rel="category tag">2022</a></span> | <span style="font-family:candara"><i>author: name</i></a></span>
</div>
<h2 class="entry-title" style="font-family:corbel"><a href="../blog/posts/url" rel="bookmark"><b>title</b></a></h2>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/review'>review</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/mcu'>mcu</a>
<a class='portfoliotype' style="font-family:candara" href='../blog/tags/chloe-zhao'>chloe zhao</a>
</header>
</article>
</div>
<!-- .grid -->
<nav class="pagination">
<span class="page-numbers current">1</span>
<a class="page-numbers" href="#">2</a>
<a class="next page-numbers" href="#">Next ยป</a>
</nav>
<br/>
The javascript is mostly just my inclusions. A script to produce random articles from pressing a button. The linked scripts came with the website template, I just placed them in appropriate locations.:
<script src='../blog/js/jquery.js'></script>
<script src='../blog/js/plugins.js'></script>
<script src='../blog/js/scripts.js'></script>
<script src='../blog/js/masonry.pkgd.min.js'></script>
<script>
function randomlinks(){
var myrandom=Math.round(Math.random()*4)
var links=new Array()
links[0]="url"
links[1]="url"
links[2]="url"
links[3]="url"
links[4]="url"
window.location=links[myrandom]
}
</script>Thank you