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.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

/** 
* 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.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 50

Leave a Reply

Your email address will not be published. Required fields are marked *