Ladies Learning WordPress

Wordpress is just for blogging, right?

Tonight's Schedule:

1. Understand what custom post types are and how we can use them for creating new content.
2. Create our recipes post type within WordPress
3. Understand What custom fields are and how we can use them to create an interface for inputting our recipes
4. Create a custom fields for our recipe post type
5. Adapt our WordPress theme to create a listing of all recipes.
6. Tinker Time

Custom Post Types

Permalinks

Remember Permalinks? Lets turn on pretty permalinks

Settings->permalinks

Exercise #1: Creating a custom post type

Registering the post type

Now that we have the plugin activated, we can go to Custom Post Types → Add New

Advanced Options

We have the option to further customize the custom post type to take advantage of some of the many built in WordPress functionalities.

For example, we require comments, excerpt and categories for our recipes but a custom post type for quotes may just need the bare minimum.

1. Change Has Archive drop-down to true

2. Set the following:

Easy as that!

Thats it! Pretty easy, eh? You now have the recipes CPT in the sidebar:

Custom Fields

Custom Fields for our Recipes

By default, custom fields are plain text key and value inputs. Kind of a pain in the butt to work with!

We want a nice, usable interface so we're going to use another plugin called Advanced Custom Fields

Exercise #2: Creating our custom fields

Creating the custom interface

So, what inputs do we need for a recipe?

We already have a spot for the title and the body of the recipe and we're able to use WordPress' featured image for the picture

• Prep Time, Cook time, Total Time
• List of Ingredients
• Preparation Steps

For Each of the above, lets create a custom field.

Head on over to Custom Fields → Add New to expose the custom field creation interface

At the top name it Recipes and set the Location rule to Post Type - is equal to - recipes

Click +Add Field and you'll see the interface for adding a new field. In the drop down you'll see all the types of field types that we can choose from!

For now we're only going to worry about the first three fields

Let's go ahead and add Prep Time, Cook Time and Total Time

For the list of ingredients and steps for preparation, we can't predict how many steps a recipe might have so we use a repeater field to allow the user to add as many as they wish.

So we create a field with the type of repeater and then within that we specify what the fields will be. In our case its just 1 field of 'step'

Rinse & Repeat by creating another field in the same way:

Ingredients with the type of repeater

You should now have 5 fields!

Now when we add a recipe we have a beautiful interface. Go ahead and add a few!

Now that we have all our recipes inputted, how do we get them to show up in our template?

When we go to <our blog url>/recipes we see a list of recipes, but only the title and body content. What gives?!

That is certainly not a good way to layout recipes and we aren't interested in having the sidebar in there either!

To make a custom layout, we need to edit the template files in our theme.

All of the files that control how our site looks are located in /wp-content/themes/llc-recipe

What file controls how the recipes are displayed?

WordPress has something called the Template Hierarchy where is specifies which files display the content.

By default, the listing of recipes will use archive.php - the same one is uses to display your blog.

We want to create our own so lets create a more specific one called archive-recipes.php which will override archive.php with our recipes custom post type.

If we just write "Hello there im the recipe page!" in our blank archive-recipes.php file and save it, we should see this:

Building the template to display recipes

Remeber the Loop? The loop is a way to iterate over each recipe available and display the output on the page. Lets start with a simple template only showing the recipe title.

<?php get_header(); ?>
	<div class="full">
		<?php if(have_posts()) while(have_posts()) : the_post(); ?>
					<?php the_title(); ?>
		<?php endwhile; ?>
	</div>
<?php get_footer(); ?>

If this seems like a lot of code to type, feel free to copy and paste it off the slides.

See how when we save the page we now get our header, our footer and all the names of available recipes?

Lets expand on that and pull in all the fields we created with template tags. Our end result will look like this:

What template tags do we need?

Lets start coding just below the line that look like this:

<?php if(have_posts()) while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

Everything between these lines will be repeated once for every recipe. Lets start with a wrapper div.

<div class="singleRecipe">

</div>

Template Tags Refresher

Template tags help us easily output different parts of a recipe.

<?php the_title(); ?> - The recipe title

<?php the_excerpt(); ?> - Short version of the content

<?php the_post_thumbnail("recipe"); ?> - Gives us the post thumbnail sized for recipe

<?php the_category(", ") - Outputs the categories

<?php the_field(" ");?> - Outputs whatever custom field we pass it

Now we want to add the recipe picture and title as well as link them to the recipe.

<a href="<?php the_permalink(); ?>">
	<?php the_post_thumbnail("recipe"); ?>
</a>

<h2><a href="<?php the_permalink(); ?>">
	<?php the_title(); ?>
</a></h2>      	

Hows it looking? Lets add some more underneath that!

<?php the_excerpt(); ?>
<p><strong>Total Time: </strong>
<?php the_field("total_time"); ?></p>
<strong>Categories:</strong> <?php the_category(", "); ?>

See how we used <?php the_field("total_time"); ?> to grab our custom field from before?

If you also wanted prep time and cook time, you can add those as well replacing 'total_time' with 'prep_time' or 'cook_time'

Now we need to make a few changes.

1. Delete the_excerpt()

2. Add in 'prep_time' and 'cook_time' alongside 'total_time'

3. after </div> and before <?php endwhile; ?> we need to create a new div to hold our recipe details.

<div class="recipeDetails">
</div>

Looping through each ingredient

Since we aren't sure how many ingredients we have, we will use PHP's while loop to output them until we have none left.

The important template tags we are using here are:

the_repeater_field("ingredients"); - gets the high level field of "ingredients"

the_sub_field("ingredient"); - give us access to each individual ingredient when we are within our while loop

<ul>
	<?php while(the_repeater_field('ingredients')) : ?>
		<li><?php the_sub_field('ingredient'); ?></li>
	<?php endwhile; ?>
</ul>

The Steps

To get the same, repeat the same steps as we just did but replacing ingredients and ingredient with steps and step

Also note: we are using an ordered list in this case to number the steps

<h3>Directions</h3>
<ol>
	<?php while(the_repeater_field('steps')) : ?>
			<li><?php the_sub_field('step'); ?></li>
	<?php endwhile; ?>				
</ol>

Adding Comments

Finally, if you would like people to comment on you custom post type, its as easy as adding the following line below the final endwhile;

<?php comments_template( '', true ); ?>

Overview

Getting Help

http://wordpress.stackexchange.com/

#WordPress on freenode

WordPress forums

The codex is the most valuable thing in the world.