L
ADING

How to Add Load More Posts Button in WordPress

Do you want to add a load more posts button in WordPress? Many popular platforms allow users to load more posts when they reach to the bottom of the page. In this article, we will show you how to easily add a load more posts button in WordPress.

How to add load more posts button in WordPress

When and Why Add Load More Posts Button in WordPress

Keeping your users engaged with the content helps you get more views and ultimately more subscribers.

Many blogs use the simple ‘Older posts’ navigation link at the end of their home, blog, and archive pages. Some websites use numeric page navigation which adds more context.

However, there are certain type of websites that can benefit immensely from infinite scroll or load more posts button. Some examples include: photography websites, listicles, and viral content websites.

Instead of loading a whole new page, ‘load more posts’ button works like infinite scroll. It uses JavaScript to quickly fetch the next set of content. This improves user experience and gives them a chance to view more of your content.

That being said, let’s take a look at how to easily add load more posts button in your WordPress site.

Adding Load More Posts Button in WordPress

First thing you need to do is install and activate the Ajax Load More plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled ‘Ajax Load More’ to your WordPress admin menu. You need to click on it and head over to the plugin’s settings page.

Ajax Load More settings

On the settings page, you can choose the color of your button. You can also replace the button with infinite scroll which loads next batch of posts automatically without users clicking on the button.

Next, you need to visit Ajax Load More » Repeater Template page to add your template for displaying posts.

The plugin comes with a basic template containing the WordPress loop to display posts. However, it does not match your theme and may look out of place on your website.

To fix this, you need to copy the code your theme uses to display posts on index, archive, and blog pages.

Normally, this code is located in the template-parts folder of your theme. In that folder, you will see templates to display different content. For example content-page.php, content-search.php, and more.

You will be looking for the generic content.php template. Here is an example from our demo theme’s content.php file:

<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">', 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 find that code, you need to paste it inside the Repeater Templates field in plugin settings.

Don’t forget to click on the ‘Save Template’ button to store your settings.

Next, you need to visit Ajax Load More » Shortcode Builder page to generate the shortcode.

This page contains many different options that you can customize. First you will need to select the container type. If you are unsure, just look at the template you copied earlier. Most modern themes use the <div>; element.

After that scroll down to the button labels section. Here you can change the text that appears on the button. By default, plugin uses ‘Older Posts’, and you can change that to ‘Load more posts’ or anything you want.

Button label

Lastly, you need to choose whether you want posts to load automatically or wait for users to click on the load more posts button.

Disable scroll

Your shortcode is now ready to be used. In the right column, you will see the shortcode output. Go ahead and copy the shortcode and paste it in a text editor as you will need it in the next step.

Shortcode output

Adding Load More Posts in Your WordPress Theme

This part of the tutorial requires you to add code into your WordPress theme files. If you haven’t done this before, then take a look at our guide on how to copy and paste code in WordPress.

Don’t forget to backup your WordPress theme before making any changes.

You will need to find the template files where you want to add the load more posts button in your theme. Depending on how your theme is organized, usually these files are index.php, archives.php, categories.php, etc.

You will need to add the shortcode you copied earlier into your theme right after the endwhile; tag.

Since we are adding the shortcode in a theme file, we will need to add it inside the do_shortcode function, like this:


echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]'); 			

You can now save your changes and visit your website to see the ‘Load more posts’ button in action.

Click to load more posts button preview

We hope this article helped you learn how to add load more posts button in WordPress. You may also want to see our mega list of the most useful WordPress tips, tricks, and hacks for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Load More Posts Button in WordPress appeared first on WPBeginner.

How to Style WordPress Navigation Menus

Do you want to style your WordPress navigation menus to change their colors or appearance? While your WordPress theme handles the appearance of your navigation menus, you can easily customize it using CSS to meet your requirements. In this article, we will show you how to style the WordPress navigation menus on your site.

Styling navigation menus in WordPress

We will be showing two different methods. The first method is for beginners because it uses a plugin and does not require any code knowledge. The second method is for intermediate DIY users who prefer to use CSS code instead of a plugin.

Method 1: Styling WordPress Navigation Menus Using a Plugin

Your WordPress theme uses CSS to style navigation menus. Many beginners are not comfortable with editing theme files or writing CSS code on their own.

That’s when a WordPress styling plugin comes in handy. It saves you from editing theme files or writing any code.

First you need to do is install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

WPBeginner users can use use this CSS Hero Coupon to get 34% discount on their purchase.

Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.

Next, you need to click on the CSS Hero button in your WordPress admin toolbar.

Launch CSS Hero

CSS Hero offers a WYSIWYG (What you see is what you get) editor. Clicking on the button will take you to your website with a floating CSS Hero toolbar visible on screen.

CSS Hero Toolbar

You need to click on the blue icon at the top to start editing.

After you click the blue icon, take your mouse to your navigation menu, and CSS Hero will highlight it by showing the borders around it. When you click on the highlighted navigation menu, it will show you the items that you can edit.

