Steps to Create a Custom Plugin for Blog List

We’ll create a shortcode-based plugin that will show your blog posts in a custom design as above image.

Step 1: Create plugin folder & file

1. Go to WordPress plugins folder:

   wp-content/plugins/
   

2. Create new folder:

   custom-blog-list
   

3. Create a PHP file inside it:

   custom-blog-list.php
   

Step 2: Plugin Code

Paste the below code in custom-blog-list.php file:

<?php
/**
 * Plugin Name: Custom Blog List
 * Description: A custom blog post list with a stylish layout.
 * Version: 1.0
 * Author: Your Name
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

// Shortcode Function
function custom_blog_list_shortcode($atts)
{
    ob_start(); ?>

    <div class="blog-container">
        <?php
        $args = array(
            'post_type'      => 'post',
            'posts_per_page' => 6, // Change as needed
        );
        $query = new WP_Query($args);

        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post();
        ?>
                <div class="blog-card">
                    <div class="blog-image">
                        <a href="<?php the_permalink(); ?>">
                            <?php if (has_post_thumbnail()) {
                                the_post_thumbnail('medium');
                            } ?>
                        </a>
                    </div>
                    <div class="blog-content">
                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
                        <a class="read-more" href="<?php the_permalink(); ?>">Read more</a>
                    </div>
                </div>
        <?php endwhile;
            wp_reset_postdata();
        else : ?>
            <p>No posts found</p>
        <?php endif; ?>
    </div>

<?php
    return ob_get_clean();
}

// Register shortcode
add_shortcode('custom_blog_list', 'custom_blog_list_shortcode');

// Enqueue Styles
function custom_blog_list_styles()
{
    wp_enqueue_style('custom-blog-list-style', plugin_dir_url(__FILE__) . 'style.css');
}
add_action('wp_enqueue_scripts', 'custom_blog_list_styles');
?>

Step 3: Add CSS File

1. Create style.css inside the Plugin folder (custom-blog-list/)
2. Paste the below CSS inside it:

.blog-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.blog-card {
    width: 30%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: auto;
}

.blog-content {
    padding: 15px;
}

.blog-content h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.read-more {
    display: inline-block;
    background: blue;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
}

Step 4: Install & Use the Plugin

1. Go to WordPress Admin Panel
2. Click on Plugins > Add New > Upload Plugin
3. Create a zip and upload it or copy-paste it manually
4. Activate it
5. Use the below Shortcode:

   
              
   [custom_blog_list]
   			

   Paste it into any page or post and the blog list will be shown!

🎉 And it is done

Now this will work as a plugin form and you will be able to install & activate it in any theme.🚀🔥