Changing the format of "Next" and "Previous" posts

• 

  notchangingmyname · Member · Jul 26, 2012 at 1:47 pm

  • Copy link
  • Add topic to favorites

  At the bottom of my page, after the post and then after the comments, are the links for my last and my next post. Right now it displays the actual title of the post, but I’m thinking i would like to change it to say “Previous post” and “Next post”. Is it possible to do that with CSS? Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  notchangingmyname · Member · Jul 26, 2012 at 2:06 pm

  • Copy link

  Actually, after thinking about it more I’d like it to say “Next post: (title of blog post)” and “Previous post: (title of blog post)”. Thanks again!

• 

  thesacredpath · Member · Jul 27, 2012 at 6:46 am

  • Copy link

  You can do this, but you lose the grey background

  .nav-previous a, .nav-next a {
  visibility: hidden;
  }
  
  .nav-previous a:before {
  content: "« Previous";
  visibility: visible !important;
  }
  
  .nav-previous a:after {
  content: "Next »";
  visibility: visible !important;
  }

• 

  thesacredpath · Member · Jul 27, 2012 at 6:49 am

  • Copy link

  Actually you can get the grey background back by adding a background declaration and padding to the last two rules I listed above.

  .nav-previous a:before {
  content: “« Previous”;
  visibility: visible !important;
  background-color: #eee;
  padding: 10px;
  }

  .nav-previous a:after {
  content: “Next »”;
  visibility: visible !important;
  background-color: #eee;
  padding: 10px;
  }`

• 

  thesacredpath · Member · Jul 27, 2012 at 6:52 am

  • Copy link

  Oops, I forget a code tag.

  .nav-previous a:before {
  content: "« Previous";
  visibility: visible !important;
  background-color: #eee;
  padding: 10px;
  }
  
  .nav-previous a:after {
  content: "Next »";
  visibility: visible !important;
  background-color: #eee;
  padding: 10px;
  }

• 

  wearelocalguides · Member · Jul 27, 2012 at 7:56 am

  • Copy link

  Thanks for posting this code. For my site it comes up as one link that serves as a ‘next’ link, not as two separate links – next and previous.

  I am using the Chunk theme:
  http://wearelocalvancouver.wordpress.com/
  Click on “west side” and scroll down to see what I mean.

  Is there something I can add/change to the code that will solve this problem?

  Thanks!

• 

  thesacredpath · Member · Jul 27, 2012 at 6:51 pm

  • Copy link

  @wearelocalguides, since you are using a different theme, please start a new thread to prevent confusion on this one. CSS is theme specific so putting a solution for you here could confuse people finding this thread later on.

• 

  notchangingmyname · Member · Jul 30, 2012 at 8:40 pm

  • Copy link

  Helpful as always thesacredpath, thanks!!! I will give it a try tomorrow.

• 

  thesacredpath · Member · Jul 30, 2012 at 9:42 pm

  • Copy link

  You are welcome.