Point and click to customize menu

In the screenshot above, it shows us top navigation menu container. Let’s assume we want to change the background color of our navigation menu. In that case, we will select top navigation which affects our entire menu.

CSS Hero will now show you different properties that you can edit like text, background, border, margins, padding, etc.

CSS properties

You can click any property that you want to change. CSS Hero will show you a simple interface where you can make your changes.

Change appearance of an element

In the screenshot above, we selected background, and it showed us a nice interface to select background color, gradient, image, and more.

As you make changes, you will be able to see them live in the theme preview.

Live preview of your CSS changes

Once you are satisfied with the changes, click on the save button in CSS Hero toolbar to save your changes.

The best thing about using this method is that you can easily undo any changes that you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.

Method 2: Manually Style WordPress Navigation Menus

This method requires you to manually add custom CSS and is meant for intermediate users.

WordPress navigation menus are displayed in an unordered list (bulleted list).

Typically if you use the default WordPress menu tag, then it will display a list with no CSS classes associated with it.

<?php wp_nav_menu(); ?>

Your unordered list would have the class name ‘menu’ with each list item having its own CSS class.

This might work if you only have one menu location. However, most themes have multiple locations where you can display navigation menus.

Using only the default CSS class may cause conflict with menus on other locations.

This is why you need to define CSS class and menu location as well. Chances are that your WordPress theme is already doing that by adding the navigation menus using a code like this:

<?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
         ) );
?>

This code tells WordPress that this is where the theme displays primary menu. It also adds a CSS class primary-menu to the navigation menu.

Now you can style your navigation menu using this CSS structure.

// container class
#header .primary-menu{} 

// container class first unordered list
#header .primary-menu ul {} 

//unordered list within an unordered list
#header .primary-menu ul ul {} 

 // each navigation item
#header .primary-menu li {}

// each navigation item anchor
#header .primary-menu li a {} 

// unordered list if there is drop down items
#header .primary-menu li ul {} 

// each drop down navigation item
#header .primary-menu li li {} 

// each drap down navigation item anchor
#header .primary-menu li li a {} 

You will need to replace #header with the container CSS class used by your navigation menu.

This structure will help you completely change the appearance of your navigation menu.

However, there are other WordPress generated CSS classes automatically added to each menu and menu item. These classes allow you to customize your navigation menu even further.

// Class for Current Page
.current_page_item{} 

// Class for Current Category
.current-cat{} 

// Class for any other current Menu Item
.current-menu-item{} 

// Class for a Category
.menu-item-type-taxonomy{}
 
// Class for Post types
.menu-item-type-post_type{} 

// Class for any custom links
.menu-item-type-custom{} 

// Class for the home Link
.menu-item-home{} 

WordPress also allows you to add your own custom CSS classes to individual menu items.

You can use this feature to style menu items, like adding image icons with your menus or by just changing colors to highlight a menu item.

Head over to Appearance » Menus page in your WordPress admin and click on the Screen Options button.

Enable CSS classes option for individual menu items

Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.

Adding a custom CSS class to a menu item in WordPress

Now you can use this CSS class in your stylesheet to add your custom CSS. It will only affect the menu item with the CSS class you added.

Examples of Styling Navigation Menus in WordPress

Different WordPress themes may use different styling options, CSS classes, and even JavaScript to create navigation menus. This gives you a lot of options to change those styles and customize your navigation menus to meet your own requirements.

The inspect tool in your web browser will be your best friend when it comes to figuring out which CSS classes to change. If you haven’t used it before, then take a look at our guide on how to use inspect tool to customize WordPress themes.

Basically, you just need to point the cursor to the element you want to modify, right click and then select Inspect tool from browser’s menu.

Using inspect tool to look up for CSS classes to modify

That being said, let’s take a look at some real life examples of styling navigation menus in WordPress.

1. How to Change Font Color in WordPress Navigation Menus

Here is the sample custom CSS that you can add to your theme to change font color of navigation menus.

#top-menu  li.menu-item a {
color:#ff0000;
} 

In this example, the #top-menu is the ID assigned to the unordered list that displays our navigation menu. You will need to use the inspect tool to find out the ID used by your theme.

Changing font color of WordPress navigation menus

2. How to Change Background Color of Navigation Menu Bar

First you’ll need to find out the CSS ID or class used by your theme for the container surrounding navigation menu.

Finding CSS class for navigation menu container

After that you can use the following custom CSS to change background color of navigation menu bar.

.navigation-top { 
background-color:#000; 
}

Here is how it looked on our demo website.

Changing background color of navigation menu bar

3. How to Change Background Color of a Single Menu Item

You may have noticed that many websites use a different background color for the most important links in their navigation menu. This link could be a login, sign up, contact, or buy button. By giving it a different color, it makes the link more noticeable.

To achieve this, we will add a custom CSS class to the menu item that we want highlight with a different background color.

