How to Add Smooth Background Color Change Effect in WordPress

Do you want to add a smooth background color change effect on your WordPress site? You may have seen on some popular websites where the background color of a specific area or the whole web page automatically transitions from one color to another. This beautiful… Read More »

The post How to Add Smooth Background Color Change Effect in WordPress appeared first on WPBeginner.

Do you want to add a smooth background color change effect on your WordPress site? You may have seen on some popular websites where the background color of a specific area or the whole web page automatically transitions from one color to another. This beautiful effect can help you get users attention and improve engagement on your website. In this article, we will show you how to easily add a smooth background color change effect in WordPress.

Adding smooth background color change effect in WordPress

What is Smooth Background Color Change Effect?

Smooth background color change effect allows you to automatically transition between different background colors. The change happens slowly going through different colors until it reaches the final color. It looks like this:

Color change effect animation

This technique is used to capture user attention with gentle effects that are pleasing to the eye.

That being said, let’s take a look at how to add this smooth background color change effect in any WordPress theme.

Adding Smooth Background Color Change Effect in WordPress

This tutorial requires you to add code in your WordPress 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 find out the CSS class of the area that you want to change. You can do this by using the Inspect tool in your browser. Simply take your mouse to the area you want to change and right click to select the Inspect tool.

Find CSS class

Next, you need to write down the CSS class you want to target. For example, in the screenshot above we want to target the widget area in the bottom which has the CSS class ‘page-header’.

In the next step, you need to open a plain text editor on your computer and create a new file. You need to save this file as wpb-background-tutorial.js on your desktop.

Next, you need to add the following code inside your JS file:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
			colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        }); 

If you study this code, then you will notice that we have used the CSS class we want to target in the code. We have also added four colors. Our smooth background effect will start from the first color, then transition to the next color, and keep cycling through these colors.

Don’t forget to save your changes to the file.

Next, you need to upload wpb-bg-tutorial.js file to your WordPress theme’s /js/ folder using FTP. If your theme doesn’t have a js folder inside it, then you need to create one.

Upload your javascript file

After uploading your JavaScript file, it is time to load it in WordPress.

You need to add the following code to your theme’s functions.php file.

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

This code properly loads the JavaScript file and the dependent jQuery script that you need for this code to work.

That’s all, you can now visit your website to see it in action. You will notice the smooth background color change effect in the area that you targeted.

There are many other ways to use background colors in WordPress to capture user attention or make your content pop-out. For example, you can try:

We hope this article helped you learn how to easily add smooth background color change effect in WordPress. You may also want to see our list of the best WordPress page builder plugins that you can try.

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 Smooth Background Color Change Effect in WordPress appeared first on WPBeginner.

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… Read More »

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

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 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.… Read More »

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

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.

How to Remove Author Name from WordPress Posts

Do you want to remove the author name from your WordPress posts? By default, WordPress does not have an option to publish articles without an author name. In this article, we will show you few different ways to remove author name from your WordPress posts.… Read More »

The post How to Remove Author Name from WordPress Posts appeared first on WPBeginner.

Do you want to remove the author name from your WordPress posts? By default, WordPress does not have an option to publish articles without an author name. In this article, we will show you few different ways to remove author name from your WordPress posts.

Remove author name from WordPress posts

Method 1: Remove Author Name from WordPress Posts Using a Plugin

This method is easier and recommended for all users. However, it may not work with all WordPress themes.

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

Upon activation, you need to visit Plugins » Show/Hide Author page to configure plugin settings.

Show/Hide Author settings

The plugin automatically hides author name for all post types. If you want to display the author name for a specific post type, then you need to select it on this screen.

Below the post types, you can also add custom URLs where you want to hide the author name.

This plugin can hide author name in most cases. However, your WordPress theme may still show accompanying text before the author name. For example, ‘by John Smith’ would now just show ‘by’.

To hide this byline, you need to visit your website and take the mouse over to the text you want to hide. Next, you need to right click and select Inspect tool from your browser menu.

Now you need to locate the div class containing your author byline.

Byline text class

Next, you need to copy the CSS class used here and then paste it in the plugin settings under Advanced options.

Add byline class to hide it

Don’t forget to click on the save changes button to store your settings.

Method 2: Manually Remove Author Name from WordPress Posts

This method requires you to edit 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.

Note: Make sure that you create backup of your theme or child theme before making any changes. If something goes wrong, then this will help you easily revert changes.

