Portfolio Site by WP

29 April 2022 Projects

This is basically the site you are visiting now.

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

custom theme
custom theme

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

folder of custom theme
folder of the custom theme

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

dashboard – sidebar
dashboard – sidebar

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:

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:

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

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!😃