通常はこのような感じ
<div class="nav-links">
<span class="nav-previous"><?= previous_post_link('%link', '古い記事へ' ) ?></span>
<span class="nav-next" ><?= next_post_link ('%link', '新しい記事へ') ?></span>
</div>
それをこのように……
<div class="nav-links">
<span class="nav-previous"><?= get_previous_post() ? previous_post_link('%link', '古い記事へ' ) : '古い記事へ' ?></span>
<span class="nav-next" ><?= get_next_post() ? next_post_link ('%link', '新しい記事へ') : '新しい記事へ' ?></span>
</div>
リンク先があるとリンクが張られますが、ない場合はリンクなしテキストが表示されます。
<div class="nav-links">
<span class="nav-previous"><a href="....">古い記事へ</a></span>
<span class="nav-next" >新しい記事へ</span>
</div>
あとはCSSで飾り付けしてみてください。
.nav-previous,
.nav-next {
color: #ccc;
}
.nav-previous a,
.nav-next a{
color: #ff3366;
}