Do you want to add a button in WordPress that says “load more posts”? When users reach the bottom of a page, many popular platforms allow them to load more posts. We’ll show you how to add a load more posts button to WordPress in this article.
When and Why Should You Use the WordPress Load More Posts Button?
Keeping your users engaged with your content increases the number of views and, as a result, the number of subscribers.
Many blogs include an ‘Older posts’ link at the bottom of their home, blog, and archive pages. Numeric page navigation is used on some websites, which adds more context.
However, there are some websites that would benefit greatly from having an infinite scroll or a load more posts button. Photography websites, listicles, and viral content websites are just a few examples.
The ‘load more posts’ button acts as an infinite scroll instead of loading a new page. The next set of content is quickly retrieved using JavaScript. This enhances the user experience and allows them to see more of your content.
Let’s take a look at how to quickly add a load more posts button to your WordPress site.
Adding Load More Posts Button in WordPress
The first step is to download and activate the Ajax Load More plugin. See our step-by-step guide to installing a WordPress plugin for more information.
When you activate the plugin, it will add a new menu item to your WordPress admin menu called ‘Ajax Load More.’ To access the plugin’s settings page, you must first click on it.
You can change the color of your button on the settings page. You can also use infinite scroll to replace the button, which automatically loads the next batch of posts without the user having to click the button.
The next step is to add your template for displaying posts to the Ajax Load More » Repeater Template page.
The plugin includes a simple template that includes the WordPress loop for displaying posts. However, it is out of place on your website and does not match your theme.
To correct this, copy the code used by your theme to display posts on the index, archive, and blog pages.
This code is usually found in your theme’s template-parts folder. You’ll find templates for displaying various types of content in that folder. For instance, content-page.php, content-search.php, and other similar files.
The generic content.php template is what you’ll be looking for. Here’s an example from the content.php file of our demo theme:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?> <header class="entry-header"> <?php if ( is_single() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', megamentin 1000 esc_url( get_permalink() ) ), '</a></h2>' ); endif; ?> </header><!-- .entry-header --> <div class="entry-content"> <?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '<span class="screen-reader-text">', '</span>', false ) ) ); wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>', 'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%', 'separator' => '<span class="screen-reader-text">, </span>', ) ); ?> </div><!-- .entry-content --> <?php // Author bio. if ( is_single() && get_the_author_meta( 'description' ) ) : get_template_part( 'author-bio' ); endif; ?> <footer class="entry-footer"> <?php twentyfifteen_entry_meta(); ?> <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-footer --></article><!-- #post-## --> |
Once you’ve located the code, paste it into the Repeater Templates field in the plugin’s settings.
Don’t forget to save your settings by clicking the ‘Save Template’ button.
To generate the shortcode, go to the Ajax Load More » Shortcode Builder page.
You can personalize this page with a variety of options. You’ll need to choose a container type first. Look at the template you copied earlier if you’re unsure. The <div>; element is used by the majority of modern themes.
Then scroll down to the section with the button labels. The text that appears on the button can be changed here. The plugin’s default setting is ‘Older Posts,’ but you can change it to ‘Load more posts,’ or whatever you want
Finally, decide whether you want posts to load automatically or if you want users to click the load more posts button.
Your shortcode is now complete and ready to use. The output of the shortcode can be found in the right column. Copy and paste the shortcode into a text editor because you’ll need it in the next step.
Adding More Posts to Your WordPress Theme Using Shortcodes
This section of the tutorial necessitates the addition of code to your WordPress theme files.
Before making any changes, make a backup of your WordPress theme.
You’ll need to locate the template files in your theme where you want to include the load more posts button. These files are usually index.php, archives.php, categories.php, and so on, depending on how your theme is organized.
You’ll need to paste the shortcode you copied earlier after the endwhile; tag in your theme.
We’ll need to put the shortcode inside the do shortcode function because we’re using it in a theme file:
|
1
|
echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]'); |
You can now save your changes and view the ‘Load more posts’ button in action by visiting your website.
We hope that this article has shown you how to add a load more posts button to your WordPress site.
Comments are closed.