WordPress themes use different variations of code to display author name. You will need to locate the code responsible for displaying the author’s name in your theme files and delete it.

Most common locations to find this code are single.php, content.php, archive.php, and index.php files.

In many cases, you will not be able to find the code that outputs author name. Instead, you will find a template tag defined in the functions.php file or template-tags.php file.

For example, the default Twenty Seventeen theme uses the function twentyseventeen_posted_on to display author name and post date / time. This function is defined in template-tags.php file.

function twentyseventeen_posted_on() {
	// Get the author name; wrap it in a link.
	$byline = sprintf(
		_x( 'by %s', 'post author', 'twentyseventeen' ),
		'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . get_the_author() . '</a></span>'
	);
	// Finally, let's write all of this to the page.
	echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . '</span>'; // WPCS: XSS OK.
}

Now you just need to remove the code that outputs the author name. Take a look at following example:

function twentyseventeen_posted_on() {
	// Finally, let's write all of this to the page.
	echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . '</span>'; // WPCS: XSS OK.
}

Don’t forget to save your changes and upload the files back to your website.

You can now visit your website to see your changes in action:

Author name removed by manually editing theme files

Method 3: Create a Generic Author Name for Publishing WordPress Posts

This method does not remove the author name, but it can be used as a workaround.

Basically you will create a generic author name and use it for all your past and future articles. You will need to change the author name before publishing each post.

This method is irreversible. If you do this and want to revert back, then you will have to edit each post and assign it to the original author manually.

That being said, let’s get started.

First add a new author to your WordPress site and give it a generic username such as editorialteam.

Add new user

Next, you need to visit Users » All Users page and click on the ‘Edit’ link below the username you just added.

Edit user

On the user profile screen, scroll down to the ‘Nickname’ option and enter the name you want to be displayed (for example: Editorial Team).

After that click on the drop down menu next to ‘Display name publicly as’ option and select the nickname you just entered.

Select display name

You can also add a generic bio and even create a gravatar for that user account.

Now go to Posts » All Posts page and click on the screen options menu at the top. Enter 999 for number of items to display.

Show all posts on screen

This will allow you to quickly edit and change author name for a large number of posts.

You need to select all posts using the checkbox and then select edit under the bulk actions drop down menu. After that click on the ‘Apply’ button to continue.

Select all posts for bulk editing

WordPress will now show you the bulk editing options. You need to change the author to the generic author name you added earlier and then click on update button.

Bulk change author name

WordPress will now update all selected posts and change author name. Remember, this process may take some time depending on how fast your WordPress hosting is.

If you have more than 999 posts, then you will need to go to page 2 and repeat the process.

That’s all, you can now visit your website to see it in action.

Team author name

We hope this article helped you learn how to remove author name from WordPress posts. You may also want to see our list of 25 effective ways to monetize your website.

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 Author Name from WordPress Posts appeared first on WPBeginner.

How to Find Which WordPress Theme a Site is Using

Have you ever wanted to find out which WordPress theme a website is using? Often we get emails from readers asking us for help in finding the exact theme that a certain website is using. In this article, we will show you how to easily… Read More »

The post How to Find Which WordPress Theme a Site is Using appeared first on WPBeginner.

Have you ever wanted to find out which WordPress theme a website is using? Often we get emails from readers asking us for help in finding the exact theme that a certain website is using. In this article, we will show you how to easily find out which WordPress theme a specific website is using.

Which Theme is a Website is Using?

When you are starting a new website, choosing the right theme is a very important decision.

Often you have ideas and inspirations that you have seen on other websites. In some cases, you may want your website to have almost the same layout and features as another website that you saw on the internet.

This could be possible specially if that website is using one of the thousands of free and paid WordPress themes available in the market.

And thankfully, it’s quite easy to find out which WordPress theme a website is using.

Method 1. Find WordPress Theme used by a Website with IsItWP

One of the easiest way to detect WordPress theme used by a website is with IsItWP. It is an online tool that allows you to look up plugins and themes used by a WordPress website.

First, you need to visit IsItWP website and enter the URL of a website you want to check.

Looking up a website on IsItWP

IsItWP will first check if the website is using WordPress. If it is a WordPress powered website, then IsItWP will check which WordPress theme the website is using. It will also try to detect WordPress plugins used by the website.

After that, it will show you the results with more details about the plugins and theme used by the website.

WordPress theme and plugin details

IsItWP may not be able to offer you details about a custom WordPress theme or a child theme.

