Zeus Admin Theme WordPress Plugin

The Zeus Admin Theme WordPress plugin extends the WordPress Dashboard and cleans up the UI for a more modern approach.

Click here to download the Zeus Admin Theme on WordPress.org

As I’ve recently been diving into other CMS platforms, it was hard to not notice how the WordPress Dashboard was slowly falling behind. While the stand-alone dashboard itself isn’t awful, it definitely is lacking some features compared to other modern CMS platforms. As my debut plugin launch for WordPress, I decided to create a plugin that would help bridge the gap between where WordPress is and where some of the new guys are.

Improved UI – To start, this is not your typical “admin theme” that makes WordPress un-recognizable. Instead, I simply cleaned up the look with a minimal approach. I noticed a lot of other “admin themes” attempt to completely change how WordPress looks and functions. Instead, I’m not trying to re-invent the wheel,but make it better. With basic markup I improved the aesthetic and readability. Without diving too deep, I was able to improve the admin area while keeping 3rd party plugins unified.

Hide Front-End Toolbar – The WordPress Dashboard is also seriously lacking some basic features. Shopify, for example, also has a front-end toolbar for admins when viewing the site. But if it gets in the way of your view, you can click an anchor link to minimize it. I loved this feature and wanted to bring it to WordPress. Included in the plugin is my own version of this. In WordPress, it allows you to move the admin bar off to left and out of the way. If you need to get back to the Dashboard, just click the arrow again and it slides back in. Simple, easy.

Global Admin Search – WordPress also has about 10 different search features within their Dashboard, but all of them are compartmentalized… there is no global search that runs across them all. This is another major setback so I included a global admin search that remedies this. With AJAX, it becomes really easy to instantly navigate to a specific area in the dashboard.

Menu Editor – Finally, WordPress has a reputation for it’s main menu to get extremely messy. This is because every plugin is fighting for real-estate in your dashboard. There’s really nothing you can do about this when you install a plugin. The Zeus Admin Theme solves this by allowing you re-organize the menu and clean up the clutter. Simply drag and drop menu items to move them around. This feature greatly improves productivity when managing your website.

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.