Posted on

Inserting custom PHP code into a WordPress page

WordPress is a great, highly flexible content management system (CMS), but inserting a big chuck of custom PHP code that does a lot of database manipulation can be very tricky.  Go ahead and google it… I’ll wait a minute.

I’m working on a site for a grant making organization.  The website needs to include a list of recent grantees and the ability to search the list of grants by date, amount, and/or grantee.  It was easy to include this on their old HTML and PHP site.  Making this to work in the new WordPress site was a bit of a worry.  It turned out to be a lot easier than I feared.

The site is being built using the Thesis theme. One of the very nice features of Thesis is a that it supports a custom template that can be modified programmatically. What does this mean?  On the page that will list the recent grantees, I set the type to “Custom Template”.Selection_003

The Thesis custom_functions.php file then dynamically modifies the custom template for the page in question

 function custom_template() {
   if (is_page('36') ) {  // recent grants ?>
     <div id="content">
     <div id="post-<?php the_ID(); ?>" class="post_box top">
     <?php include ('grantsdb/newgrants.php'); ?>
     </div>
     </div>
     <div id="sidebars">
     <?php thesis_build_sidebars(); ?>
     </div>
     <?php }
   }

remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
add_action('thesis_hook_custom_template', 'custom_template');

The actual code to display the recent grants is in grantsdb/newgrants.php.

Thesis’ custom template customizations let me re-use the code from the old website with a minimum of fuss and did not require any modifications to WordPress at all.

Posted on

Dynamic Sidebar Height for WordPress and the Thesis Theme

One of the things web designers like are brightly colored, drop-shadow sidebars that match the content height on evey web page.  Because content height depends on the content and sidebar height depends on the number and size of the widgets in the sidebar, it takes a bit of dynamic thinking.  You need to know two things:  (1) How high is the content and (2) what’s the current size of the sidebar?  Given that, the forehead slapping moment comes from finding that one can reset the CSS for an element on the fly using JavaScript.

The sidebar in question is in a DIV with the ID sidebar_1, floated to the left side of the page.  The content is in a DIV with the ID content, floated to the right  

If you find yourself with a similar problem, add a text widget to the sidebar and paste in the following JavaScript:

<script type="text/javascript">
<!--
var divh = document.getElementById('content').clientHeight;
var sb1 = document.getElementById('sidebar_1').clientHeight;
document.write(" ");
if (sb1 < divh) { 
 document.getElementById('sidebar_1').style.height=divh+"px";
}
//-->
</script>