Custom post type pages return 404 page?

I have created a custom post type in my functions.php:

function keyword_pages_init() {
    $args = array(
      'label' => 'Keywords',
        'public' => true,
        'show_ui' => true,
        'capability_type' => 'page',
        'hierarchical' => false,
        'rewrite' => array('slug' => 'keywords'),
        'query_var' => true,
        'menu_icon' => 'dashicons-admin-page',
        'supports' => array(
            'title',
            'editor',
            'excerpt',
            'revisions',
            'thumbnail',
            'author',
            'page-attributes',
            )
        );
    register_post_type( 'keywords', $args );
}
add_action( 'init', 'keyword_pages_init' );

And this is the custom template page that I want to use for that custom post type pages:

<?php
/*
Template Name: Single Section
Template Post Type: post, page, keywords
*/
/**
 * The template for displaying the single section.
 *
 * This is the template that displays the home page by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage xxx
 * @since xxx 1.0
 */

get_header(); ?>

    <?php
    // Include the page nav.
    get_template_part( 'nav-header', 'nav' );
    ?>

    <main role="main" id="main" class="main-container">

        <?php
        // Include the page nav.
        get_template_part( 'nav-keywords', 'nav' );
        ?>

        <?php
        $first_section = true;
        $first_sub = true;

        // Get post slug.
        $slug = $post->post_name;

        // Get post id.
        $post_id = $post->ID;

        // Prepare an empty array.
        $elements = array();
        ?>

        <!-- section -->
        <section>
            <div class="container section-container">

                <?php
                // Include the related items.
                // http://keithdevon.com/passing-variables-to-get_template_part-in-wordpress/
                include(locate_template('elements.php'));
                ?>

                <?php if (count($elements) === 0) { ?>
                <p>No content found. </p>
                <?php } ?>

            </div>
        </section>

    </main>

    <?php
    // Include the page nav.
    get_template_part( 'nav-footer', 'nav' );
    ?>

<?php get_footer();

But I get a 404 page when I created a custom page under that custom post type.

What else did I miss?

Solutions Collecting From Web of "Custom post type pages return 404 page?"

The 404 page happens because the permalinks haven’t been updated after you inserted the code.
You can do either of these things:

  1. Manually update the permalinks after you add the new custom post type (needs to be done only once)

  2. Include the custom post type file in the theme setup function and follow with a flush_rewrite_rules( );, then reactivate the theme. reference here

Edit: Please don’t include the code flush_rewrite_rules( ); in your custom post php file since the function is very expensive to run everytime the wordpress engine loads.