How To Customize Page Animations and Transitions WordPress Plugin

page-animations-and-transitions-wordpress

I was working on a client site recently and needed to implement a fade animation transition between pages.  Whenever a user would click a link, the old page would fade out and a new page would fade back in.  Page transitions are really nice effects that are giving sites a polished, modern feel to them – I love how they can provide a seamless experience throughout a domain.  It’s one of those new web trends where, if done right, it can take the site to the next level, however when done wrong, there’s nothing more annoying than browsing a site that’s flipping and spinning at you in every direction.

Since I’m building this site on a WordPress platform the easiest avenue to get this project started was to search for a plugin.  There’s a few out there that do the trick:  Page Transition, Page Animations and Transitions, and the premium WP Page Transitions.  All get the job done with plenty of options, however with all those options comes plenty of code that is useless.  If I had more time for this part of my project, I would have preferred to code up a more lightweight plugin, but since time was crunched I chose to install Page Animations and Transitions.  Of course it adds a parent tab to your WordPress admin bar (which is super annoying and why I always use Admin Menu Editor to move it under Settings).

Out of the box this plugin worked great and I had minimal conflict with the code that I already had in place.  The only problem was that it was applying the transition effect to my body tag, which meant the entire website would fade out and fade back in on every link.  This wasn’t the exact effect I had in mind as I preferred just the content to transition without the header.  I checked the documentation to see if the plugin could do this – nothing there so I checked the WordPress Plugin support forum.  After a very long run around by the Plugin author I decided to just dive into the code myself and make the modifications.  So, without further a-do, here is the answer to:

How to Exclude Header/Menu From Page Animations and Transitions WordPress Plugin

First thing first was to find the line of code that was adding the animsition class to our body tag.

Navigate to your Plugins directory via FTP.  This is located under wp-content/plugins.

Find your installation of Page Animations and Transitions and open page-animations-and-transitions.php

Here is the code that we are looking for on line 99

// Add specific CSS class by filter
add_filter('body_class','weblizar_page_anim_class_names');
function weblizar_page_anim_class_names($classes) {
// add 'class-name' to the $classes array
$wl_page_trans_options = get_option('wl_page_trans_options');
$weblizar_page_in_trans= $wl_page_trans_options['weblizar_page_in_trans'];
$weblizar_page_out_trans= $wl_page_trans_options['weblizar_page_out_trans'];
if( $weblizar_page_in_trans=="none" or $weblizar_page_out_trans=="none"){
$classes[] = '';
}
else{
$classes[] = 'animsition';
}

// return the $classes array
return $classes;
}

Side-note: Anyone notice the mistake on line 106?

This function is adding the class animsition to your site’s body tag by using the WordPress function body_class.  This is a useful template tag that gives theme and plugin authors the ability add css style more effectively.  You’ll notice this hook in your theme files next to your body tag:

<?php body_class( $class ); ?>

For our case, we do not want the plugin to fade the entire body but rather the content. Fortunately WordPress provides us with another function called post_class. This template tag is used in theme posts and pages to be able to dynamically add css styles to content.  You’ll most-likely find this template tag in your page.php template and any another page templates installed and will look like this:

<?php post_class( $class ); ?>

Depending on your theme – all we need to do to exclude the header from the page animations and transitions plugin is to modify the filter on line 100 of page-animations-and-transitions.php plugin file. Simply switch out body_class with post_class:

// Add specific CSS class by filter
add_filter('post_class','weblizar_page_anim_class_names');
function weblizar_page_anim_class_names($classes) {
// add 'class-name' to the $classes array
$wl_page_trans_options = get_option('wl_page_trans_options');
$weblizar_page_in_trans= $wl_page_trans_options['weblizar_page_in_trans'];
$weblizar_page_out_trans= $wl_page_trans_options['weblizar_page_out_trans'];
if( $weblizar_page_in_trans=="none" or $weblizar_page_out_trans=="none"){
$classes[] = '';
}
else{
$classes[] = 'animsition';
}

// return the $classes array
return $classes;
}

Save the file and take a look at your site. It should now exclude the header from transitions. If it doesn’t look perfect/if there is some content that are not part of transition you will need to modify where your <?php post_class( $class ); ?> is installed on your page templates. In my case, the titles were above the post_class tag, so I simply created a new div above the titles and moved my post_class tag there. Here is a simple version of what I ended up with:


<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div <?php post_class(); ?>>
<!-- All your content coding -->
</div>
</main>
</div>

Simple as that. Stay tuned for my own page transition plugin in the future. I am working on a much lighter and simpler solution than what is currently available.