Style Single Post Navigation The Same As Your Themes Buttons

Here’s the result of what this code produces when added to the Genesis Sample child theme by StudioPress.

style post navigation

The code below uses your themes existing CSS for buttons to style both the previous and next post links after all single posts.

Simply change the class name in the PHP from button to whatever your theme uses if you want to style your single post navigation links the same as your themes buttons.


Comments

6 responses to “Style Single Post Navigation The Same As Your Themes Buttons”

  1. Hi Brad,

    As a new user of Genesis I’ve followed some of your tutorials, the jetpack restyling and social icons worked a treat!

    I’m struggling with this one as I cant work out how to make this work in agency pro. I’ve pasted the code in and get the buttons, but they flash yellow and I have chosed the blue splash in my theme.

    Any help would be great

    Keep up the good work!

    Scott

    1. Brad Dalton Avatar
      Brad Dalton

      You would need to copy the code for your buttons and modfiy the values for the color in that case if you want to change the default color.

      1. Hi Brad

        I’ve tries that but changing the values in the css doesn’t change it.

        1. Brad Dalton Avatar
          Brad Dalton

          Are you using the same classes as what the PHP generates?

          Are they the same as what your default buttons use?

          1. How do I check my classes Brad, I’m using agency pro. Essentially all I’ve done is pasted your codes, it looks great just flashes the wrong colour

          2. Brad Dalton Avatar
            Brad Dalton

            ALL the code i publish has been tested and works as proven by the screenshots.

            If you want to modify the code, it may require some work on your behalf.

            Changing the color requires changing the hex color code value for the right class.

            You will need to search your style sheet using a tool like Notepad++ for the correct classes and change the value for the background-color.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.