This tutorial shows you how to add a load more button to your WordPress Gallery block. On initial page load, only some of your gallery images will display. When your button is clicked, more gallery images display.
You can :
- Choose how many gallery images you want displayed on initial page load
- Choose how many images you want displayed on button click
- By default, the code displays 2 images initially and then 2 every time the button is clicked however you can easily change this in code and exact line numbers are provided below showing you how too easily modify this number.
Installation Steps
There’s only 3 simple steps :
- Upload the file named load-more.js to your child theme folder
- Copy and paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions file.
- Using the block editor, Insert a button after your gallery and add the class load-more to the Advanced > Additional CSS Classes field as seen in the following screenshot :
Code Modification
If you want to load more than 2 images, modify the number 2 in the code on line 6 which is set to load 2 images initially and the number 2 in the code on line 18 to set how many images to show on button click.
Leave a Reply