{"id":9394,"date":"2022-04-25T15:30:34","date_gmt":"2022-04-25T05:30:34","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=9394"},"modified":"2022-12-03T06:59:38","modified_gmt":"2022-12-02T19:59:38","slug":"admin-post-navigation-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/admin-post-navigation-in-wordpress\/","title":{"rendered":"Admin Post Navigation in WordPress"},"content":{"rendered":"<div class=\"mp_wrapper\">\n  <div class=\"mepr-unauthorized-excerpt\">\n    <p>In this <a rel=\"noreferrer noopener\" href=\"\/membership\/\" target=\"_blank\">members-only<\/a> tutorial, we share JS and CSS customizations to make <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/admin-post-navigation\/\" target=\"_blank\">Admin Post Navigation<\/a> plugin work and improve the appearance of the previous and next buttons tooltips.<\/p>\n<p>Admin Post Navigation is a plugin that adds links to previous and next items when viewing an individual post\/page\/CPT edit screen in WordPress for all post types out of the box.<\/p>\n<p>The problem with the plugin (v2.1 as of today) is that it <a href=\"https:\/\/wordpress.org\/support\/topic\/new-gutenberg-editor-breaks-this-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\">does not work with Gutenberg<\/a>.<\/p>\n<p>There's a newer plugin called <a href=\"https:\/\/wordpress.org\/plugins\/buttons-to-edit-next-previous-post\/\" target=\"_blank\" rel=\"noreferrer noopener\">Buttons to Edit Next\/Previous Post<\/a> but it adds the buttons only for posts and pages and not other CPTs and no filter is provided for this.<\/p>\n<p>Admin Post Navigation offers more flexibility by providing filters - for example to change the previous and next text.<\/p>\n<p>We shall<\/p>\n<ul class=\"wp-block-list\">\n<li>move the admin post nav into the edit post header settings so the previous and next links aren't hidden anymore in the WordPress Gutenberg editor<\/li>\n<li>add WP editor classes to the previous and next links so they look like buttons<\/li>\n<li>use CSS to replace the regular titles with larger tooltips<\/li>\n<li>change the text for the \"previous\" button to \"Older \u2192\"<\/li>\n<li>change the text for the \"next\" button to \"\u2190 Newer\"<\/li>\n<\/ul>\n<p>For Pages:<\/p>\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2022\/04\/admin-post-navigation-customizations-WordPress-page-1024x372.png\" alt=\"\" class=\"wp-image-9396\" \/><\/figure>\n<p>For Posts (and Custom Post Types):<\/p>\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2022\/04\/admin-post-navigation-customizations-WordPress-post-1024x461.png\" alt=\"\" class=\"wp-image-9397\" \/><\/figure>\n<h2 class=\"wp-block-heading\">Step 1<\/h2>\n<p>Install and activate Admin Post Navigation plugin.<\/p>\n<h2 class=\"wp-block-heading\">Step 2<\/h2>\n<p>Install and activate <a rel=\"noreferrer noopener\" href=\"https:\/\/wpdevdesign.com\/go\/advanced-scripts\/\" target=\"_blank\">Advanced Scripts<\/a>.<\/p>\n<p>Note: Code for users of Code Snippets\/<a href=\"https:\/\/wpdevdesign.com\/go\/wpcodebox\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPCodeBox<\/a> is also provided below.<\/p>\n<p>Add a new script like this:<\/p>\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2022\/04\/CleanShot-2022-04-25-at-15.23.15@2x-629x1024.png\" alt=\"\" class=\"wp-image-9398\" width=\"472\" height=\"768\" \/><\/figure>\n<p>Note that <code>current_screen<\/code> is not an option for the hook that is present by default in the plugin's interface. You would need to delete the default <code>plugins_loaded<\/code> and type\/paste <code>current_screen<\/code> and press comma.<\/p>\n<p>Code:<\/p>\n  <\/div>\n  <div class=\"mepr-unauthorized-message\">\n    <p>This is a premium members-only content.<\/p>\n<p>To view the rest of the content, please <a title=\"Membership\" href=\"https:\/\/wpdevdesign.com\/membership\/\">sign up for membership ($47\/month or $599 one-time)<\/a>.<\/p>\n<p>Already a member? Log in below or <a href=\"https:\/\/wpdevdesign.com\/login\/\">here<\/a>.<\/p>\n  <\/div>\n  <div class=\"mepr-login-form-wrap\">\n            \n<div class=\"mp_wrapper mp_login_form\">\n                  <!-- mp-login-form-start -->     <form name=\"mepr_loginform\" id=\"mepr_loginform\" class=\"mepr-form\" action=\"https:\/\/wpdevdesign.com\/login\/\" method=\"post\">\n            <div class=\"mp-form-row mepr_username\">\n        <div class=\"mp-form-label\">\n                              <label for=\"user_login\">Username<\/label>\n        <\/div>\n        <input type=\"text\" name=\"log\" id=\"user_login\" value=\"\" \/>\n      <\/div>\n      <div class=\"mp-form-row mepr_password\">\n        <div class=\"mp-form-label\">\n          <label for=\"user_pass\">Password<\/label>\n          <div class=\"mp-hide-pw\">\n            <input type=\"password\" name=\"pwd\" id=\"user_pass\" value=\"\" \/>\n            <button type=\"button\" class=\"button mp-hide-pw hide-if-no-js\" data-toggle=\"0\" aria-label=\"Show password\">\n              <span class=\"dashicons dashicons-visibility\" aria-hidden=\"true\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n            <div>\n        <label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Remember Me<\/label>\n      <\/div>\n      <div class=\"mp-spacer\">&nbsp;<\/div>\n      <div class=\"submit\">\n        <input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button-primary mepr-share-button \" value=\"Log In\" \/>\n        <input type=\"hidden\" name=\"redirect_to\" value=\"\/wp-json\/wp\/v2\/posts\/9394\" \/>\n        <input type=\"hidden\" name=\"mepr_process_login_form\" value=\"true\" \/>\n        <input type=\"hidden\" name=\"mepr_is_login_page\" value=\"false\" \/>\n      <\/div>\n    <\/form>\n    <div class=\"mp-spacer\">&nbsp;<\/div>\n    <div class=\"mepr-login-actions\">\n        <a\n          href=\"https:\/\/wpdevdesign.com\/login\/?action=forgot_password\"\n          title=\"Click here to reset your password\"\n        >\n          Forgot Password        <\/a>\n    <\/div>\n\n      \n    <!-- mp-login-form-end --> \n  <\/div>\n      <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this members-only tutorial, we share JS and CSS customizations to make Admin Post Navigation plugin work and improve the appearance of the previous and next buttons tooltips. Admin Post Navigation is a plugin that adds links to previous and next items when viewing an individual post\/page\/CPT edit screen in WordPress for all post types &hellip;<\/p>\n","protected":false},"author":1,"featured_media":9397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[2,52],"tags":[496],"class_list":["post-9394","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-premium","tag-wordpress-editor"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2022\/04\/admin-post-navigation-customizations-WordPress-post.png","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2022\/04\/admin-post-navigation-customizations-WordPress-post.png","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/wpdevdesign.com\/author\/srikat\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/9394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=9394"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/9394\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/9397"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=9394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=9394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=9394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}