However it will display the name of the theme, so you can google it to see if it’s available for download.

Method 2. Manually Detect WordPress Theme Used by a Website

Sometimes website owners change the WordPress theme name. This stop tools like IsItWP to detect which WordPress theme they are using.

However, there still might be plenty of clues hidden in the code that you can detect and find the WordPress theme they are using.

Let’s get started.

Each WordPress theme is required to have a style.css file. This file contains theme header which tells WordPress the name of the theme, theme author, URI, version, etc. It also contains CSS styles used by the theme.

To locate this file, first you need to visit the website. Right click anywhere on the screen and select ‘View Page Source’ from the menu.

View page source of a WordPress website

This will open the source code of the page you are viewing in a new browser tab. Now you need to find a line in the source code that looks something like this:

<link rel='stylesheet' id='themename_style-css'  href='http://example.com/wp-content/themes/theme-name/style.css?ver=1.1.47' type='text/css' media='all' />

You can click on the URL in this line to open the style.css file.

On top of the style.css file, you will see the theme header block which contains information about the theme used by the website. Typically, it would look something like this:

Theme Name:     Theme Name 
Theme URI:      https://example.com
Author:         ThemeAuthorName
Author URI:     https://example.com
Description:    My Theme is a flexible WordPress theme designed for portfolio websites
Version:        1.1.47
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    hestia
Tags: blog, custom-logo, portfolio, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

You may be able to find the Theme’s URL or Theme Author’s URL here which will lead you to the theme used by the website.

Finding The Parent Theme

Many WordPress websites use child themes to customize their websites. In that case, their theme header will contain information about the parent theme they are using.

*
Theme Name:   My Child Theme
Description:  Just a child theme
Author:       Peter Smith
Author URL:   Write here the author's blog or website url
Template:     hestia
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  my-child-theme
*/

In the above example, this header block has an extra ‘Template’ parameter in the theme header block. This template is the parent theme used by this website.

You can also find out the parent theme by looking at the website’s source code. There you will find another style.css file loaded from another theme. This other style.css file is the parent theme’s stylesheet and clicking on it will tell you which parent theme a site is using.

That’s all for now, we hope this article helped you learn how to find which WordPress theme a site is using. You may also want to see our ultimate list of the most wanted WordPress tips, tricks, and hacks.

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 Find Which WordPress Theme a Site is Using appeared first on WPBeginner.

How to Set a Default Fallback Image for WordPress Post Thumbnails

Often new bloggers forget to set a post thumbnail (featured image) which causes the template display to break. In this article, we will show you two different ways of adding a default fallback image for WordPress Post Thumbnails.

The post How to Set a Default Fallback Image for WordPress Post Thumbnails appeared first on WPBeginner.

Do you want to set a default fallback image for WordPress post thumbnails? Featured images also known as post thumbnails are very useful in engaging users and making your articles more noticeable on social media. In this article, we will show you how to set a default fallback image for WordPress post thumbnails.

Fallback image for post thumbnails in WordPress

Why You Need a Default Fallback WordPress Post Thumbnail?

Post thumbnails or featured images is a WordPress theme feature which allows you to associate an image with your blog post or article. Depending on your theme, this image is then used on homepage, archives, or sidebar widgets.

Some WordPress themes display post thumbnail and excerpt of an article on the homepage in a grid layout. If you forget to add a post thumbnail for an article, then it will appear without a thumbnail, and your layout will look broken.

Layout broken without post thumbnail

By adding a fallback image, you can set a branded image to be used when no post thumbnail is found. This allows you to make sure that all your articles have a post thumbnail.

Another way to deal with this problem is using the Require Featured Image plugin. It makes it mandatory for all authors to add a featured image to their articles before publishing.

Having said that, let’s take a look at how to easily set a default fallback image for WordPress post thumbnails.

Method 1: Set Default Fallback Image for Post Thumbnails Using Plugin

This method is easier and recommended for all users.

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

Upon activation, you need to visit the Settings » Media page to configure plugin settings.

Default featured image settings

On this page, you need click on the ‘Select default featured image’ button to upload or select the image you would like to use as your fallback post thumbnail.

Don’t forget to click on the save changes button after selecting your featured image.

You can now visit your website to see it in action. The plugin will automatically start showing your default fallback image as post thumbnail for articles that do not have a featured image set.

Method 2: Add Fallback Image as Post Thumbnail Manually

