how to add load more button in wordpress without plugin

How to Add Load More Button in WordPress Without PluginIf you have a WordPress website, you might have faced the issue of long pages with a lot of content, especially when it comes to blog posts or product listings. In order to make user experience better and improve the loading speed of your website, you can add a load more button that allows readers to see more content with just one click. In this article, we will show you how to add a load more button in WordPress without using a plugin.Step 1: Create a New Page TemplateThe first step is to create a new page template that will include the load more button. You can do this by going to your WordPress dashboard and selecting Appearance > Theme Editor. From there, select the file named page.php and copy the entire code to a new file. Rename this file as page-loadmore.php and add the following code at the very beginning:This code will create a new page template named Load More.Step 2: Modify the HTML of the Page TemplateThe next step is to modify the HTML of the page template to include the load more button. You can do this by adding a new div element with a unique ID, which will be used to load more content via AJAX. Here is an example code:

Latest Posts:

Load MoreIn this example code, we have added a div element with an ID of \"load-more-container\" that will contain the latest posts. We have also added a button element with an ID of \"load-more-button\" that will trigger the AJAX call to load more content.Step 3: Add JavaScript CodeThe next step is to add JavaScript code to make the load more button work. You can do this by adding the following code to your theme's functions.php file or to a new file named loadmore.js:jQuery(function($){ $(document).on('click', '#load-more-button', function(){ var button = $(this), data = { 'action': 'loadmore', 'query': load_more_params.posts, 'page': load_more_params.current_page }; $.ajax({ url : load_more_params.ajaxurl, data : data, type : 'POST', beforeSend : function ( xhr ) { button.text('Loading...'); success : function( data ){ if( data ) { button.text( 'Load More' ).prev().append(data); load_more_params.current_page ; if ( load_more_params.current_page == load_more_params.max_page ) button.remove(); } else { button.remove(); } } }); });});This JavaScript code uses the jQuery library to make an AJAX call to load more content when the load more button is clicked. You will need to replace the \"load_more_params\" variables with your own custom variables that will hold the necessary information for the AJAX call.Step 4: Add Load More Functionality in Functions.phpThe final step is to add the load more functionality in your theme's functions.php file. You can do this by adding the following code:add_action('wp_ajax_loadmore', 'load_more_ajax_handler');add_action('wp_ajax_nopriv_loadmore', 'load_more_ajax_handler'); function load_more_ajax_handler(){ $query = new WP_Query( $_POST['query'] ); if( $query->have_posts() ) : while( $query->have_posts() ): $query->the_post(); get_template_part( 'content', get_post_format() ); endwhile; endif; wp_reset_postdata(); die();}This PHP code will handle the AJAX call and load more content when the load more button is clicked.Conclusion:Adding a load more button in WordPress without using a plugin is not a difficult task. By following these steps, you can add this functionality to your website and make user experience better. With this technique, you can reduce the loading time of large pages and provide a better browsing experience to your users.