Here is an example of one of the shorter titles I was given:

Here is an example of one of the longer titles I was given:

A series of quick if/else statements and use of the strlen function in PHP allows me to assign different classes depending on the length of the dynamic title. I figured out, based on the CSS on the H1 class, that 14 was my magic number.

Here’s the quick snippet of code I used:

$title = $post->post_title;
$char_title = strlen($title);

if ($char_title > 14) {$header_style = "double";}

else {$header_style = "single";}

I grab the post title using common WordPress calls and make it into the $title variable. The I use the strlen function to determine the number of characters (including spaces) in the title. If it’s greater than 14, it assigns the $header_style variable the class “double” or else it assigns it the “single” class.

Here is how I used it within the WordPress loop:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="<?php echo $header_style ?>"><h2><?php the_title(); ?></h2></div>
<?php endwhile; endif; ?>

Hopefully you’ve found this quick tutorial valuable. Contact me if you have any questions or would do it a different way. There’s 1,001 ways to do everything – that’s why I love coding.

Here’s the CSS for the output above:

 <style type="text/css">
.box {
position:relative;
background-color:#666;
height:75px;
width:400px;
overflow:hidden;
padding:10px;
}
.box h1 {
font-size:36px;
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
}
.top {
color:#FFF;
position:absolute;
z-index:1;
}
.bottom {
position:absolute;
color:#333;
top:11px;
left:11px;
}
</style>

Here’s the HTML for the output above:

 <div class="box">
<div class="top"><h1>Here's My Test</h1></div>
<div class="bottom"><h1>Here's My Test</h1></div>
</div>

Hopefully you’ve found this quick tutorial valuable. Contact me if you have any questions or would do it a different way. There’s 1,001 ways to do everything – that’s why I love coding.