5.7: Creating The Custom Post Types

Section 5.7 Creating The Custom Post Types

Now that we have registered our custom post types we can begin coding them using PHP. We will need to code 2 php files for each of the custom post types. Here's that list again along with the php files we will need for each
- Artist: artist-post.php and artist-content.php
- Event: event-post.php and evevnt-content.php
- Genre: genre-post.php and genre-content.php
- Venue: venue-post.php and venue-content.php
Our Custom Post Types (and how we will make use of them)
- The Artist custom post type is used collect and display information about each of the artists who are signed to Diamond Dog Entertainment.
- The Genre custom post type is used to classify the types of music the artists play. Note than an artist can be classified with multiple genres.
- The Venue is a facility where artists will appear from time-to-time.
- The Event custom post type works with the Venue, Agent and Artist custom post types to book and display upcoming appearances.
Advanced Custom Fields
- Examining Figure 5.6.6 take notice of the item 'custom-fields' in the 'supports array. Because we want to create some fields that are not included in the typical WordPress install we are going to need to install a specialized plug-in called Advanced Custom Fields (ACF). There are two versions of this plug-in available, one is freeware and the other is a licensed product with extended capabilities. The freeware version of ACF will suffice for our purposes.
- Let's go get a free copy of Advanced Custom Fields plugin and activate it for our site.

Figure 5.7.1

Enter Advanced Custom Fields in the search box; a list of plug-ins displays automatically.
Click the Install button

Figure 5.7.2

Activate the ACF plug-in

Figure 5.7.3

Coding PHP for the Artist For The Custom Post Types
As mentioned earlier, when you work with a child theme - recall that the DiamondDogEntertainment is a child of the TwentySeventeen theme that installed with WordPress - the child them inherits all of the functionality of the parent theme and if the functionality of the parent them needs to be customized this is carried out in the child theme.
One way of over-riding the parent theme is to copy the associated php file from the parent theme and that's just what we are going to do to create our DiamondDogEntertainment theme's custom post types.
Open your Windows Explorer or Mac Finder and navigate to the parent folder for your site:

Figure 5.7.4

Open the twentyseventeen folder and right-click on the file named single.php and select copy from the context menu
Now navigate up and then into the diamonddogentertainment theme folder
Paste the single.php file in the diamonddogentertaiment folder
Open the single.php file you just pasted.
Examine line 17 of the file. We see that there is a function call that passes a reference to another file folder
- get_template_part( 'template-parts/post/content', get_post_format() );
This statement tells us that for this php post to work it needs to access another folder and actually there is a file specified here as well but it assumes the .php file extension.
Let's return to the twentyseventeen theme folder and follow that file path:

Figure 5.7.5

Right click the template-parts folder and select copy.
Now navigate back to the diamonddogentertainment theme folder and paste the post folder.
Open the template-parts-folder and delete every subfolder except for the post folder
Open the post folder and delete every file except for the file named content.php
Right click the content.php file, select rename and change the file name to artist-content.php
Open the artist-content.php file with your text-editor and update the comments at the top of the file so that they reflect the new file name and change the author to your own name.
Navigate back to the diamonddogentertainment theme folder
Right click on the single.php file and rename it to artist-post.php
Open the artist-post.php file
Because we renamed the content.php file to artist-content.php we must change line 17:
Before:

get_template_part( 'template-parts/post/content', get_post_format() );

After:

get_template_part( 'template-parts/post/artist', 'content', get_post_format() );</b>

You may be wondering why we needed to put a coma between the words artist and content. This is just a peculiarity of WordPress that substitutes that comma for the hyphen internally.
We also need to go to the top of the file and adjust the information regarding file name and author as these comments are used by WordPress. Like this:

Figure 5.7.6

Let's test our new Artist custom template.

Figure 5.7.7

Open the diamonddogentertainment WordPress Dashboard
Click Add new
Scroll down until you see the Post Attributes field group - This is found on the right-hand side of the window
Click on the template select box and you should see a selection labeled "Artist Post" as shown in Figure 5.6.13
Setting Up The Genre Custom Post Type
Return to the diamonddogentertainment WordPress site dashboard
Select Genres - All Genres
We will add some genres to the Genre custom post type

Figure 5.7.8

Enter the following genres. You can add others if you like.

Figure 5.7.9

Figure 5.7.10

Use the lorem ipsum generator to create the content.

Entering Custom Fields For The Artist Custom Post Type Remain in the WordPress Dashboard and scroll down until you see the Custom Fields menu item and click Custom Fields.

Figure 5.7.11 Click Add New

Figure 5.7.12 You are now looking at the Edit Field GroupClick Add New Field

Figure 5.7.13 You are now looking at the form to enter a new custom field

Figure 5.7.14 We will now create some custom fields for the Artist custom post type.The fields that need to be created are shown below Figure 5.6.21Be sure to use upper-case and lower-case EXACTLY as you see here.After you add each of these custom fields press the Publish button.

