For most standard WordPress themes you are stuck with a boring text on the bottom of the screen with a float left and right property. This simple float looks boring however it is a simple solution for going from page to page.
The below image is what my personal blog used to have for a page navigation. This was to simple for what I wanted which made me want to change it to fit the rest of the page style. The solution was a work through of the CSS requiring a little CSS3 to make the borders rounded.
The final result looks as follows:
The first thing we are going to need to do is open up the style.css and the index.php inside of the theme you are intending to modify.
WordPress Root -> wp-content -> themes -> theme_name
Once you have opened up the two files, refer to the index.php and scroll down past the post loops to get to your code that checks for posts and allows you to go forward and backwards in post history. The code should look as follows:
<div>
<h5 class=”float-right”>
<?php previous_posts_link(‘Newer Entries →’) ?>
</h5>
<h5 class=”float-left”>
<?php next_posts_link(‘← Older Entries’) ?>
</h5>
<div></div>
</div>
As you can see there is a float class above which is in our css file as:
.float-right {
float:right;
}
We could change the float class to have a background and a border but that would change everything that uses the float class. In order to change this we are going to have to create new classes and change the index code. For this I will be changing the index code to “post_new_entries” and “post_old_entries.”
The “index.php” will now look something like this:
<div>
<h5 class=”post_new_entries”>
<?php previous_posts_link(‘Newer Entries →’) ?>
</h5>
<h5 class=”post_old_entries”>
<?php next_posts_link(‘← Older Entries’) ?>
</h5>
<div></div>
</div>
The final thing to do in this modification is to create the classes inside of the “style.css” file. The first thing that is required for the modification is for us to make them float to their designated sides just like the previous floats from before.
.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
}
The rest of the code is fully customizable and up to you. There is always the option of adding hovers and link colors as well as paddings, backgrounds and borders. The code that is currently used for code with design is as follows:
.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-left:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_old_entries a{
color:#666666;
}
.post_old_entries a:hover {
color:#333333;
}
.post_new_entries {
float:right;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-right:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_new_entries a {
color:#666666;
}
.post_new_entries a:hover {
color:#333333;
}
Best of luck with your WordPress modifications.
Related posts:
