#20 Pagination Design

Amy Marsh Is A Fashion Technologist In Training



Second day running at the Timberyard and I am re-designing the pagination. It is only a small section of the blog but after all it is the little things that matter! So I am giving it ‘the Fashion Technologist’ touch to create a stronger overall brand aesthetic.


This is a simple task and should only take you an hour or so to complete, so let’s get started!



To start this re-design of the pagination I first searched for the function which brought in the pagination.

I discovered it was these two functions:



From this I then searched for ‘toolbox_content_nav’ in the function.php file.

I changed the code in this function to this:



What I have done is change what is displayed on the site by editing these two lines:


I have added a font awesome arrow and changed the text to say Next and Previous. NB- You will need to have added font awesome to your website for these to show, you can find out how to do this in the post which adds fixed social media buttons.


Next I added this styling to the bottom of the style.css file:



I have decided to add a different style to the single blog post pagination therefore I have added the bottom two styles to remove the bottom-border from each single blog post page:




Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!



Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">