Element height based on viewport height

Today I had to create a little landing page for one of our clients. one of the requirements was to have the landing page fill the screen no matter what height the viewport was. So this would fill the space up on a desktop, iPad for example.

I stumbled across a handy piece of jQquery that makes use of jQuery height element, below is the snippet:

function stretch_pc() {
var height = $(window).height();
var stretch = (80 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
$("div").css('height',stretch);
}

$(document).ready(function() {
stretch_pc();
$(window).bind('resize', stretch_pc);
});

This is essentially a function that is defining two variables height and stretch. The height variable is simply just finding the height of the windows viewport. By reading the jQuery documentation here

The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element’s height needs to be used in a mathematical calculation.

The second variable stretch is going to be 80 percent of the viewport  * the height of the document and then divided by 100 to give us 80 percent of the viewport height. You may change 80 to match whatever you find sufficient, I opted for this as the height element does not take in to account any padding or margin, so you will get a bit of excess if you decide to have these in your css.

Lastly, after the function, the jquery will load on the document ready and initialise the function, making the ‘div’ height match the percentage defined in the function.

Further reading: jQuery Documentation

Source: link

Find out what template a WordPress theme is using.

Recently I was working on a clients website and it was decided that I was going to integrate buddypress on the website. I have worked with buddypress in the past and found it a great bit of software to extend upon with WordPress. This time round it was a bit more of a overall custom feel to it and some extra theming was required.

Some of the buddypress pages used different templates and I found it misleading sometimes as to which pages where using which templates. I found a great little bit of code that will show only the administrator who is logged in which template the current page is using. Great for debugging and other little things.

First of all we need to register a new little function, with which we will be using a global var. Put this in to your themes functions.php file.

add_filter( 'template_include', 'var_template_include', 1000 );
function var_template_include( $t ){
$GLOBALS['current_theme_template'] = basename($t);
return $t;
}

function get_current_template( $echo = false ) {
if( !isset( $GLOBALS['current_theme_template'] ) )
return false;
if( $echo )
echo $GLOBALS['current_theme_template'];
else
return $GLOBALS['current_theme_template'];
}

Once we have registered our new function, we will want to call it in our theme files somewhere. I simply added the below snippet to my header.php file of my theme. This code will print out the current page template by using the function we registered before.

// If the current user can manage options(ie. an admin)
if( current_user_can( 'manage_options' ) )
// Print the saved global
printf( '
<div><strong>Current template:</strong> %s</div>
', get_current_template() );
?&gt;

So there you have it, if you ever get stuck needing to find out what page is using what template (great for plugins) you can use this.

Edit: I also found this little snippet and it can be used in the same manner:

add_action('wp_head', 'show_template');
function show_template() {
global $template;
print_r($template);
}