Hugo の ページャ は基本的に「Prev」と「Next」しかありません。
テーマ「Robust」だとこんな感じ。

目標はこんな感じです。

では、早速修正していきましょう。
レイアウト修正
テーマ「Robust」のレイアウト「pagination.html」を修正します。
\themes\hugo_theme_robust\layouts\partials\pagination.html
こちらの「The final code」の「PAGE NUMBERS」から下を全てコピーして

「pagination.html」に上書きします。

WordPress と合わせるために、タグと Class を微修正します。
1.ul を div と nav で囲います。
<div id="paging">
<nav>
<ul class="pagination">
<!-- 省略 -->
</ul><!-- .pagination -->
</nav>
</div>
2.アクティブ時の Class を追加する。
<li class="pagination__item{{ if eq . $paginator }} pagination__item--current{{ end }}">
↓↓↓
<li class="pagination__item{{ if eq . $paginator }} pagination__item--current active{{ end }}">
とりあえずここまでで、ページャ がこのように変わります。

CSS 修正
あとは、CSS を修正します。
テーマ「Robust」の CSS は、自由に編集できる「custom.css」が用意されているので、これに追記していきます。
\themes\hugo_theme_robust\layouts\partials\custom.css
こんな感じに適応してみました。
/*
------------------------------------
Pagination
------------------------------------ */
#paging {
margin: auto;
text-align: center;
}
#paging ul {
padding: 0;
}
#paging i {
font-weight: bold;
}
#paging .not-allow i {
font-weight: normal;
opacity: 0.3;
}
.pagination {
display: flex;
justify-content: center;
margin: 0;
list-style: none;
border-radius: .25rem;
}
.pagination li {
flex: 1 1 42px;
max-width: 42px;
min-width: 27px;
float: left;
}
.pagination > li > a {
display: inline-block;
width: 100%;
padding: 6px 0;
color: inherit;
background: #fff;
border: 1px solid #ddd;
border-right: 0;
}
.pagination > li:last-child > a,
.pagination > .not-allow:first-child > a:hover {
border-right: 1px solid #ddd;
}
.pagination > .active > a,
.pagination > li > a:hover {
color: #fff;
background: #dc143c;
}
.pagination > .active > a:hover,
.pagination > .not-allow > a:hover {
cursor: text;
}
.post #paging {
margin: 20px 0 40px 0;
}
おわりに
これだけで ページャが WordPress みたいになります。
全ての機能が置き換えれたら、WordPress に移行したいですね。