Post Format

Setting Equal and Minimum Column Heights in WordPress

Last year, I helped my parents’ church move their website into WordPress. It was my first attempt at recreating an existing design within WordPress (a bit scary). I wrote about the process on my professional blog, but I think this is a good place to highlight the specific code I was working on.

Challenge #1: Matching column heights with dynamic content

The front page of the site has two columns that must be of equal height, and the content (and thus the column height) is dynamic. That meant I couldn’t just cheat and used fixed heights. I needed to find a solution that would automatically adjust the column heights—both of them!—when the content in one column changed.

Luckily, I found a solution with a little research. Someone had already written Javascript code to set equal column heights:

    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    jQuery(document).ready(function() {
	equalHeight(jQuery( "#container,#primary" ));
    });
    </script>

Challenge #2: Setting a minimum column height

The real problem came when I wanted to work with other pages on the site. Each of those pages had two columns (a main content area and a sidebar), and I wanted the main content column to be at least as tall as the sidebar. Of course, the sidebar had dynamic content, so once again I couldn’t use a fixed minimum height.

Try as I might, I couldn’t find a piece of code that successfully set a minimum column height based on the height of another column. So I took matters into my own hands—I modified the code above to fit my needs. Then I added an if/else statement so all of the code could be pasted into my theme’s functions.php file:

// script for column height function

function my_scripts() {
  if (is_front_page()) {  ?>
    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    jQuery(document).ready(function() {
	equalHeight(jQuery( "#container,#primary" ));
    });
    </script>

  <?php } else { ?>

    <script type="text/javascript">
    jQuery.noConflict();
    function fixMinHeight(group) {
        thisHeight = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
        });
        jQuery( "#container" ).css("min-height", thisHeight+100);
    }
    jQuery(document).ready(function() {
	fixMinHeight(jQuery( "#secondary" ));
    });
    </script>

<?php }  }
add_action('wp_head','my_scripts');

The result? All the columns work as they should. Someone else may be able to come up with a more elegant solution, but I solved the problem. I jumped around the living room for a good five minutes after I got that to work!

Advertisements

Posted by

Excellence Wrangler for Automattic, the company behind WordPress.com. Linguaphile and Translator. Tester.