Figure 5.7.15 Create the Name custom field :Field Label: NameField Name: nameField Type: textRequired: YesPlaceholder Text: Artist NameCharacter Limit: 40Conditional Logic: No Create the Home Town custom field:Field Label: Home TownField Name: home_townField Type: textRequired: YesPlaceholder Text: Home TownCharacter Limit: 80Conditional Logic: No Create the Biography custom field:Field Label: BiographyField Name: biographyField Type: text-areaRequired: YesPlaceholder Text: Add the artists biographical information hereRows: 8Formatting: Convert new lines into <br/> tagsConditional Logic: No Create the Record Label field (select box)Field Label: Record LabelField Name: record_labelField Type: selectRequired: No ChoicesAtlantic : AtlanticSony Music : Sony MusicElektra : ElektraA&M : A&MIsland : IslandMotown : MotownReprise : RepriseWarner Bros : Warner BrosNot Listed : Not ListedDefault Value: SelectAllow Null: noSelect Multiple Values: NoConditional Logic: No Create the Record Label field (text box - used when the label is not included in the Record Label select box)Field Label: Record LabelField Name: record_label_writtenField Type: textRequired: NoPlaceholder text: Independent Label

Entering Artists Though we still have some modifications to make to the Artist custom post template we are far enough along to start entering some of the agencies artists.Access the diamonddogentertainment WordPress dashboardClick the Artists - All Artists menu item in the Navigation pane.Click the Add New button.

Figure 5.7.16

Figure 5.7.17 Let's add an Artist by filling out the necessary fieldsBe sure to select two or three genresBe sure to update the Template to "Artist"Click the Publish button.

Figure 5.7.18 You should now be able to see the Artist listed in the Dashboard

Figure 5.7.19 Let's see whether our new artist displays correctly.Just below the browser address window you will find a button labeled View Page. Click View Page.

Figure 5.7.20 You should be presented with your new Artist page displayed in your browser:

Figure 5.7.21 We still have some work to do on the Artist template. Recall that when we created the Artist there was a select box to assign a record label or to use a text box to enter a record label if the Artist's record label was not in the drop down list provided by the select box.

Completing the Artist Template We are now going to start working with PHP to code changes that are necessary for our Artist template.Open your text editor and the select File-->Open Folder.Navigate to the wp-content folder and then click on the Themes folder. This folder will show two themes, the parent twentyseventeen and the diamonddogentertainment folders:

Figure 5.7.22 Your text editor navigation pane should be similar to what is shown below:

Figure 5.7.23 Click to open the diamonddogentertainment folder

Figure 5.7.24 Open the artist-content.php fileThere are simply too many structural changes in this file to try and adapt the original file so we will code this template essentially from scratch. This will be a great start to become a WordPress developer.

<?php
/**
* Template part for displaying Artist posts
* @link https://codex.wordpress.org/Template_Hierarchy
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.2 and watch one thing I don't
*/ 
?> 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
<header class="entry-header"> 
<h3 class="entry-title"><?php the_field('name'); ?></h3> 
<?php the_post_thumbnail('single-featured-image-header'); ?> 
</header><!-- .entry-header -->

<div class="entry-content">
<strong>Record Label: </strong>
<?php
if(get_field('record_label') == "Not Listed"){
the_field('record_label_written');
}else{
the_field('record_label');
}
?>

<br/><br/>
<p>
<strong>Artist Biography: </strong><br/>
<?php
the_field('biography');
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after' => '</div>',
));
?>
</p> 

<?php 
$genreRelation = get_field('related_genres'); 
if( $posts ): ?>
<ul style="list-style-type: none;">

<?php foreach( $genreRelation as $post): // variable must be called $post (IMPORTANT) ?>

<?php setup_postdata($post); ?>

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

<?php endforeach; ?>

</ul>
<?php endif; ?> 
<?php
wp_reset_postdata(); 
?>

</div><!-- .entry-content -->
</article><!-- #post-## -->

Figure 5.7.25

Once you have finished coding the artist-content.php file save your changes and then return to the diamonddogentertainment web site.
You should be able to see that we have a new menu option titled Artists
Select the Artist menu and you will get a list of Diamond Dog Entertainment's artists.

Figure 5.7.26

The Artists list screen is presented

Figure 5.7.27

After selecting an artist on the Artists list the Artist detail page is presented.

Figure 5.7.28

You should see the Artist page displayed.
While our new page looks great it appears that something is missing. Though we entered home town information when we added this artist via our WordPress site dashboard it is not appearing on the screen.
Review the code for the artist-content.php file and then see if you can determine what updates you need to make to the artist-content page. Once you determine where you would like to place that information go ahead and make the necessary changes and test your changes by refreshing the Artist page.
The completed Artist page should look something like Figure 5.7.29 below.

Figure 5.7.29

Congratulations, you have just created your first WordPress Custom Post!

Entering Custom Fields For The Venue Custom Post Type

