Animation, in general, is a great way to add more life to web design. In this tutorial, you will learn how to add fade in-out page transitions to WordPress.

WordPress page transition without plugins

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and save it.

/** 
* WordPress page transition by WPCookie
* https://redpishi.com/wordpress-tutorials/page-transition-wordpress/
*/

function wpcookie_page_transition(){
	/* put your conditional tags here */	 
	$condition = true;
	/**********************************/
	return $condition;
}
add_filter( 'wp_head', function ( ) { if (wpcookie_page_transition()) { ?>
<style>
body {
	-webkit-transition: 1s all ease-out;
	-moz-transition: 1s all ease-out;
	-ms-transition: 1s all ease-out;
	-o-transition: 1s all ease-out;
	transition: 1s all ease-out;
}

body.opacity {
	-webkit-transition: 0s all ease-out;
	-moz-transition: 0s all ease-out;
	-ms-transition: 0s all ease-out;
	-o-transition: 0s all ease-out;
	transition: 0s all ease-out;
	opacity: 0;
}
.nice_page_transition_opacity {
	opacity: 0;
}

</style>	

<?php } });

add_filter( 'body_class', function( $classes ) {
	return array_merge( $classes, array( 'opacity' ) );
} );


add_filter( 'wp_footer', function ( ) { if (wpcookie_page_transition()) { ?>

<script>

	document.addEventListener("DOMContentLoaded", function(){
	
    [...document.querySelectorAll('a:not([href^=\\#])')].forEach( function(e){ e.addEventListener("click", () => {
				document.querySelector('body').classList.add('nice_page_transition_opacity');   
		setTimeout(function(){ 
		document.querySelector('body').classList.remove('nice_page_transition_opacity'); }, 2000);
	});

	})
setTimeout(function(){ document.querySelector('body').classList.remove('opacity'); }, 1000);
});
	
	
	
</script>
<?php } } );

By saving the code above, you will see that the transition page will be activated on your site.

Adding page transition to specific pages

For adding page transition to specific pages, you can put the conditional tag you want in the $condition variable.
Read more about conditional tags in the post below:

How to add PHP code in WordPress [without plugins]

Page transition on blog posts

To add the transition effect on the posts of the site, set the condition variable as below:

	/* put your conditional tags here */	 
	$condition = is_single();
	/**********************************/

Page transition on pages

To add the transition effect on the pages, set the condition variable as below:

	/* put your conditional tags here */	 
	$condition = is_page();
	/**********************************/

If this article is difficult for you to read in text, you can watch the video version below.