Head over to Appearance » Menus and click on the Screen Options button at the top right corner of the screen. This will bring up a fly down menu where you need to check the box next to ‘CSS classes’ option.

Enable CSS classes option for individual menu items

After that you need to scroll down to the menu item that you want to modify and click to expand it. You will notice a new option to add your custom CSS class.

Adding custom css class to a menu item

Now you can use this CSS class to style that particular menu item differently.

.contact-us { 
background-color: #ff0099;
border-radius:5px;
}

Here is how it looked on our test site.

Changing background color of a single menu item in WordPress navigation menus

4. Adding Hover Effects to WordPress Navigation Menus

Do you want your menu items to change colors on mouse-over? This particular CSS trick makes your navigation menus look more interactive.

Simply add the following custom CSS to your theme.

#top-menu  li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
} 

In this example, #top-menu is the CSS ID used by your theme for the unordered navigation menu list.

Here is how this looked on our test site.

Mouseover effect in WordPress navigation menus

5. Create Sticky Floating Navigation Menus in WordPress

Normally navigation menus appear on top and disappear as a user scrolls down. Sticky floating navigation menus stay on top as a user scrolls down.

You can add the following CSS code to your theme to make your navigation menus sticky.

#top-menu {
    background:#2194af;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: right;
    padding-right:30px
}

Simply replace #top-menu with the CSS ID of your navigation menu.

Here is how it looked in our demo:

Sticky navigation menu

For more detailed instructions and alternate method, see our guide on how to create a sticky floating navigation menu in WordPress.

6. Create Transparent Navigation Menus in WordPress

Many websites use large or fullscreen background images with their call to action buttons. Using transparent menus makes your navigation blend in with the image. This makes users more likely to focus on your call to action.

Simply add the following sample CSS to your theme to make your navigation menus transparent.

#site-navigation { 
background-color:transparent; 
}

This is how it looked on our demo site.

Transparent navigation menus in WordPress

Depending on your theme, you may need to adjust the position of the header image so that it covers the area behind your transparent menus.

We hope this article helped you learn how to style WordPress navigation menus. You may also want to see our guide on how to add mobile-ready responsive WordPress menu.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Style WordPress Navigation Menus appeared first on WPBeginner.

How to Remove Date and Time from WordPress Comments

Do you want to remove dates from the WordPress comments area on your website? Recently bloggers have been wanting to remove comment dates to make their comments look fresh and evergreen. In this article, we will show you how to remove dates from WordPress comments.

Removing date and time from WordPress comments

Should you Remove Date from WordPress Comments?

Some users believe that hiding date and time in WordPress will prevent their articles from looking dated thus improving their improve WordPress SEO and search engine rankings.

We disagree with this sentiment. In fact, we believe removing dates can be quite problematic.

You can see our article on why you should not remove dates from WordPress posts for more details.

Same arguments are true for your WordPress comments as well. Removing date and time from comments will hide important information which would make older comments look odd.

However, we understand that some users may be using comments differently than normal web comments. For example, on a WordPress intranet or a web application.

In that case, they may need to remove date or time from WordPress comments to meet their requirements.

That being said, let’s take a look at how to easily remove date and time from WordPress comments.

Removing Date and Time from WordPress Comments

This tutorial requires you to edit your WordPress theme files. If you haven’t done this before, then please take a look at our guide on how to copy and paste code in WordPress.

First you need to add the following code in your theme’s functions.php file or in a site-specific plugin.

// Remove comment date
function wpb_remove_comment_date($date, $d, $comment) { 
	if ( !is_admin() ) {
    	return;
	} else { 
		return $date;
	}
}
add_filter( 'get_comment_date', 'wpb_remove_comment_date', 10, 3);

// Remove comment time
function wpb_remove_comment_time($date, $d, $comment) { 
	if ( !is_admin() ) {
    		return;
	} else { 
			return $date;
	}
}
add_filter( 'get_comment_time', 'wpb_remove_comment_time', 10, 3);

You can now visit any post with comments on your website, and you will see the date and time are no longer visible.

Date and time removed from comments

However, you may also find preposition words like ‘at’ or ‘posted on’ left behind.

To remove them, you need to point the cursor to those words and right-click to select ‘Inspect’ from the browser menu.

CSS class surrounding date and time in comments

Next, you need to note the CSS class used in the surrounding div or span around date/time in your theme.

After that you need to add the following custom CSS to your theme to hide this information:

.comment-time { 
display:none; 
}

You can now save your changes and visit your website to see it in action.

No date / time with WordPress comments

That’s all you have successfully removed date and time from WordPress comments.

Please note that this method does not remove comment dates and time from your WordPress database. Removing the code will immediately start displaying date and time for WordPress comments on your site.

We hope this article helped you learn how to easily remove date and time from WordPress comments. You may also want to see our list of the must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Remove Date and Time from WordPress Comments appeared first on WPBeginner.