Create a Space theme for WordPress – 2021 – Part 10, Custom posts

Table Of Contents

Introduction

Custom post types are used to separate content into more manageable units. For example, a custom post type could be used to display information on upcoming space launches. Most importantly you could use custom fields for the launch provider, launch date, and type of rocket. Likewise, This data is then displayed on the front end for each launch post.

Include custom post types by using a plugin. On the other hand, you can build them into the theme.

Create a space launch post type.

Next, we will create a custom post type named, Launches. There are two custom fields that save data to the posts meta table in the database. The data is then retrieved and shown on the front end. In the image above the provider and launch date are saved in custom fields. This is covered in Part 11.

The image below shows the admin section of WordPress. On the left, the custom post type’s name is in blue. Note the “launches” title and the Search launches button on the right. To make this happen continue below.

Add the code below to functions.php. Next follows a breakdown of how it all works.

The most important line of code is register_post_type( ‘launches’, $args). This function names the post type and includes an array of arguments. Additionally, an add action hook is used to trigger the space_launch_post_type() function when the theme initializes.

// custom posts
function space_launch_post_type(){
    $args = array(
    'labels' => array(
     'name' => 'launches',
     'singular_name' => 'Launch',
     'add_new_item' => 'Add new launch',
     'edit_item' => 'Edit Launch',
     'search_items' => 'Search Launches',

    ),
     'public' => true,
     'menu_icon' => 'dashicons-admin-site-alt',
     'has_archive' => true,
     'supports' => array('title','editor','thumbnail'),

    );

    register_post_type( 'launches', $args);

}
add_action('init','space_launch_post_type');

The args array contains a labels array that sets all the headings that are shown in the admin section. For example, name is the name of the menu button that displays on the left of the admin screen. you can also change the icon.

Finally, the supports array sets what is visible in the editor, for example, the title input and the editor block.

Create the front end file single-launches.php

In the themes, folder create a file named single-launches.php this page will be used by WordPress for the launches post type only. Paste the code below into the file. Note we are also using a new template part named section-launches.php

<?php get_header();?>
    <section class="page-wrap">
        <div class="container">
            <section>
                    <h1> <?php the_title()?></h1>
                    <?php if (has_post_thumbnail()):;?>
                    <img src="<?php the_post_thumbnail_url('large')?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail"/>
                    <?php endif;?>
                    <?php get_template_part('includes/section', 'launches')?>
            </section>
        </div>
    </section>
<?php get_footer();?>

Create the section-launches.php template part

Create the file below in the includes folder, name it section-launches.php. The template part retrieves the post meta custom fields data from the database, as of now these fields will be empty. Otherwise, this is just the standard WordPress loop.

<?php if (have_posts()): while(have_posts()): the_post();?>
<div class="alert alert-success">
    <h3>Scheduled Launch </h3>
    <p>Provider: <?php echo get_post_meta($post->ID, 'provider_id', true); ?></p>
    <p>Launch date: <?php echo get_post_meta($post->ID, 'launch_date', true); ?></p>
 <!--  <p><span class="fas fa-calendar-day"></span> Date posted:  <?php echo get_the_date('d:m:Y');?></p> 
   <p><span class="fas fa-user"></span> Created by <?php echo the_author_posts_link();?></p> -->
</div> 
<?php the_content();?>

    <?php endwhile; else: endif; ?>

Once this is done create a launches post type and add some content. it should look similar to the image above.

In part 11 we add the custom fields and deal with securely saving to the post meta table.