Nextgen Gallery is the famous gallery plugin which provides various options to display the eye-catching galleries in your WordPress websites.  In my personal experience, I have faces many struggles since the day I started blogging in WordPress. Especially all my websites are gallery related. Obviously ,Nextgen Gallery was the first preference.

It’s a free plugin which has many options to customize and display the varieties of look in your gallery. Across all ,I personally like Nextgen Gallery Image browser. This one will display an image when the user clicks on a thumbnail of the gallery image along with Previous and Next button. But those buttons will be displayed below the image which is hard to notice.

Every time user has to scroll down to navigate to the next image. I found it frustrating. I had a plan to customize the gallery styles and settings. Surfed the internet, but no luck. After many days collection of information from various reputed websites, I found the solution to how to Prev and next button on top of the image in Nextgen gallery Image Browser.

When you do the steps right, your image browser gallery will look like the image below :

Nextgen Gallery Image Browser
Result from one of my website



Steps to add Prev and Next Button on Top of Image Browser Nextgen Gallery

  1.  You should have access to the file manager of your hosting package. If you don’t have, contact your web developer to give access or share this post with him/her to make it live on  your website.
  2. Once logged in to the hosting , you will be able to locate file manager .  File Manager
  3. Click the File Manager . This will redirect to the file repository where you can access all your WordPress files.  Generally all your new WordPress installations will come under Public Html folder.Public html folder in hosting
  4. Under this folder you will be able to find your website folder where all the WordPress core files and uploads, images will be stored. Select your website folder.
  5.  Your website folder will contain three important folder . For us “wp-content” is what is required now.  Select that folder.
  6. To make the navigation simple from here ,  select the respective folders in this order:   /plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_imagebrowser/templates/nextgen_basic_imagebrowser.php

  7.   Well nextgen_basic_imagebrowser.php is the file we need to edit.
  8. Select the file and right click to get the edit option ( it may varies on different hosting providers ) and click edit. This will open an online code editor.
  9.  Search for this block of code . Copy the below mentioned code set Image Browser Gallery Code
  10.  Paste it above the below-mentioned code set.Image Browser Gallery Code 1
  11. Save the file and close the editor.

Well, Congratulations you’re done. Now refresh the folder.  Now go to your website and empty the cache and reload it again. You will be able to see the prev and next button on top of the image too ( refer result image on top of the article) .

Please write your comments, if you need more information or having a doubts regarding the steps mentioned.