Hello folks, Jose here with another video
tutorial for WPBasics.org. In this tutorial, I will show you how to create
equal height columns, in the Infinity Pro theme by StudioPress, without using a plugin. This means that we will be getting our hands
dirty and doing a little bit of coding. Not to worry though, I will go through each
part step by step so that even a novice should be able to implament this tutorial. If you are not convinced and would prefer
to use a plugin, you can check the first video in this series of equal height column tutorials. In the first video I get the same results
as in this tutorial. The only difference being that in that video
I use of a plugin. The technique that is shown in this video
should work on most WordPress themes with slight modifications. I would encourage you to try this non plugin
method as this is a great way to get a familiar with coding jQuery. In this video we will create a match-height-init.js
file, add code to the js file, enqueue the match-height-init.js file using functions.php,
and finally we will cutomize the match-height-init.js code to target the elements that we want. Well enough with the introduction. Let’s get started! Step 1
Go to your themes directory and create a file called match-height-init.js inside of your
JS folder. Since this is WordPress, we can not just copy
the js code from Github. We must first create a jQuery wrapper. The jQuery wrapper is needed because the jQuery
library included with WordPress is set to noConflict() mode. This is to prevent compatability problems
with other JavaScript libraries that WordPress can link to. Read more about no conflict mode
at this link http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ . I will include this link in the description
of this video and on my website wpbasics.org. In the noConflict() mode, the global $ shorcut
for jQuery is not available, therefore we must wrap our javascript with a jQuery wrapper. With all that said, go ahead and go to your
match-height-init.js file and add the following code. This is known as the jQuery wraper as it will
wrap our js code. jQuery(document).ready(function( $ ) {
// Add Code here
}); Now we need to add some code to our functions.php file so that WordPress recognizes our jQuery
code. Go ahead and go to your functions.php file
and first add a comment to the Enqueue scripts and styles section of the file
Now copy the code on line 55 of functions.php and paste it on line 59. replace ‘infinity-match-height’ with ‘jquery.matchHeight’
. This is just a name and can be anyathing you chose. Next, go ahead and change the file path from
‘/js/match-height.js’ to ‘/js/match-height-init.js’ Save your code Let’s go to our browser and and make sure
that our file is being loaded. I will be using Google Chrome. I suggest you do the same if you want to follow
along. Now go ahead and right click anywhere on the
browser page and then select “View page source”. Now go ahead and hit CTRL + F and search for
match-height-init.js You should see the file being loaded as so. Once you are done with this, move on to step
2. Step 2 Now we need to add some code to the file we
created in step 1 to make things work. The jquery-match-height code that you will
need can be found at https://github.com/liabru/jquery-match-height Go ahead and visit this page and scroll down
to the section that is titled “Usage”. Copy the code that looks like this $(function() {
$(‘.item’).matchHeight(options); }); Now go ahead and paste it in your match-height-init.js
file. Save your code and move to the next step. Step 3
For our puposes, the default options are all that we require in the match-height-init.js
file. So go ahead and delete the word “options”
from your code. If you want, you can read more about other
options on the GitHub page. Next, we need to specify the selector for
the colums we want to be of equal height. To do this, go to your web browser and hover
your cursor over one of the columns that you want to be of equal height and select “inspect”. The line of code that is attached to the column
that you hovered over should now be highlighted. In this case it is a DIV that contains a class
called “content-box”. Go ahead and copy this code and move to step
4 Step 4
No go ahead and go back to your match-height-init.js file and replace the word “item” with “content-box”. Your code should now look like this. jQuery(document).ready(function( $ ) { $(function() {
$(‘.content-box’).matchHeight(); }); }); No go ahead and save your code and go back
to your web browser. Refresh your page and you should now have
beautiful Equal Sized Columns. That’s it. That’s all there is to it. Well, I hope you found this tutorial helpful. If you did, don’t forget to subscribe and
visit my webpage wpbasics.org for other great tutotials. Bye now.

Equal Height Columns No Plugin | Infinity Pro
Tagged on:                                 

4 thoughts on “Equal Height Columns No Plugin | Infinity Pro

  • May 17, 2017 at 4:09 pm
    Permalink

    Can't be more clear. Thanks

    Reply
  • May 29, 2017 at 8:23 pm
    Permalink

    you lost me at 1:48:-)

    Reply
  • July 31, 2017 at 5:24 am
    Permalink

    Is this better than using CSS flexbox classes?

    Reply
  • August 15, 2018 at 11:13 pm
    Permalink

    Followed your clear instructions. No joy for Genesis theme.

    Reply

Leave a Reply

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