This method requires you to add code to 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 create an image that you want to use as the default image. Next, you need to upload it to your theme’s images folder using a FTP client.

Your theme’s images folder is located inside /wp-content/themes/yur-theme/ folder. If it doesn’t have the images folder, then you need to create it.

After you have uploaded the image to your website, the next step is to tell WordPress to look for this image when a post doesn’t have its own post thumbnail.

Your WordPress theme displays post thumbnails in various places. You need to look for the_post_thumbnail() function in theme files. Typically, you’ll find it in archive.php, single.php, or content templates.

Next, you need to add the following code where you want to display post thumbnail.

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>

Don’t forget to replace default-image.jpg with your own image file name.

That’s all, you can now visit your website to see it in action.

Fallback thumbnail

Method 3: Use First Image in an Article as Post Thumbnail

This method also requires you to add code to your WordPress theme files.

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

//function to call first uploaded image in functions file
function main_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc');
  if($files) :
    $keys = array_reverse(array_keys($files));
    $j=0;
    $num = $keys[$j];
    $image=wp_get_attachment_image($num, 'large', true);
    $imagepieces = explode('"', $image);
    $imagepath = $imagepieces[1];
    $main=wp_get_attachment_url($num);
        $template=get_template_directory();
        $the_title=get_the_title();
    print "<img src='$main' alt='$the_title' class='frame' />";
  endif;
}

This code simply outputs the first image added to an article. Now we need to display this output in your theme.

To do that, you will need to edit the theme files where post_thumbnail(); function is used. Replace it with the following code.

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
  echo get_the_post_thumbnail($post->ID);
} else {
   echo main_image();
} ?>

Using first image as the post thumbnail in WordPress

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

We hope this article helped you set default fallback image for WordPress post thumbnails. You may also want to see best featured image plugins and tutorials for WordPress.

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 Set a Default Fallback Image for WordPress Post Thumbnails appeared first on WPBeginner.

How to Add a Parallax Effect to Any WordPress Theme

Recently, one of our readers asked us how to add a parallax effect to any WordPress theme? Parallax effect is a web design trend where a background image scrolls slower than foreground content. In this article, we will show you how to easily add a… Read More »

The post How to Add a Parallax Effect to Any WordPress Theme appeared first on WPBeginner.

Recently, one of our readers asked us how to add a parallax effect to any WordPress theme? Parallax effect is a web design trend where a background image scrolls slower than foreground content. In this article, we will show you how to easily add a parallax effect to any WordPress theme.

Adding parallax effect to any WordPress theme

What is a Parallax Effect?

Parallax effect is a modern web design technique where background element scrolls slower than foreground content. This effect adds depth to the background images and makes them feel interactive.

Parallax effect can be used on landing pages, longform content, sales pages, or homepage of a business website. It is a great way to highlight different sections on a lengthy page.

Many premium WordPress themes come with built-in parallax effect on their homepage. You can also use parallax effect in most WordPress page builder plugins as well.

However, not all themes have a built-in parallax effect, and you may not want to use a page builder to create custom page layouts just for a parallax effect.

Let’s take a look at how to easily add parallax background effect to any WordPress theme.

Method 1: Add Parallax Effect to Any WordPress Theme Using Plugin

This method doesn’t require you to add any code to your WordPress theme. It is easier and recommended for most users.

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

Upon activation, you need to edit the page or post where you want to add the parallax effect. You will notice the new ‘Advanced WordPress Backgrounds’ button in the visual editor.

WordPress advanced background button

Clicking on it will bring up a popup where you can change different settings for the background you want to add.

First, you need to select an image as your background type and then check the ‘stretch’ option.

Parallax background settings

Next, you need to click on the ‘Select Image’ button to upload or select an image you want to use. Make sure that you are using a large image otherwise it will appear pixelated.

After that you need to enable Parallax by choosing a parallax type. There are a number of styles available that you can experiment with. The most commonly used parallax effect is scroll.

Click on the Insert button to continue.

The plugin will now add a shortcode inside your WordPress post editor. It will look something like this:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

Your Content Here

[/nk_awb]

Replace ‘Your content here’ with your own content and then save your page.

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

Parallax effect preview

Method 2: Add Parallax Effect to Any WordPress Theme with CSS

This method requires you to have a fair understanding of HTML / CSS as well as how WordPress themes work.

First, you will need to upload the image you want to use for parallax effect to your WordPress media library by visiting Media » Add New page.

