- 5 years ago
- Zaid Bin Khalid
- 19363 Views
-
8
WordPress is very powerful and the word number one CMS. WordPress allows the developer to change its core functionality to some extent. You have two ways to modify the WordPress Core. So, in this post, I am going to tell you how you can do that. I am using Bootstrap 4.
First option : Pluggable functions
This can be done in the theme’s functions.php file. You can check the list of the Pluggable Functions here.
Second option : Filter and Action hooks
- Filter hooks can be used to modify vars inside the core WordPress process.
- Action hooks can be used to fire custom function on some events.
So: you can create your own filter and action hooks in your theme or plugin.
If you follow the WordPress coding standards, you should be able to deeply modify the behavior of WordPress. In this post, I am going to use Filter Hooks to change the Next and Previous Post Links example is given below.
To display simple WordPress default post links you can use the core function posts_nav_link().
<?php posts_nav_link( $sep, $prelabel, $nextlabel ); ?>
Step 1
Open your theme functions.php file and add below snippet code in it. After that you just need to refresh your page.
function filter_single_post_pagination($output, $format, $link, $post){
$title = get_the_title($post);
$url = get_permalink($post->ID);
$class = 'btn btn-primary btn-lg my-2 text-limit btn-block';
$rel = 'prev';
if('next_post_link' === current_filter()){
$class = 'btn btn-primary btn-lg my-2 text-limit btn-block';
$rel = 'next';
}
return "<a href='$url' rel='$rel' class='$class'>$title</a>";
}
add_filter( 'previous_post_link', 'filter_single_post_pagination', 10, 4);
add_filter( 'next_post_link', 'filter_single_post_pagination', 10, 4);
If you want to display the limited characters of next and previous links you can do that with the help of CSS. Open your theme style.css file and paste below code in it. After that, refresh your page the links look like as shown in below image.
.text-limit {
width: 100%;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
With limited characters
Remember: I used Bootstrap default classes to make Next and Previous Links.
You can use your own classes. For that, you need to change the function.
function filter_single_post_pagination($output, $format, $link, $post){
$title = get_the_title($post);
$url = get_permalink($post->ID);
$class = 'YOUR-CLASS-NAME text-limit';
$rel = 'prev';
if('next_post_link' === current_filter()){
$class = 'YOUR-CLASS-NAME text-limit';
$rel = 'next';
}
return "<a href='$url' rel='$rel' class='$class'>$title</a>";
}
add_filter( 'previous_post_link', 'filter_single_post_pagination', 10, 4);
add_filter( 'next_post_link', 'filter_single_post_pagination', 10, 4);
The above function is just an example for you. Replace your own class name with YOUR-CLASS-NAME text. After that, you need to refresh your page to see the changes.
- 5 years ago
- Zaid Bin Khalid
- 19363 Views
-
8