Doc4 has been developing websites for Clients using WordPress since before 2005. During that time we've created quite a few generic themed sites as well as custom themes. When doing this over long periods of time it's easy to begin to spot issues that are only solvable through PHP coding. These are issues that are not covered within the WordPress Codex or through the incredibly simple use of their template tag system. As mentioned, it's not too hard to get back on track with the inclusion of a little additional PHP code or with the help of the many plugins available on the WordPress extend page. Today though, we are going to write the code into the site and prevent the addition of one more plugin.

The issue we are dealing with is a site design incorporating the use of $the_content template tag knowing that it's entirely possible $the_content may not actually be needed or even exist. In such a case as a Page or Post may display content ( floated left ) next to images ( floated right ) and the opposite may be true, if no content exists we would end up with an odd white space where the content was meant to be. Let's fix that.

The solution, create an if/else PHP statement so that: if $the_content does not exist then float the images across the full width and not just over to one side or the other. We scoured the WordPress Codex for an answer to this issue, thinking there must be a template tag for it somewhere. Unfortunately, this isn't the case and so we wrote the following code to save ourselves time and hopefully you can benefit from this as well.

The Code:

<? if($content = $post->post_content ) {
      echo "<div id='content_wrap'>";
      the_content();
      echo "</div>";
      echo "<div id='image_right'>";
   } else {
      echo "<div id='image_fullWidth'>";
   } ?>

Example CSS Styling:

#content-wrap {
 width: 450px;
 margin: 10px 20px 10px 0;
 float: left;
 }

#image_right {
 width: 450px;
 margin: 10px 0;
 float: right;
 }

#image_fullWidth {
 width: 920px;
 margin: 10px 0;
 float: none;
 }