Custom type posts – creating a list with custom post type in WordPress

In this article you will learn how to create a list with custom post in WordPress. If we have a set of entries of a given type and would like to create a list view that displays all the posts, we need to create a file that would handle it. In our case we will be based on a previously created article Advanced Custom Fields – custom field types WordPress, where we added our own type of entries: Projekt. On the basis of these projects we would like to create a list of projects, which would properly display: The title of the project, a short description of the project, a distinguishing image.

How do you create a list with custom post type of entries in WordPress ?

Let’s do it

The first step is to edit our Custom Post Type Project. Let’s go to CPT UI tab in WordPress panel. Let’s choose our Post Type Design and look for the Has Archive section. Let’s change the value to true and set the url – ”projekty”.

After approving the change in our post type Projekt, let’s go to the folder of our theme – in our case wp_tutorial and find the archive.php file. This file is responsible for displaying a set of basic WordPress entries. To create a list view of your own type of entries, follow the same procedure as in Create a view (template) for a custom post in WordPress. Copy the archive.php file and add Custom Post Type Slug: archive-projekt.php.

We are going to edit the archive-projekt.php file. By default, the code and view are as follows:

<?php
get_header();
?>
  <div id="primary" class="content-area"></div>
    <main id="main" class="site-main"></main>
    <?php if ( have_posts() ) : ?>
      <header class="page-header"></header>
        <?php
        the_archive_title( '<h1 class="page-title"></h1>', '</h1>' );
        the_archive_description( '<div class="archive-description"></div>', '</div>' );
        ?>
      </header><!-- .page-header -->
      <?php
      while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', get_post_type() );
      endwhile;
      the_posts_navigation();
    else :
      get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
    </main><!-- #main -->
  </div><!-- #primary -->
<?php
get_sidebar();
get_footer();

<?php

get_header();

<?php if ( have_posts() ) : ?>

<?php

the_archive_title( '<h1 class="page-title"></h1>', '</h1>' );

the_archive_description( '<div class="archive-description"></div>', '</div>' );

</header>

<?php

while ( have_posts() ) :

the_post();

get_template_part( 'template-parts/content', get_post_type() );

endwhile;

the_posts_navigation();

else :

get_template_part( 'template-parts/content', 'none' );

endif;

</main>

</div>

<?php

get_sidebar();

get_footer();

We would like them to appear in our view:

a signature that says it’s a collection of projects,
the project title,
short description,
the distinguishing image.

The rest of the items are unnecessarily displayed, so they should be removed. We move on to code editing. Delete the title of the archive and its description and replace it with your own title: Transite of Projects. We also need to change it to take a view from the content-projects.php file, changing the ‘template-part/content’ path to ‘template-part/content-projects’..

<?php
<!--?php get_header(); ?-->

<!-- .page-header --> <!--?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content-projekty', get_post_type() ); endwhile; the_posts_navigation(); else : get_template_part( 'template-parts/content', 'none' ); endif; ?--> <!-- #main -->

<?php

get_header(); ?> <div id=”primary” class=”content-area”> <main id=”main” class=”site-main”> <?php if ( have_posts() ) : ?> <header class=”page-header”> <h2 class=”tytul-zbioru”>Zbiór Projektów</h2> </header><!– .page-header –> <?php while ( have_posts() ) : the_post(); get_template_part( ‘template-parts/content-projekty’, get_post_type() ); endwhile; the_posts_navigation(); else : get_template_part( ‘template-parts/content’, ‘none’ ); endif; ?> </main><!– #main –> </div><!– #primary –> <?php get_footer();

