Dr.Blog: Studiopress tutorial, how to add next/previous links on post

This tutorial is for Studiopress (Genesis Framework) for WordPress.Org sites

This is a feature that most wordpress.org blogs don’t have added into their themes, and is probably the only thing that is missed from blogger when they move to the self-hosted wordpress platform.

this is an easy fix but does include some copy and pasting codes into your functions.php and style.css files. BEFORE YOU START THIS PLEASE BACK-UP YOUR FILES, COPY AND PASTE THE CODE INTO WORD OR NOTEBOOK BEFORE YOU MESS WITH THE CODES.

***The codes to copy from are in the link below (I have a no-right click feature on my site) OR go here for the codes

1. Go to Appearance > Editor

2. Click on Theme Functions (functions.php), this is located on the right hand side

3. Scroll all the way to the bottom, where the codes are at and copy and paste this code at the end

COPY AND PASTE CODE BELOW INTO FUNCTIONS.PHP

/** Modify post navigation */ add_action(‘genesis_before_comments’, ‘genesis_post_nav’); function genesis_post_nav(){

echo ‘<div>’;     echo ‘<div>’;     echo ‘<span>’;     echo ‘Next Post’;     echo ‘</span>’;     echo next_post_link(‘%link’, ‘%title’);     echo ‘</div>’;     echo ‘<div>’;     echo ‘<span>’;     echo ‘Previous Post’;     echo ‘</span>’;     echo previous_post_link(‘%link’, ‘%title’);     echo ‘</div>’;     echo ‘</div>’; }

4. Save

5. Now edit the Stylesheet (style.css)

6. Scroll all the way down ,like before, and add this code (don’t worry it’s already styled for you)

 

/***** End of Post Nav ********************/

.post-nav {     clear:both;     display: block;     overflow: auto;     margin: 10px 0 10px 0;     padding: 5px 0; } .post-nav span.next {     border-bottom: 1px solid #e6e6e6;     display: block;     margin-bottom: 5px; } .post-nav span.prev {     border-bottom: 1px solid #e6e6e6;     display: block;     margin-bottom: 5px; }

.post-nav a {     text-decoration: none; }

.post-nav a:hover {     text-decoration: underline; }

.next-post-nav {     float: right;     text-align: right;     width: 50%; }

.prev-post-nav {     float: left;     text-align: left;     width: 50%; }

7. SAVE and now lets see if it worked! click on your second post and you will see something like the image above on your post now…

Click HERE to copy the codes to use

 

Related posts:

Jacqui

Jacqui

HI! My name is Jacqui and I’m 25 years old. I am a blog designer and I own Wacky Jacqui’s Designs. I love designing blogs; it has really become my passion over the past year. I currently live in Las Vegas and I love it. I live in a sub city of Vegas called Centennial Hills. I am married an amazing man and have 2 children. I love being a mom and wife.
Jacqui

@JacquisBlogs

I am a mom of 2 little boys and a wife to a lovely man. I own http://www.wackyjacquisdesigns.com my blog is http://www.blog.wackyjacquisdesigns.com
From the archives:: So tired! - I have been so tired lately and I don't understand why either. I... http://t.co/jyJStfcTAm #Blogging - 1 hour ago
Jacqui


You may want to subscribe by EMAIL . Never miss a post again!



I Love Comments

*

CommentLuv badge

Comments

  1. Hi Jacqui – I tried it. It’s on my site but one below the other – just before the comment section.
    Corinne Rodrigues recently posted..The Highest Form of Flattery?My Profile

  2. Faced problems initially, but after clearing my W3 Total Cache, it worked just fine. Thanks a lot! :)
    Saksham Talwar recently posted..StudioPress Discount CodeMy Profile

  3. It worked like a charm ;) Thanks for this great tutorial with Studiopress, my favorite framework
    Robert recently posted..Studiopress Discount Code 2012 – The Only Way That WorksMy Profile