This is basically the site you are visiting now.

What I have done is created a new theme called “Portfolio”:

To create your own theme just simply added it under “wp-content” -> “themes” -> “portfolio”, and put information in the “style.css” file.

/*
    Theme Name: Protfolio
    Author: Louise Zhou
    Version:1.0
*/

Also added a custom post named “Portfolio” with categories and tags.

To achieve it, it is better to do it in the “mu-plugins” folder, named “portfolio-post-types.php” instead of just write in the “functions.php” file since it will not be lost, even user change to another Theme.

Below is what I wrote:

<?php
function portfolio_post_types(){
    register_post_type('portfolio', array(
        'show_in_rest' => true,
        'supports' => array('title','editor','excerpt','thumbnail','author'),
        'taxonomies' => array('category','post_tag'),
        'rewrite' => array('slug' => 'projects'),
        'has_archive' => true,
        'public' => true,
        'show_in_rest' => true,
        'labels' => array(
            'name' => 'Portfolio',
            'add_new_item' => 'Add New Project',
            'edit_item' => 'Edit Project',
            'all_items' => 'All Projects',
            'singular_name' => 'Project'
            
        ),
        'menu_icon' => 'dashicons-portfolio'
    ));
}
add_action('init', 'portfolio_post_types');
?>

You might wonder where to find the menu icon named “dashicons-portfolio”, you can find it here.

Before we drive to the details, we need to know that, the “index.php” is for the blog post, not a home page, and “front-page.php” is for the homepage, this is called template hierarchy. So in my case, the projects page and the category page is controlled by the “archive.php”.

Later, we need to create “single-portfolio.php” for the single post in the custom project. Check the code below:

<?php
  get_header();
  while(have_posts()) {
    the_post();
     ?>
<h2 class="projectpageheadline"><?php the_title(); ?></h2>
<div id="singel-project-page">
    <div class="metabox">
        <p>
            <?php the_time('d F Y'); ?> <?php echo get_the_category_list(', '); ?>
        </p>
    </div>
    <?php the_content(); ?>
    <div class="image_right clearfloat">
        <img src="<?php the_post_thumbnail_url(); ?>" alt="thumbnail for project">
    </div>
</div>
<?php }
  get_footer();
?>

There are much more details that I haven’t covered in this post, but so far, I hope you can get something from here.

Have a nice day!😃