Overview.
This guide outlines creating a WordPress add-on that displays specific messages on given dates. It includes an admin control panel for managing multiple messages and a shortcode for displaying them in posts.
Example Prompt
“Create a WordPress plugin that allows users to display custom messages on specific dates. Include an admin panel for managing multiple messages, a shortcode for displaying them in posts, and the option to style messages with CSS classes. Ensure the plugin supports basic HTML markup in the messages.”
Step 1: Setup Your Plugin Folder
- Create a new folder in your WordPress wp-content/plugins/ directory. Name this folder easycoding-date-specific-messages.
Step 2: Create the Main Plugin File
- Inside the easycoding-date-specific-messages folder, create a new PHP file named easycoding-date-specific-messages.php. This will be the main plugin file.
- Add the following code to the easycoding-date-specific-messages.php file:
<?php
/**
* Plugin Name: EasyCodingWithAI - Date Specific Messages
* Description: Show messages on specific dates with admin control for multiple messages.
* Version: 1.0
* Author: Your Name
*/
// Create the database table for storing messages
function easycoding_date_messages_install() {
global $wpdb;
$table_name = $wpdb->prefix . 'easycoding_date_messages';
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE $table_name (
id mediumint(9) NOT NULL AUTO_INCREMENT,
start_date date NOT NULL,
end_date date NOT NULL,
message text NOT NULL,
css_class varchar(255) DEFAULT '' NOT NULL,
PRIMARY KEY (id)
) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
register_activation_hook(__FILE__, 'easycoding_date_messages_install');
// Admin menu
function easycoding_date_messages_menu() {
add_menu_page('Date Messages', 'Date Messages', 'manage_options', 'easycoding-date-messages', 'easycoding_date_messages_admin_page');
}
add_action('admin_menu', 'easycoding_date_messages_menu');
// Admin page
function easycoding_date_messages_admin_page() {
global $wpdb;
$table_name = $wpdb->prefix . 'easycoding_date_messages';
// Insert new message
if (isset($_POST['add_message'])) {
$start_date = sanitize_text_field($_POST['start_date']);
$end_date = sanitize_text_field($_POST['end_date']);
$message = wp_kses_post($_POST['message']);
$css_class = sanitize_text_field($_POST['css_class']);
$wpdb->insert(
$table_name,
[
'start_date' => $start_date,
'end_date' => $end_date,
'message' => $message,
'css_class' => $css_class
]
);
}
// Delete message
if (isset($_POST['delete_message'])) {
$id = intval($_POST['delete_message']);
$wpdb->delete($table_name, ['id' => $id]);
}
// Retrieve messages
$date_messages = $wpdb->get_results("SELECT * FROM $table_name");
// Display messages in admin
?>
<div class="wrap">
<h1>Date Specific Messages</h1>
<form method="post">
<h2>Add New Message</h2>
<table class="form-table">
<tr>
<th scope="row"><label for="start_date">Start Date</label></th>
<td>
<input type="date" name="start_date" class="regular-text" required />
<p class="description">The date on which the message will start displaying.</p>
</td>
</tr>
<tr>
<th scope="row"><label for="end_date">End Date</label></th>
<td>
<input type="date" name="end_date" class="regular-text" required />
<p class="description">The date on which the message will stop displaying.</p>
</td>
</tr>
<tr>
<th scope="row"><label for="message">Message</label></th>
<td>
<textarea name="message" class="large-text" rows="5" required></textarea>
<p class="description">Enter the message to be displayed. You can use basic HTML tags.</p>
</td>
</tr>
<tr>
<th scope="row"><label for="css_class">CSS Class</label></th>
<td>
<input type="text" name="css_class" class="regular-text" />
<p class="description">Optional: Add a CSS class to style the message (leave empty for default styling).</p>
</td>
</tr>
</table>
<p class="submit">
<input type="submit" name="add_message" class="button button-primary" value="Add Message" />
</p>
</form>
<h2>Existing Messages</h2>
<table class="wp-list-table widefat fixed striped">
<thead>
<tr>
<th>ID</th>
<th>Start Date</th>
<th>End Date</th>
<th>Message</th>
<th>CSS Class</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
if ($date_messages) {
foreach ($date_messages as $message_data) {
echo "<tr>
<td>{$message_data->id}</td>
<td>{$message_data->start_date}</td>
<td>{$message_data->end_date}</td>
<td>{$message_data->message}</td>
<td>{$message_data->css_class}</td>
<td>
<form method='post' style='display:inline;'>
<input type='hidden' name='delete_message' value='{$message_data->id}' />
<input type='submit' class='button button-secondary' value='Delete' onclick=\"return confirm('Are you sure?');\" />
</form>
</td>
</tr>";
}
} else {
echo "<tr><td colspan='6'>No messages found.</td></tr>";
}
?>
</tbody>
</table>
</div>
<?php
}
// Shortcode to display messages
function easycoding_date_messages_shortcode() {
global $wpdb;
$table_name = $wpdb->prefix . 'easycoding_date_messages';
$current_date = current_time('Y-m-d');
$messages = $wpdb->get_results("SELECT * FROM $table_name WHERE start_date <= '$current_date' AND end_date >= '$current_date'");
$output = '';
if ($messages) {
foreach ($messages as $message) {
$output .= "<div class='" . esc_attr($message->css_class) . "'>" . wp_kses_post($message->message) . "</div>";
}
}
return $output;
}
add_shortcode('date_message', 'easycoding_date_messages_shortcode');
// Enqueue CSS file
function easycoding_date_messages_enqueue_styles() {
wp_enqueue_style('easycoding-date-messages-style', plugins_url('assets/css/easycoding-date-specific-messages.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'easycoding_date_messages_enqueue_styles');
?>
Step 3: Create the CSS File
- Create a new folder named assets inside your easycoding-date-specific-messages folder.
- Inside the
assets folder, create another folder named css. - Create a new CSS file inside the css folder named easycoding-date-specific-messages.css.
- Add your styles to the easycoding-date-specific-messages.css file. Here’s a simple example:
.easycoding-date-message {
background-color: #f0f8ff;
border: 1px solid #0073aa;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
Step 4: Activate the Plugin
- Go to your WordPress admin panel.
- Navigate to Plugins > Installed Plugins.
- Find EasyCodingWithAI – Date Specific Messages and click Activate.
Step 5: Use the Shortcode
To display the date-specific messages, you can use the shortcode [date_message]. This can be added in several ways:
- In a Post or Page:
- Edit the post or page where you want the messages to appear.
- Simply insert the shortcode
[date_message] in the content editor where you want the messages to show.
- In a Template File:
- If you want to display the messages in a theme template file (e.g.,
single.php, page.php), you can use the following PHP code: <?php echo do_shortcode('[date_message]'); ?>
Disclaimer
The coding tips and guides provided on this website are intended for informational and educational purposes only. While we strive to offer accurate and helpful content, these tips are meant as a starting point for your own coding projects and should not be considered professional advice.
We do not guarantee the effectiveness, security, or safety of any code or techniques discussed on this site. Implementing these tips is done at your own risk, and we encourage you to thoroughly test and evaluate any code before deploying it on your own website or application.
By using this site, you acknowledge that we are not responsible for any issues, damages, or losses that may arise from your use of the information provided herein.
