Shane Daly Digital recently worked with a Mayo based trivia lover to create a new table quiz resource website. This site required a lot of customisation with custom post types and custom functionality. Most of the customisation was specific to a trivia based site, however one area we ended up customising that could be applied to most sites was the Previous / Next navigation links.
The Genesis Framework has a handy little action to enable previous/next navigation; you simply have to enter the following code into your functions.php file.
After adding the code this is what we have:
We have the name of the quiz followed by two directional arrows, all placed on top of the ‘Leave a Reply’ section. This is fine but we wanted to tweak it a little to customise it for our needs.
We created the following function :
This gives us an overall div with class of ‘prev-next-navigation’, inside of which is a div with class of ‘previous’ and another div with class of ‘next’.
Inside the div with class of previous we have some custom text ‘Previous Quiz’ followed by the quiz title inside of a link. Similar for the div with class of next.
Refreshing the page gives us the following result:
This is exactly what we want in regards our text but the styling leaves a little something to be desired. This is where our three classes become useful. We can use the outermost div with a class of ‘prev-next-navigation’ to style the general area of the links and the ‘prev’ and ‘next’ classes to style the links themselves.
Add the following code to style.css:
This floats the previous quiz to the left and the next quiz to the right and also creates some space between the links and the ‘Leave a Reply’ section.
In our code above we used (is_singular( ‘post’ )) to target all posts. In actuality we had created a custom post type of ‘quizzes’ and targeted it here. Not everyone will have this custom post type so we used ‘post’ as it will apply to more people.
You may want to add a media query to the classes of ‘prev’ and ‘next’ removing the float on smaller devices depending on the length and font size of your titles. Large titles may look awkward squeezed side by side and may look better stacked on top of each other.
So that’s it for now! A nice and simple tutorial to add a little custom feel to your site.