How To Stylish Date Display in Sidebar Calendar Widget Box

Learn how to use and customize the “Calendar Widget Box” WordPress plugin to display a beautiful, minimalist calendar with month and date formatting. Perfect for blogs that want to show the current day in a modern style.

📆 Calendar Widget Box A Stylish Custom Date Display for Your WordPress Sidebar

One of the simplest yet most effective ways to enhance the functionality and aesthetic of your WordPress site is by adding a visually appealing calendar. The Calendar Widget Box plugin is a minimal, modern solution for bloggers and web designers who want to showcase the current date in a unique, stylish format.

This post will walk you through what the plugin does, how to install it, and how to customize it for your needs.

🧩 What Is the Calendar Widget Box Plugin?

The Calendar Widget Box is a custom WordPress widget that displays the current month (in three-letter format) and day of the month in a styled box. It’s designed to be lightweight, responsive, and eye-catching, making it ideal for any blog or news site that wants a subtle yet informative date display.

🔧 Key Features

• 📅 Displays the current month and day.
• 🎨 Built-in CSS styling with a red top bar and white date section.
• 🧱 Simple widget format – easy to add to sidebars or footers.
• 📱 Responsive design for mobile and desktop views.
• 🖌️ Easy to customize colors, font sizes, and layout.

📥 How to Install the Plugin

To install the plugin on your WordPress website:

1. Download the ZIP file: calendar-widget-box.zip.
2. Go to your WordPress Dashboard.
3. Navigate to Plugins > Add New > Upload Plugin.
4. Upload the .zip file and click Install Now.
5. After installation, click Activate.

Once activated, go to Appearance > Widgets and add the “Calendar Widget Box” to any widget area (sidebar, footer, etc.).

🧑‍💻 Plugin Code Structure (Summary)

Here’s a simplified breakdown of what the plugin includes:

calendar-widget-box.php

/*
Plugin Name: Calendar Widget Box
Description: A custom calendar widget with colored month and date box.
Version: 1.0
Author: Andrei
*/

class Calendar_Widget_Box extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'calendar_widget_box',
            __('Calendar Widget Box', 'calendar_widget_box'),
            array('description' => __('A custom calendar with month and date display.', 'calendar_widget_box'))
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<div class="calendar-widget-box">';
        echo '<div class="month">'.date('M').'</div>';
        echo '<div class="day">'.date('d').'</div>';
        echo '</div>';
        echo $args['after_widget'];
    }
}

function register_calendar_widget_box() {
    register_widget('Calendar_Widget_Box');
}
add_action('widgets_init', 'register_calendar_widget_box');

function calendar_widget_box_styles() {
    echo '<style>
    .calendar-widget-box {
        width: 100px;
        text-align: center;
        border-radius: 8px;
        overflow: hidden;
        font-family: sans-serif;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .calendar-widget-box .month {
        background-color: #e53935;
        color: white;
        padding: 10px 0;
        font-weight: bold;
        text-transform: uppercase;
    }
    .calendar-widget-box .day {
        background-color: white;
        color: #333;
        font-size: 24px;
        padding: 20px 0;
    }
    </style>';
}
add_action('wp_head', 'calendar_widget_box_styles');

🎨 Customize the Widget Appearance

Want to change the colors or layout? You can easily modify the inline CSS under the calendar_widget_box_styles function. For example:

• Change red to blue: Modify background-color: #e53935; to #2196f3.
• Increase widget size: Adjust the width or font size values.
• Add animation: Use CSS transitions or add jQuery for date-related animations.

⚙️ Troubleshooting Tips

• If the widget does not appear, ensure it’s added under Appearance > Widgets.
• Clear your cache after installing or updating the plugin.
• Check that your theme supports widgets.

🧠 Bonus: Why Add a Calendar Widget?

• Increases engagement by giving users a sense of “timeliness.”
• Great for news sites, event blogs, or personal journals.
• Adds dynamic content to static sidebar layouts.

📌 Use Cases

• 📰 News Blog: Show readers today’s date for context.
• 🛍️ E-Commerce Site: Highlight daily deals or promo periods.
• 🗓️ Event Blog: Remind visitors of event dates or daily schedules.

🔄 Future Improvements

We plan to enhance this widget with:

• 📆 Full calendar toggle view.
• 🗓️ Highlighting holidays or special dates.
• 🌐 Language and locale support.

🏁 Final Words

The Calendar Widget Box plugin is a simple yet beautiful way to display the current date on your site. It’s easy to install, lightweight, and customizable for any WordPress theme.

🔔For more tutorials like this, consider subscribing to our blog.

📩 Do you have questions or suggestions? Leave a comment or contact us!
🏷️ Tags: WordPress plugin, calendar widget, custom widget, date display, sidebar widget, lightweight plugin, WordPress development, plugin tutorial, widget customization, PHP
📢 Hashtags: #WordPressPlugin, #CalendarWidget, #CustomWidget, #WordPressTips, #PluginDevelopment, #PHPWidgets, #SidebarDesign, #MinimalDesign, #WPTutorial, #DateDisplay

🧭 Closing Notes

A functional date widget can make your website feel more alive and professional. Whether you’re managing a blog or a content portal, the Calendar Widget Box adds just the right touch of modern functionality.