After uploading the image, you need to copy the image URL by editing the image in WordPress media library.

Copy image URL

Next, you need to add the following HTML into the page or post where you want to show the parallax effect. You can also add this HTML into your WordPress theme or child theme.

<div class="parallax">
<div class="parallax-content">

Your content goes here...

</div>
</div>

Next you need to add the following custom CSS to your WordPress theme.

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}

.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Don’t forget to replace the background image URL with your own background image.

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

Parallax effect added with CSS

Note: You may need to adjust CSS to work with your site’s layout.

We hope this article helped you learn how to easily add parallax effect to any WordPress theme. You may also want to see our mega list of the most wanted WordPress tips, tricks, and hacks.

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 a Parallax Effect to Any WordPress Theme appeared first on WPBeginner.

How to Style Each WordPress Post Differently

Have you ever come across a site that style their blog posts differently? Some sites have sticky posts highlighted with a custom background whereas others may have each category post styled with a unique look. If you ever wanted to learn how to style each… Read More »

The post How to Style Each WordPress Post Differently appeared first on WPBeginner.

Have you ever come across a site that style their blog posts differently? Some sites have sticky posts highlighted with a custom background whereas others may have each category post styled with a unique look. If you ever wanted to learn how to style each WordPress posts differently, then you’re in the right place. In this article, we will show you how to style each WordPress post differently.

Style Each Post Differently

Note: This tutorial requires you to add custom CSS in WordPress. You will also need to be able to use the Inspect tool. Some basic CSS and HTML knowledge is required.

Styling Individual Posts in WordPress

WordPress adds default CSS classes to various elements on your website. A standard compliant WordPress theme must have the code required by WordPress to add CSS classes for body, posts, pages, widgets, menus, and more.

A core WordPress function called post_class() is used by themes to tell WordPress where to add those default CSS classes for posts.

If you visit your website and use the Inspect tool in your browser, then you will be able to see those classes added for each post.

Default CSS classes for WordPress post

Following are the CSS classes added by default based on what page a user is viewing.

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name
  • .format-{format-name}
  • .type-{post-type-name}
  • .has-post-thumbnail
  • .post-password-required
  • .post-password-protected

An example output would look like this:

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

You can style each WordPress post differently using the respective CSS classes.

For example, if you wanted to style an individual post, then you can use the post-id class in your custom CSS.

.post-412 { 
background-color: #FF0303;
color:#FFFFFF; 
} 

Don’t forget to change the post ID to match your own.

Styling a specific post in WordPress

Let’s take a look at another example.

This time we will style all posts filed under a specific category called news.

We can do this by adding the following custom CSS to our theme”

.category-news { 
    font-size: 18px;
    font-style: italic;
} 

This CSS will affect all posts filed under news category.

The Post Class Function

Theme developers use the post_class function to tell WordPress where to add the post classes. Usually it is in the <article> tag.

The post class function not only loads the default WordPress generated CSS classes, it also allows you to add your own classes.

Depending on your theme, you’ll find the post_class function in your single.php file or in the content template files. Normally, the code will look something like this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

You can add your own custom CSS class with an attribute like this:

<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

The post_class will print out respective default CSS classes along with your custom CSS class.

If you want to add multiple CSS classes, then you can define them as an array and then call them in the post_class function.

<?php 
$custom_classes = array(
		'longform-article',
		'featured-story',
		'interactive',
	);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>

Style Posts Differently Based on Authors

The default CSS classes generated by the_posts function does not include author name as a CSS class.

If you want to customize the style of each post based on author, then you will need to first add the author name as a CSS class.

You can do this by using the following snippet:

<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>

This code will add the user’s nicename as a CSS class. Nicename is a URL friendly name used by WordPress. It does not have spaces, and all characters are in lowercase which makes it perfect to use as a CSS class.

The above code will give you an output like this:

<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

Now you can use .peter in your custom CSS to style all posts by this particular author to look different.

.peter { 
background-color:#EEE;
border:1px solid #CCC; 
}

Style Posts Based on Popularity using Comment Count

You may have seen sites with popular posts widgets which are sometimes based on comment counts. In this example, we will show you how to style posts differently using the comment count.

First, we need to get the comment count and associate a class with it.

To get the comment count, you’ll need to add the following code in your theme files. This code goes inside the WordPress loop, so you can add it just before the <article> tag as well.

