Create Equal Height Columns in WordPress

I recently spent about 3 hours implementing a jquery script to create equal height columns in WordPress. It was a great learning experience, but if you’re more interested in creating equal height columns now, the following turtorial will help. Also see Use Flexbox to Create Equal Height Columns

With the Equal Height Columns plugin, you can easily create equal height columns in your WordPress template or a post or page.

Install the Plugin

• Install the Equal Height Columns plugin and Activate it.
  See How to Install WordPress Plugins

To install plugins

• From the WordPress admin menu, go to Plugins > Add New
• Enter the plugin name in the Search Plugins field and click Enter.
• Click Install Now for the appropriate plugin. The plugin with download and install.
• Click Activate.

Configure the Plugin

1. Once Equal Height Columns is installed, go to Settings > Equal Height Columns.
2. Enter a selector in the Selector field. In my example, it’s .footer-widgets .widget-wrap. The reason I have to include the .footer-widgets selector / div is because .widget-wrap occurs in other areas of the page and I don’t want the .widget-wrap selector to have equal column heights except when it occurs inside the .footer-widgets div. See the image below.
3. To find the selector in Firefox, Chrome, or Safari, right click on the column and select Inspect Element. That will launch the Web Inspector in the bottom of your browser screen.
   
   
4. Click Save Changes and then reload the page. Your columns should be equal height. In my example site, the footer columns are equal and the Equal Height Columns plugin added a height style to the .widget-wrap selector. See the image below.
5. If your columns are not equal height, then you probably used the wrong selector. Keep experimenting until you get it.