This is How to Create a Custom Widget for WordPress to Enable Marking Categories as "New!"
As a WordPress website owner, you may have noticed that there's no built-in way to mark certain blog categories as "New!" This can be a useful feature, especially for sites that frequently add new content to specific categories.
In this article, we'll walk through the process of creating a custom WordPress widget that allows you to easily mark categories as "New!" This will give your users a visual cue to identify the latest and most relevant content on your site.
How to Create a Custom "New!" Category Widget
To create the custom "New!" category widget, we'll be using the built-in WordPress widget API. This will allow us to add the widget to the Appearance > Widgets section of the WordPress admin dashboard, where users can easily configure and add it to their website.
Here's a step-by-step guide to creating the custom widget:
- Create the Widget Class: We'll start by creating a new PHP class that extends the
WP_Widget
class. This class will contain the necessary functions to handle the widget's form, update, and display.
class Spr123_Categories_Widget extends WP_Widget {
public function __construct() {
$widget_options = array(
'classname' => 'widget_custom_categories_widget',
'description' => 'This is a Custom Blog Categories Widget',
);
parent::__construct( 'custom_categories_widget', 'Custom Categories Widget', $widget_options );
}
// ... (other class methods)
}
- Create the Widget Form: The
form()
method will generate the widget's settings form in the WordPress admin dashboard. This is where users can configure the widget's title and select which categories should be marked as "New!".
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$savedcategories = ! empty( $instance['categories'] ) ? $instance['categories'] : '';
$categories = get_categories( array(
'orderby' => 'name',
'parent' => 0,
"hide_empty" => 0,
) );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
<input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
</p>
<p>
<label for="Categories">Categories:</label>
</p>
<p>
<?php
foreach ( $categories as $category ) {
$checked = in_array($category->term_id, $savedcategories)?'checked':'';
?>
<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id($category->slug); ?>" name="<?php echo $this->get_field_name('categories[]'); ?>" <?php echo $checked; ?> value="<?php echo $category->term_id; ?>"/>
<label for="<?php echo $this->get_field_id($category->slug); ?>"><?php echo esc_attr( $category->name ) . _e( 'Display as NEW - ' ); ?></label><br />
<?php
}
?>
</p>
<?php
}
- Update the Widget Settings: The
update()
method will save the widget's settings when the user makes changes in the admin dashboard.
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );
$instance[ 'categories' ] = $new_instance['categories'];
return $instance;
}
- Display the Widget: The
widget()
method will handle the actual display of the widget on the front-end of your WordPress site.
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance[ 'title' ] );
echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title'];
$categories = get_categories( array(
'include' => $instance['categories'],
'orderby' => 'name',
'order' => 'ASC',
) );
foreach ( $categories as $category ) {
echo '<a href="' . get_category_link( $category->term_id ) . '">';
echo '<span class="category-name">' . esc_attr( $category->name ) . '</span>';
echo '<span class="category-new">NEW</span>';
echo '</a>';
}
echo $args['after_widget'];
}
- Register the Widget: Finally, we need to register the widget with WordPress so that it can be used in the admin dashboard.
function spr123_custom_categories_widget() {
register_widget( 'Spr123_Categories_Widget' );
}
add_action( 'widgets_init', 'spr123_custom_categories_widget' );
With this code in place, you can now add the "Custom Categories Widget" to your WordPress website's sidebar or other widget-ready areas. Users will be able to configure the widget's title and select the categories they want to mark as "New!" using the checkbox options.
Displaying the "New!" Label in Your Theme
To display the "New!" label for the selected categories, you can use the following code snippet in your theme's templates (e.g., archive.php
, single.php
, or index.php
):
$widget_instances = get_option('widget_custom_categories_widget');
if (!empty($widget_instances)) {
$selected_categories = $widget_instances['custom_categories_widget-2']['categories'];
if (!empty($selected_categories)) {
foreach ((array) $selected_categories as $category_id) {
if (in_category($category_id)) {
echo '<span class="category-new">NEW</span>';
break;
}
}
}
}
This code retrieves the selected categories from the widget settings and checks if the current post belongs to any of those categories. If so, it outputs the "NEW" label.
By combining the custom widget and the theme-specific code, you can now easily mark certain blog categories as "New!" on your WordPress website, providing a better user experience and helping your visitors discover the latest content.
Remember to style the "NEW" label using CSS to match the design of your WordPress theme. You can also experiment with different placements and designs to make the "New!" label more prominent and visually appealing.
I hope this guide has been helpful in teaching you how to create a custom WordPress widget to mark categories as "New!". If you have any further questions or need additional assistance, feel free to reach out to the team at Flowpoint.ai, where we can help you identify and fix any technical issues impacting your website's conversion rates.