<?php 
	$postid = get_the_ID();
	$total_comment_count = wp_count_comments($postid);
		$my_comment_count = $total_comment_count->approved;
	if ($my_comment_count <10) {
		$my_comment_count = 'new';
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count = 'ermerging';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

This code checks comment count for the post being displayed and assigns them a value based on the count. For example, posts with less than 10 comments get a class called new, less than 20 are referred to as emerging, and anything over 20 comments is popular.

Next, you need to add the comment count CSS class to the post_class function.

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

This will add new, emerging, and popular CSS classes to all posts based on the number of comments each post has.

You can add custom CSS to style posts based on popularity:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

We are just adding borders, you can add any CSS rules you want.

Style Posts Based on Custom Fields

Hardcoding CSS classes in your theme file limits you to only those specific CSS classes. What if you wanted to decide which CSS class to add to an article as you are writing it?

With custom fields, you can add CSS classes on the fly.

First you need to add a custom field to a post, so that you can test it out. Edit a post and scroll down to custom fields section.

Add post class as a custom field

Add post-class as the custom field name, and anything you want to use as CSS class in the value field.

Don’t forget to click on the ‘Add custom field’ button to store it and then save your post.

Next, edit your theme files to display your custom field as the post class.

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

It will output the following HTML:

<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">

You can now add custom CSS for the post_class you added using custom field.

.trending{
background-color:##ff0000;
}

Custom fields can have multiple values, so you can add multiple CSS classes using the same name.

There are many more ways to style WordPress posts individually. As your skills grow, you’ll keep discovering new ways to style posts using different conditions.

We hope this article helped you learn how to style each WordPress post differently. You may also want to see our ultimate list of the most wanted WordPress tips, tricks, and hacks.

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 Each WordPress Post Differently appeared first on WPBeginner.

How to Display Custom Fields Outside The Loop in WordPress

In this article we will show you how you can display custom fields outside the loop. This tutorial will allow you to expand the possibilities of what you can do with WordPress.

The post How to Display Custom Fields Outside The Loop in WordPress appeared first on WPBeginner.

Do you want to display custom fields outside the loop in WordPress? Normally, custom fields are displayed inside the WordPress loop along with other post content and metadata. In this article, we will show you how to display custom fields outside the loop in WordPress.

How to display custom fields outside the WordPress loop

What Are Custom Fields in WordPress

Custom fields allow you to add additional meta data into your WordPress posts and then display them along with your post content.

You can add custom fields by simply enabling the custom fields metabox under the Screen Options. You can also create custom metaboxes in WordPress to give your custom fields a better user interface.

Adding custom field to a WordPress post or page

For more details, see our beginner’s guide on using WordPress custom fields.

Since custom fields add metadata to posts, they can be easily displayed inside the WordPress loop along with other post content. However, sometimes you may want to display them outside the loop. For example, in a sidebar widget. This is when it becomes a bit tricky.

That being said, let’s see how to easily display custom fields outside the loop in WordPress.

Display Custom Fields Data Outside The Loop in WordPress

Instead of displaying custom fields meta data outside the loop, we’ll actually show you how to use multiple loops in your WordPress themes without affecting the main loop.

This article requires you to add code to your WordPress theme files. If you haven’t done this before, then you may want to see our guide on how to copy and paste code in WordPress.

You’ll need to add the following code to your theme files where you want to display the custom fields data in WordPress.

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Your-Custom-Field', true);
wp_reset_query();
?>

This code simply loads up the global variable $wp_query to get the post ID. After that, it uses get_post_meta() function to fetch and output your custom field data.

Don’t forget to change Your-Custom-Field with your actual custom field.

You can customize the code to match your needs. You can also use other query arguments to fetch and display custom fields data for different posts and pages.

Let’s take a look at another example. This one uses WP_Query class which is a much better and more flexible way to use multiple loops in your WordPress theme files.

Simply add this code to your theme or child theme where you would like to show the custom field.

$args = array ( 
// Post or Page ID
'p' => 231,
);

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {

	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		echo get_post_meta( get_the_ID(), 'Mood', true);
		}

	
	/* Restore original Post Data */
	wp_reset_postdata();

} else {

echo 'Nothing found';
	
}

Don’t forget to replace Mood with your own custom field name and post ID with your own post or page id.

Custom field in WordPress sidebar widget

That’s all for now.

We hope this article helped you learn how to display custom fields outside the loop in WordPress. You may also want to see our WordPress theme cheat sheet 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 Display Custom Fields Outside The Loop in WordPress appeared first on WPBeginner.