'How do I make a pagination using existing buttons?
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. All links to scripts and stylesheets were made by the template creator. I simply moved the files to appropriate locations.
My CSS is here:
<link rel='stylesheet' href='../blog/css/woocommerce-layout.css' type='text/css' media='all'/>
<link rel='stylesheet' href='../blog/css/woocommerce-smallscreen.css' type='text/css' media='only screen and (max-width: 768px)'/>
<link rel='stylesheet' href='../blog/css/woocommerce.css' type='text/css' media='all'/>
<link rel='stylesheet' href='../blog/css/font-awesome.min.css' type='text/css' media='all'/>
<link rel='stylesheet' href='../blog/style.css' type='text/css' media='all'/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald:400,500,700%7CRoboto:400,500,700%7CHerr+Von+Muellerhoff:400,500,700%7CQuattrocento+Sans:400,500,700' type='text/css' media='all'/>
<link rel='stylesheet' href='../blog/css/easy-responsive-shortcodes.css' type='text/css' media='all'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Body:
<!-- #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:
<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>To see everything as it is on the page: https://aka.my/m3w (because the CSS and Javascripts are in different locations).
Thank you
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|