How to add the previous article and next article button form in wordpress

Put the following code into the while main loop of the single.php file of your theme: lt;nav?id="nav-single"gt;

lt; span?class="nav-previous"gt;lt;?php?previous_post_link(?$format='lt;span?class="left-arrow"gt;lt;/spangt;?link?',?$link= 'title',?$in_same_cat?=?false,?$excluded_categories?=?'');?gt;lt;/spangt;

lt;span?class="nav-next"gt; lt;?php?next_post_link($format='?link?lt;span?class="right-arrow"gt;lt;/spangt;',?$link='title',?$in_same_cat?=?false, ?$excluded_categories?=?'');?gt;lt;/spangt;

lt;/navgt;lt;!--?#nav-single?--gt;

For CSS, please refer to lines 1714-1723 in the style of the 2013 theme that comes with WP, plus: .left-arrow: before, .right-arrow: after{

width:?14px;

height: ?14px;

display: ?inline-block;

padding: ?8px?0;

color: ?#999 ;

font:?400?14px/1?dashicons!important;

font-weight:?normal;

font-style:?normal;

speak: ?none;

text-align: ?center;

vertical-align: ?middle;

-webkit-font -smoothing:?antialiased;

-moz-osx-font-smoothing:?grayscale;

-moz-transition:?all?.1s?ease-in-out;

-webkit-transition:?all?.1s?ease-in-out;

transition:?all?.1s?ease-in-out;

}

.left-arrow:before{

content:?"\f340";

}

.right-arrow :after{

content:?"\f344";

} You need to load the dashicons that come with WP in the theme frontend before the left and right arrows will appear, as shown below

Test screenshot: