Creating Madlibs with Advanced Custom Fields in WordPress

I, like many of you, grew up playing MadLibs® – and I sure do miss them! So, I decided to try to make some of my own using WordPress and the Advanced Custom Fields plugin. The way I set this up was to make two fields in a group:
Madlib Body: text field with the script of the MadLib with variables
Madlib Parts of Speech: list of the parts of speech associated with the variables in the MadLib Body field Here is an example script I’ve added to a post:

One day Dino decided to go for a walk. It was a sunny day and the earth was especially  %1%  Dino was really  %2%  and was thinking about  %3%  (even though this was culturally inappropriate). He noticed a T-Rex in the  %4% . Then he saw that the T-Rex was headed for a  %5% ! Dino got very  %6%  when he saw the T Rex coming with a  %7%  . So he decided to  %8%  and  %9% . As Dino was  %10%  his luck had turned. He was trembling with  %11% when he decided to go into the  %12% . It was then that Dino saw  %13%  and  %14% . And he thought that is was time for lunch. He found some  %15%  and munched. For desert he had a  %16% . He then took a nap and began to deam about  %17% . Oh, Dino thought, another  %18% !

And the parts of speech:

1:adjectives;2:adjectives;3:pluralnouns;4:pluralnouns;5:nouns;6:adjectives;7:nouns;8:verbs;9:verbs;10:verbing;11:pluralnouns;12:pluralnouns;13:pluralnouns;14:verbed;15:pluralnouns;16:nouns;17:pluralnouns;18:nouns

So, now what? In my template to show a single post (templates/loop-single.php in my case), I added some code to check if those fields are filled in or not. (By default they are blank for non-Madlib posts).

$madlibBody = get_post_meta( get_the_ID(), 'madlib_body', true);
if(!empty($madlibBody)){
   // it's a madlib!
   $madlibparts = get_post_meta( get_the_ID(), 'madlib_parts_of_speech', true);
   // get the parts as well

Next. we check to see if this is a form submit, or the first time viewing the page.

if(isset($_REQUEST['madlibsubmit'])){
  // because we named the parts of speech "part_[num]" we can search for them in the request
foreach($_REQUEST as $name=>$param){
				$pos = strpos($name, "part_");
				if($pos===false){
				   // it is a different request param
				} else {
					$num = substr($name, 5); 
					$madlibBody = str_replace("%". $num . "%", "" . $_REQUEST['part_' . $num] . "", $madlibBody);
				}
			}
			$madlibBody = str_replace("[p]", "<br /><br />", $madlibBody);
			echo $madlibBody . "<br />";
			$post; $post_slug = $post->post_name; 
			
			echo "<a class='ac-btn btn-biggest btn-opaque' href='/blog/madlib/" . $post_slug . "'>Start over</a>";

Now, we will cover the “else” condition when the user first sees the page:

} else {
echo "<form action='' method='POST'>";
			$allparts = explode(";",$madlibparts);
			foreach($allparts as $part){
				$exp = explode(":",$part);
				echo "<div class='row form-group'><div class='col-sm-2'>" . $exp[1] . "</div>";
				echo "<div class='col-sm-10'>";
				echo "<input type='text' placeholder='' class='form-control' name='part_" . $exp[0] . "' />";
				echo "</div></div>";
			}
			echo "<br />";
			echo '<input type="submit" class="btn btn-primary" value="Post the fun" name="madlibsubmit" />';
			echo "<hr />";
			echo "</form>";
}

Now when this post loads, the user will see a form with inputs for the configured parts of speech, and when “submit” is clicked, the form posts to itself and gets the form variables, the script and where the variables should be and presents a madlib! Here is a result:

One day Dino decided to go for a walk. It was a sunny day and the earth was especially  tacit  Dino was really  bright  and was thinking about  ducks  (even though this was culturally inappropriate). He noticed a T-Rex in the  cherries . Then he saw that the T-Rex was headed for a  butter ! Dino got very  succinct  when he saw the T Rex coming with a  opinion  . So he decided to  test  and  thank . As Dino was    his luck had turned. He was trembling with  offices when he decided to go into the  lizards . It was then that Dino saw  boats  and   . And he thought that is was time for lunch. He found some  beds  and munched. For desert he had a  adjustment . He then took a nap and began to deam about  brothers . Oh, Dino thought, another  lip !

Try making a madlib with this script! Coming soon: a tutorial post about how to make an admin page in WordPress to edit the scripts and parts of speech!

Related