Solved: How to add Back button to any WordPress menu

Once I needed to add a back button to a WordPress menu. It was actually a WordPress site that was built for a information display touch screen booth and there was a need for a back button.

 

A possibly long story short, here is how you can add a back button to a menu in WP with no plugins.

 

1. Create your menu item with your desired text (“Back” ?) in your menu and set its URL to be # (just a hash sign). Save the menu.

2. See your site frontend now, right click the menu item and select Inspect or Inspect Element etc, depending on your browser, to see the HTML of that menu item.

3. From the HTML locate the menu item ID.

4. Back to the admin, now you need to edit the functions.php file to add some functionality to this menu item. To do this navigate to Appearance -> Editor

5. Open the functions.php for editing and to the bottom of that file insert this code to trigger a JavaScript “one-back-in-history” action every time the Back menu item gets pressed.

Replace #menu-item-230 with your actual menu item.

/*CUSTOM Menu back button*/
add_action( 'wp_footer', 'tompai_back_button' );
function tompai_back_button(){
?>
<script type = "text/javascript">
jQuery(document).ready(function(){
jQuery("#menu-item-230 a").attr('onclick', 'window.history.go(-1);');
});
</script>
<?php
}
/* END CUSTOM BACK BUTTON*/

 

Yes, do share this article as how-to reference to help others.

Post Author: Tom Pai