Go to the folder /template-parts select the file content.php copy and rename the copy to content-projekty.php. Go on to edit the file.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header"></header>
    <?php
    if ( is_singular() ) :
      the_title( '<h1 class="entry-title">', '</h1>' );
    else :
      the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
    endif;
    if ( 'post' === get_post_type() ) :
      ?>
      <div class="entry-meta"></div>
        <?php
        wp_tutorial_posted_on();
        wp_tutorial_posted_by();
        ?>
      </div><!-- .entry-meta -->
    <?php endif; ?>
  </header><!-- .entry-header -->
  <?php wp_tutorial_post_thumbnail(); ?>
  <div class="entry-content"></div>
    <?php
    the_content( sprintf(
      wp_kses(
        /* translators: %s: Name of current post. Only visible to screen readers */
        __( 'Continue reading<span class="screen-reader-text"></span> "%s"</span>', 'wp_tutorial' ),
        array(
          'span' => array(
            'class' => array(),
          ),
        )
      ),
      get_the_title()
    ) );
    wp_link_pages( array(
      'before' => '<div class="page-links"></div>' . esc_html__( 'Pages:', 'wp_tutorial' ),
      'after'  => '</div>',
    ) );
    ?>
  </div><!-- .entry-content -->
  <footer class="entry-footer"></footer>
    <?php wp_tutorial_entry_footer(); ?>
  </footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

<?php

if ( is_singular() ) :

the_title( '<h1 class="entry-title">', '</h1>' );

else :

the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

endif;

if ( 'post' === get_post_type() ) :

<?php

wp_tutorial_posted_on();

wp_tutorial_posted_by();

</div>

<?php endif; ?>

</header>

<?php wp_tutorial_post_thumbnail(); ?>

<?php

the_content( sprintf(

wp_kses(

/* translators: %s: Name of current post. Only visible to screen readers */

__( 'Continue reading<span class="screen-reader-text"></span> "%s"</span>', 'wp_tutorial' ),

array(

'span' => array(

'class' => array(),

)

get_the_title()

) );

wp_link_pages( array(

'before' => '<div class="page-links"></div>' . esc_html__( 'Pages:', 'wp_tutorial' ),

'after' => '</div>',

) );

</div>

<?php wp_tutorial_entry_footer(); ?>

</footer>

</article>

We remove unnecessary sections:

entry-meta– delete the entire section if displaying a section
the_content– delete the entire content display block
wp_link_pages– delete display function
entry-footer– delete article footer

Our code after reduction:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
    <?php
    if ( is_singular() ) :
      the_title( '<h1 class="entry-title">', '</h1>' );
    else :
      the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
    endif;
    ?>
  </header><!-- .entry-header -->
  <?php wp_tutorial_post_thumbnail(); ?>
  <div class="entry-content">
  </div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

<?php

if ( is_singular() ) :

the_title( '<h1 class="entry-title">', '</h1>' );

else :

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

endif;

</header>

<?php wp_tutorial_post_thumbnail(); ?>

</div>

</article>

We proceed to the correct display of the list. We want the image to be displayed at the end of a single article, to do this we move wp_tutorial_post_thumbnail() before end of tag ‘< /article>“. In the entry-content we add a short project description using the_excerpt().

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
    <?php
    if ( is_singular() ) :
      the_title( '<h1 class="entry-title"></h1>', '</h1>' );
    else :
      the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark"></a>', '</a></h2>' );
    endif;
    ?>
  </header><!-- .entry-header -->
  <div class="entry-content"></div>
  <?php the_excerpt(); ?>
  </div><!-- .entry-content -->
  <?php wp_tutorial_post_thumbnail(); ?>
</article><!-- #post-<?php the_ID(); ?> -->

<?php

if ( is_singular() ) :

the_title( '<h1 class="entry-title"></h1>', '</h1>' );

else :

the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark"></a>', '</a></h2>' );

endif;

</header>

<?php the_excerpt(); ?>

</div>

<?php wp_tutorial_post_thumbnail(); ?>

</article>

We have received the following project list view.

Summary

Creating a view for a list of custom posts is similar to creating a template for a single custom post. Similarly, we create a archive.php file, and the display is slightly different. Assign the appropriate template-part for displaying a single post in the list. We can use different variations to display the Custom Post set, it can be, as in this case of the list, a more complex and complicated view.