Creating a navigation link plugin for WordPress
For this task, you can not write an additional plugin, since all the functions that display the “Next” and “Previous” links are already in WordPress, and here they are, respectively:
|
1 2 3 |
1. next_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); 2. previous_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); |
But for the beauty of the code, the plugin solution is a winning one. To begin with, let’s call the plugin: wp-nav-side-links – the name of the plugin should be unique. Create a wp-nav-side-links folder in the wordpress plugins folder and create a wp-nav-side-links.php file. This file will contain the main code. You’ll also need a wpnavsidelinks.css style file, a wpnavsidelinks javascript file.js, and an images folder to store the images to the styles.
The title of the plugin, denoted as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * @package WP-Nav-Side-Links */ /* Plugin Name: WP-Nav-Side-Links Plugin URI: https://webproggi.com/ Description: A simple navigation links plugin for wordpress. Version: 1.0.0 Author: Webproggi.ru Author URI: https://webproggi.com/ License: GPLv2 or later */ |
The plugin code itself with the functions of registering styles, scripting and defining next_post_link() and previous_post_link() functions is as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/** Install Folder */ define('WNSL_FOLDER', '/' . dirname( plugin_basename(__FILE__))); /** Path for front-end links */ define('WNSL_URL', WP_PLUGIN_URL . WNSL_FOLDER); // =================== ** Setup the style and script // =================== add_action( 'init', 'wp_add_nav_side_links_style' ); add_action( 'init', 'wp_add_nav_side_links_script' ); function wp_add_nav_side_links_style(){ wp_register_style('wpnavsidelinks.css', WNSL_URL . '/wpnavsidelinks.css'); wp_enqueue_style('wpnavsidelinks.css'); } function wp_add_nav_side_links_script(){ wp_register_script( 'wpnavsidelinks.js', WNSL_URL . '/wpnavsidelinks.js'); wp_enqueue_script( 'wpnavsidelinks.js' ); } function wpnavsidelinks_shortcodenew() { $display = ''; $display .= previous_post_link('<div id="left_pos_prev_link" class="left_pos_prev_link">%link</div>', '<div class="left_pos_prev_cont"></div><div class="left_pos_prev_title"><div class="left_text"><table><tr><td><div class="left_arrow" ></div></td><td class="first_td">%title</td></tr></table></div></div>'); $display .= next_post_link('<div id="right_pos_next_link" class="right_pos_next_link">%link</div>', '<div class="right_pos_next_cont"></div><div class="right_pos_next_title"><div class="right_text"><table><tr><td class="first_td">%title</ td><td><div class="right_arrow"></div></td></tr></table></div></div>'); echo $display; } |
To install pointers to the record page, it will be enough to register in single.php the wpnavsidelinks_shortcodenew() function, which will display two links on the sides of the page at once.
To set the pointers to the middle of the height of the screen, use the following javascript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
window.onload = function() { determine the height var myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { Non-IE myHeight = window.innerHeight; } else if( document.documentElement && document.documentElement.clientHeight) { IE 6+ in 'standards compliant mode' myHeight = document.documentElement.clientHeight; } else if( document.body && document.body.clientHeight) { IE 4 compatible myHeight = document.body.clientHeight; } var halfHeight = myHeight/2; document.getElementById("left_pos_prev_link").style.top = halfHeight-36 + 'px'; document.getElementById("right_pos_next_link").style.top = halfHeight-36 + 'px'; }; |
It remains to set the styles. The result of the plugin is as follows:
All files with the plugin are packed into an archive, which you can download here: