WordPress: If ($the_content) exists

Developing custom themes for WordPress over long periods of time can easily bring to light plenty of issues that are only solvable through php coding. These are things that are not provided for 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.

The issue we are looking at is a site design incorporating the use of $the_content template tag with the possibility that $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.

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 to one side. 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.

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'>";
   } ?>

The CSS:

#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;
 }

Line #1:

<? if($content = $post->post_content ) {

Here we begin by asking if content does in fact exist for this particular post then continue on to Line #2.

Line #2:

echo "<div id='content_wrap'>";

The first echo is using a basic css style where we know that $the_content will only ever exist with an image floating to the right of it and therefore the content will always be styled with a width of 450px and floated left.

Line #3:

the_content();

Next we tell the code to insert the template tag for $the_content. Similar to the commonly seen but without the initial php because it is already included in Line #1.

Line #4:

echo "</div>";

Directly after displaying the post’s content end the open div.

Line #5:

echo "<div id='image_right'>";

Begin the image wrap div to separate it from the content. We styled this like so: width: Again the style sheet instructs this div with a width of 300px and floated to the right. it is necessary to include both of these div wraps within the if statement because they correspond to each other. If content exists then so do the images, otherwise we only have the images.

Line #6:

} else {

The else statement is where the code asks: if $the_content does not exist, then skip the first set of echos and move to the second set.

Line #7:

echo "<div id='image_fullWidth'>";

This echo displays the div statement which only prints if there is no content associated with the current post being displayed. The style sheet instructs this div to a width of 600px and a float of none. The float: none is shown for demonstration purposes but isn’t really necessary.

Line #8:

} ?>

End the php statement.

The above code is greatly simplified for ease of understanding, but there are a many extras that could be added.