white and black laptop

How to Create Custom WordPress Website ?

Table of Contents

In the vast landscape of web development, the ability to harness the full potential of WordPress through custom coding is a skill that elevates your website from the ordinary to the extraordinary. In this comprehensive guide, we will bypass the fundamentals and dive straight into the intricacies of coding custom post types (CPT), templates, and shortcodes. By the end, you’ll have the knowledge to craft a truly bespoke WordPress website that stands out from the crowd.

Step 1: Mastering Custom Post Types (CPT)

Creating a Custom Post Type

To get started, let’s create a custom post type called ‘Portfolio.’ Open your theme’s functions.php file or create a custom plugin, and add the following code:

function create_custom_post_type() {
            'labels' => array(
                'name' => __('Portfolio'),
                'singular_name' => __('Project'),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'portfolio'),
            'supports' => array('title', 'editor', 'thumbnail', 'custom-fields'),
add_action('init', 'create_custom_post_type');

This code registers a ‘Portfolio’ post type with custom labels and supports various features like the editor, thumbnail, and custom fields.

Extending Functionality with Custom Fields

Custom fields allow you to attach additional information to your portfolio items. Here’s an example of how you can add a ‘Client’ custom field to your ‘Portfolio’ post type:

function add_client_meta_box() {
        'Client Information',
add_action('add_meta_boxes', 'add_client_meta_box');

function render_client_meta_box($post) {
    $client = get_post_meta($post->ID, '_client', true);
    <label for="client">Client:</label>
    <input type="text" id="client" name="client" value="<?php echo esc_attr($client); ?>" />

function save_client_meta($post_id) {
    if (array_key_exists('client', $_POST)) {
add_action('save_post', 'save_client_meta');

This code creates a meta box for entering client information and saves it as custom metadata for each portfolio item.

Step 2: Crafting Custom Templates

Single Portfolio Item Template

With your custom post type in place, it’s time to create templates for displaying individual portfolio items. Create a file named single-portfolio.php in your theme directory with the following code:

<?php get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        while (have_posts()) :
            get_template_part('template-parts/content', 'portfolio');
    </main><!-- #main -->
</div><!-- #primary -->

<?php get_footer(); ?>

This template structure allows you to maintain modularity by separating the content of a single portfolio item into a separate file, such as content-portfolio.php.

Content-Portfolio Template Part

Create a file named content-portfolio.php with the following code:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php the_title('<h1 class="entry-title">', '</h1>'); ?>
        <div class="entry-meta">
            <span class="client">Client: <?php echo esc_html(get_post_meta(get_the_ID(), '_client', true)); ?></span>
    </header><!-- .entry-header -->

    <div class="entry-content">
        <?php the_content(); ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer">
                esc_html__('Edit %s', 'your-theme'),
                the_title('<span class="screen-reader-text">"', '"</span>', false)
            '<span class="edit-link">',
    </footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

This template part structures the display of individual portfolio items, including the client information added through custom fields.

Step 3: Harnessing Shortcodes for Dynamic Content

Shortcodes provide a convenient way to inject dynamic content into various parts of your website. Let’s create a shortcode to dynamically display a list of portfolio items wherever you like.

Portfolio List Shortcode

Add the following code to your functions.php file:

function portfolio_shortcode() {
    $args = array(
        'post_type' => 'portfolio',
        'posts_per_page' => -1,

    $portfolio_query = new WP_Query($args);

    if ($portfolio_query->have_posts()) :
        $output = '<ul>';
        while ($portfolio_query->have_posts()) :
            $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        $output .= '</ul>';
    else :
        $output = 'No portfolio items found';

    return $output;
add_shortcode('portfolio_list', 'portfolio_shortcode');

Now, wherever you use the [portfolio_list] shortcode in your content, it will dynamically generate a list of your portfolio items with links to their respective pages.

Conclusion: Elevate Your WordPress Website with Customization Mastery

In this deep dive into WordPress customization, you’ve explored the realms of custom post types, templates, and shortcodes. Armed with this knowledge, your WordPress website is no longer confined to the limitations of standard themes and functionalities. With creativity as your guide, continue to refine and expand your codebase, transforming your website into a unique and compelling digital expression of your vision and purpose. Happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top