If you’re a developer working with WordPress, having a structured way to store and display useful code snippets can be a game-changer. In this guide, we’ll set up a custom post type called Snippet that allows you to store terminal commands and display them neatly in a pre-styled code block.

Step 1: Register the Snippet Custom Post Type

To begin, open your WordPress theme directory and edit functions.php. Add the following code to register a custom post type:

function register_snippet_post_type() {
    $args = array(
        "label"  => "Snippets",
        "public" => true,
        "show_in_rest" => true,
        "supports" => array("title", "editor"),
        "menu_icon" => "dashicons-editor-code",
        "rewrite" => array("slug" => "snippets"),
    );
    register_post_type("snippet", $args);
}
add_action("init", "register_snippet_post_type");

This will create a new Snippets section in the WordPress admin dashboard where you can add and manage snippets like regular posts.

Step 2: Create a Single Snippet Template

Each snippet needs a dedicated page for viewing. Create a new file called single-snippet.php inside your theme folder and add the following:

<?php get_header(); ?>

<main>
    <article>
        <h1><?php the_title(); ?></h1>
        <pre><code><?php echo esc_html(get_the_content()); ?></code></pre>
    </article>
</main>

<?php get_footer(); ?>

This ensures that each snippet is displayed in a clean, formatted code block.

Step 3: Create an Archive Page for Snippets

To display all snippets in a grid, create a new file called archive-snippet.php and add:

<?php get_header(); ?>

<main>
    <h1>Snippets</h1>
    <div class="snippets-grid">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="snippet">
                <h2><?php the_title(); ?></h2>
                <pre><code><?php echo esc_html(get_the_content()); ?></code></pre>
            </div>
        <?php endwhile; endif; ?>
    </div>
</main>

<style>
    .snippets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: auto;
        padding: 20px;
    }
    .snippet {
        background: #fff;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    pre {
        background: #222;
        color: #0f0;
        padding: 10px;
        border-radius: 5px;
        overflow-x: auto;
    }
</style>

<?php get_footer(); ?>

This layout will present all snippets in a responsive grid.

Step 4: Automate File Creation with Terminal Commands

For developers who prefer to work from the command line, use the following commands to create these files inside your theme directory:

cd /home/mnrdjmke/public_html/wp-content/themes/your-theme

# Add Custom Post Type to functions.php
echo '<?php
function register_snippet_post_type() {
    $args = array(
        "label"  => "Snippets",
        "public" => true,
        "show_in_rest" => true,
        "supports" => array("title", "editor"),
        "menu_icon" => "dashicons-editor-code",
        "rewrite" => array("slug" => "snippets"),
    );
    register_post_type("snippet", $args);
}
add_action("init", "register_snippet_post_type");
' >> functions.php

# Create single snippet template
cat <<EOL > single-snippet.php
<?php get_header(); ?>

<main>
    <article>
        <h1><?php the_title(); ?></h1>
        <pre><code><?php echo esc_html(get_the_content()); ?></code></pre>
    </article>
</main>

<?php get_footer(); ?>
EOL

# Create archive snippet template
cat <<EOL > archive-snippet.php
<?php get_header(); ?>

<main>
    <h1>Snippets</h1>
    <div class="snippets-grid">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="snippet">
                <h2><?php the_title(); ?></h2>
                <pre><code><?php echo esc_html(get_the_content()); ?></code></pre>
            </div>
        <?php endwhile; endif; ?>
    </div>
</main>

<style>
    .snippets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: auto;
        padding: 20px;
    }
    .snippet {
        background: #fff;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    pre {
        background: #222;
        color: #0f0;
        padding: 10px;
        border-radius: 5px;
        overflow-x: auto;
    }
</style>

<?php get_footer(); ?>
EOL

# Flush cache to apply changes
wp cache flush
wp rewrite flush

Conclusion

With this setup, you can now add snippets through the WordPress admin panel, and they will be displayed in a structured, easy-to-read format. The archive page provides a grid layout for quick reference. By automating the file creation process using terminal commands, you can implement this feature efficiently.

Let me know if you’d like to extend this functionality further with custom fields, shortcodes, or additional styling!