Let's begin by setting up the custom fields for the Venue. Refer to figures and instructions provided above for the Artist as needed.
Create the Venue Name custom field :
- Field Label: Venue Name
- Field Name: venue_name
- Field Type: text
- Required: Yes
- Placeholder Text: Name of Venue
- Character Limit: 120
- Conditional Logic: No
Create the Venue Street Address custom field :
- Field Label: Venue Street Address
- Field Name: venue_street_address
- Field Type: text
- Required: Yes
- Placeholder Text: Venue Street Address
- Character Limit: 120
- Conditional Logic: No
Create the Venue City custom field :
- Field Label: Venue City
- Field Name: venue_city
- Field Type: text
- Required: Yes
- Placeholder Text: Venue City
- Character Limit: 60
- Conditional Logic: No
Create the Venue State custom field :
- Field Label: Venue State
- Field Name: venue_state
- Field Type: select
- Required: Yes
- Placeholder Text: Select Venue State
- Conditional Logic: No
Create the Venue Postal Code custom field :
- Field Label: Venue Postal Code
- Field Name: venue_postal_code
- Field Type: text
- Required: Yes
- Placeholder Text: Venue Postal Code
- Character Limit: 10
- Conditional Logic: No

Entering Venues

We will now create at least two venues where artists will perform . We have provided images for the Carmel Palladium (Carmel IN) and the Mesa Arts Center (Mesa AZ).
If you would like to create additional venues feel free to make up your own and re-use images or perhaps use google to find venues and images of the venue seating.
Don't forget to set the template value for each venue to "Venue" or your venue will not display properly in the Website.

Completing the Venue Template

Now we will repeat the process we used to create the artist-post.php and artist-content.php files so that we can display the Venues withing the Website.
Copy the artist-post.php file and name the copy venue-post.php.
Open the venue-post.php with your text editor.
We have one small change to make to venue-post.php because we will be pointing at venue-content.php rather than artist-content.php
Before:

get_template_part(  'template-parts/post/artist', 'content', get_post_format() );

After:

  get_template_part(  'template-parts/post/venue', 'content', get_post_format() );

Now we will turn our attention to creating the venue-content file.
The file we want to copy is found within the template-parts/post folder. Navigate to that directory now.
Copy the artist-content.php file and name the copy venue-content.php.
Open the venue-content.php file.
Note that the changes we need to make are very similar to the changes we made for the artist-content.php file. Referencing the field names from your Venue Post custom fields make the necessary changes to display the venue content.
Once you have made these changes go to your Diamond Dog Entertainment Website and select Venues from the main menu. The Venues page should be presented:

Figure 5.7.30

Clicking the link should take you to the Venue page with a view similar to this:

Figure 5.7.31

Entering Custom Fields For The Event Custom Post Type

Let's begin by setting up the custom fields for the Venue. Refer to figures and instructions provided above for the Artist as needed.
Create the Event Name custom field :
- Field Label: Event Name
- Field Name: event_name
- Field Type: text
- Required: Yes
- Placeholder Text: Name of Event
- Character Limit: 120
- Conditional Logic: No
Create the Event Date custom field :
- Field Label: Event Date
- Field Name: event_date
- Field Type: text
- Required: Yes
- Placeholder Text: Event Date
- Character Limit: 20
- Conditional Logic: No
Create the Event Artist custom field :
- Field Label: Event Artist
- Field Name: event_artist
- Field Type: relationship
- Required: Yes
Create the Event Venue custom field :
- Field Label: Event Venue
- Field Name: event_venue
- Field Type: relationship
- Required: Yes

Completing the Event Template

Now we will repeat the process we used to create the artist-post.php and artist-content.php files so that we can display the Events within the Website.
Copy the artist-post.php file and name the copy event-post.php.
Open the event-post.php with your text editor.
We have one small change to make to event-post.php because we will be pointing at event-content.php rather than artist-content.php
- - Before:

get_template_part(    'template-parts/post/artist', 'content', get_post_format() );

After:

get_template_part(  'template-parts/post/event', 'content', get_post_format() );

Now we will turn our attention to creating the event-content file.
The file we want to copy is found within the template-parts/post folder. Navigate to that directory now.
Copy the artist-content.php file and name the copy event-content.php.
Open the event-content.php file.
Note that the changes we need to make are very similar to the changes we made for the artist-content.php file. Referencing the field names from your Event Post custom fields make the necessary changes to display the event content.
Once you have made these changes go to your Diamond Dog Entertainment Website we will enter some events and confirm results by view the Events page.

Entering Events

We will now create at least two events where we can assign a venue and one or more artists.
If you would like to create additional events feel free to make up your own and re-use images or perhaps use google to find other images.
Don't forget to set the template value for each venue to "Event" or your venue will not display properly in the Website.

Figure 5.7.32

The Custom Post Type Widget

Wouldn't it be nice to have a list of upcoming shows that you could click on every page to quickly access the details?
You may have noticed that when you display your pages the Upcoming Events list that appears in Figure 5.7.32 does not appear on your page.
Let's make better use of that space by setting up the Custom Post Types Widget. Figure 5.7.33 shows how the item we will add works to add additional useful information to the site.
First we need to install and activate a plugin the Custom Post Types plugin. The plugin will install the desired widget.