7 Handy WordPress Tweaks and jQuery Scripts

by Jason Unger, Founder

Insights / Website Development / 7 Handy WordPress Tweaks and jQuery Scripts

When you have an issue or problem that seems to pop up over and over again, there’s no better feeling than finding a solution that works.

As we develop custom WordPress themes for our clients, there are a handful of tried-and-true scripts and code snippets that we end up using over and over again to solve common problems.

Some of them are specific to WordPress, others are jQuery that can be used in any web project, and others relate to specific plugins or functionality.

Here are seven handy code snippets we use in our WordPress theme development.

WordPress Tweaks: Admin Bar, SVGs, Menus

All of the following WordPress snippets can be added to your functions.php file for maximum effectiveness.

Hide the Admin Bar During Development

The WordPress admin bar is super useful for both developers and users once the site is launched, giving easy access to edit pages, see any important notifications, and one-click access to the Dashboard.

But during development, it can be a bit annoying to have the admin bar sticking the top of the site — especially if you’re working on the header of your theme.

Here’s how to hide the admin bar.

add_filter( 'show_admin_bar', '__return_false' );

Add Support for SVG Uploads

SVG is quickly becoming our image type of choice, especially for logos and icons, because of its vector-based format, which makes sizing for responsive design much clearer.

(For a number of additional benefits of using SVG for your images, read this post.)

Unfortunately, WordPress’s Media Library doesn’t accept SVG files out of the box because SVG is an XML-based file. It’s for security reasons – similar to the inability to upload an HTML or PHP file to the Media Library.

But assuming you are working solely with SVGs you have created, then you can use the following snippet to allow them to be uploaded into the Media Library.

function add_svg_support($mimes) {
     $mimes['svg'] = 'image/svg+xml';
     return $mimes;
}
add_filter('upload_mimes', 'add_svg_support');

Move the Yoast SEO Box to the Bottom

The most popular SEO plugin for WordPress, Yoast SEO, has a great metabox on the Post and Page editors for adjusting SEO title, description, focus keyword, and more.

But if you’re using any types of custom fields on your Editor, the Yoast SEO box will display above your custom fields — it’s not ideal.

Use this code snippet to force the Yoast SEO metabox to the bottom of the editor.

add_filter( 'wpseo_metabox_prio', function() { return 'low';});

Bootstrap Walker for Your Menus

As part of integrating the Bootstrap Framework and WordPress, we need a custom walker for our menus.

(Not sure what a Walker is? Read the official codex entry or, for a better English explanation, this great TutsPlus article.)

Developer Brandon Hubbard built and made available a custom WordPress navigation walker that uses Bootstrap markup: wp-bootstrap-navwalker.

You can read the instructions at GitHub, or grab the raw code.

Handy jQuery Tools: Even Columns, Smooth Scrolling, Animations

The following jQuery tools can be used on any site, WordPress or other-wise.

Match the Height of Different Sized Elements

If you’re using any type of column-based layouts, whether it’s a grid or a table, you’ll likely come across the situation where you need all of the columns in a row to be the same height — but they aren’t.

It’s almost always due to the content inside each element — sometimes the text is longer, sometimes it’s shorter — but you want to make sure that the container is always the same height.

We use a jQuery tool called matchHeight in these situations.

Grab the raw code, include the file in your site, and set it up like below.

Full customization options can be found at GitHub.

jQuery(function($) {
     $(".this-class-is-standard-usage").matchHeight();
     $(".this-example-class-should-use-min-height").matchHeight({property:'min-height'});
     $(".this-example-matches-the-target-height").matchHeight({target: $('.class-height-to-be-used')});
});

Smooth Scrolling

If you use anchors on your site to link users to specific sections of a page, make the jump feel less like a leap and more like a journey.

A smooth scrolling script takes the user down (or up) the page, scrolling through the content rather than skipping directly over it.

Want to see it in action? Visit our client ShalomLearning, head to the bottom of the page, and click the “up” arrow. You’ll get a nice, even scroll back to the top of the page.

jQuery(function($) {
     $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
        $('html, body').animate({
         scrollTop: target.offset().top
        }, 1000);
       return false;
      }
     }
   });
});

CSS Animations As You Scroll

If you want to use CSS animations on your site, the Animate.css library makes it incredibly easy.

Simply download the CSS file, include it in your site, and use any of the CSS classes on your elements to make them animate. You can see all of the animations in action here.

If you want to make the animations happen as you’re scrolling to the elements, integrate WOW.js.

After you add in the WOW.js script, initialize it by simply adding:

<script>new WOW().init(); </script>

To make your element animate when you scroll to it, add the “wow” class.

<div class="wow slideInUp">This will slide up when you get to it!</div>

Photo by Mikael Kristenson on Unsplash