Adding Next/Previous buttons to DW Focus

shae101s
asked 11 years ago

How can we add the option to go to the Next or the Previous post when viewing a single blog post on DW Focus theme? I really want this functionality, because my readers find it easier to continue to read that way along with the related posts.

So how do we add this function? Thanks

4 Answers

DominicStaff
answered 10 years ago

To resolve this issue, you can log in to Dashboard > Appearance > Editor > open the Style.css file then add the following code:

 .post-navigation .assistive-text {
     display: none;
}

.post-navigation {
    display: table;
    width: 100%;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    display: table-cell;
    width: 50%;
    padding: 10px;
    font-family: 'Bitter',serif;
    font-size: 14px;
    line-height: 22px;
    vertical-align: middle;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: block;
}

.post-navigation .nav-next {
    border-left: 1px solid #ddd;
    text-align: right;
}

@media(max-width: 767px) {
    .post-navigation {
        display: none;
    }
}

shae101s
replied 10 years ago

When I added the above code, it knocked a few things out of whack. It made the related posts section text become super large and also that same section doesn’t always show up anymore 🙁 Any ideas how to fix it?

Elizabeth Sensky
replied 10 years ago

I just used this code, and it added the post titles to the arrows at the bottom. But I’m wondering: how can I just make it say “next” and “previous” or “older” and “newer” ?

I’d appreciate some help!

Dominic Staff
replied 10 years ago

After adding the code in the link: http://snippi.com/s/8gvxuzv to the template-tags.php file in the folder path “wp-content\themes\dw-focus\inc” / line 220
You can find the following code:

%link

‘, ‘‘ . _x( ‘‘, ‘Previous post link’, ‘dw-minion’ ) . ‘ %title‘ ); ?>

%link

‘, ‘‘ . _x( ‘‘, ‘Next post link’, ‘dw-minion’ ) . ‘%title‘ ); ?>

Notice: you can change here: ‘Previous post link’ and ‘Next post link’

DominicStaff
answered 10 years ago

To resolve your issue.

Firstly, you can open the template-tags.php file in the folder path “wp-content\themes\dw-focus\inc” / line 220 then add the following:

URL: http://snippi.com/s/8gvxuzv

Next, please open the single.php file in the folder path “wp-content\themes\dw-focus” / line 54 then add the following code:

   <?php dw_focus_content_nav('nav_focus'); ?>

shae101s
replied 10 years ago

Thanks! Will try it and let you know the outcome

shae101s
answered 10 years ago

Ok, added the code but now a few changes I wanted to make:

I want the line that reads Post Navigation to not be so large, and to be either centered, or look like the heading of the Related Posts with the small text and line.

I want the Next/Previous post titles to only show a specific number of characters or can have a set title to show like go to next post, see the previous post

And lastly, when the code was put in, I notice that the Nav-next displays in block, but doesn’t float right so it sat under the nav-previous section. Where do I add the line of code to have it float to the right?

Thanks for all your help!

DominicStaff
answered 10 years ago

Please send me your site for further checking.
Contact us: http://cmspioneer.com/designwall/contact-us/