How to Create a Custom WordPress Widget

Do you want to create your own custom widgets in WordPress? Widgets allow you to drag and drop elements into any sidebar or widget ready area of your website. In this article, we will show you how to easily create a custom WordPress widget.

What is a WordPress Widget?

WordPress widgets contain pieces of code that you can add to your website’s sidebars or widget ready areas. Think of them as modules that you can use to add different elements by using a simple drag and drop interface.

// Register and load the widget
function camis_load_widget() {
register_widget( 'camis_iconcart_widget' );
}
add_action( 'widgets_init', 'camis_load_widget' );

// Creating the widget
class camis_iconcart_widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'camis_iconcart_widget',
            __('Icon Cart Widget', 'camis'),
            array( 'description' => __( 'Show icon cart', 'camis' ), )
        );
    }
    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );

        echo $args['before_widget'];
        if ( ! empty( $title ) )
            echo $args['before_title'] . $title . $args['after_title'];

        if (class_exists('WooCommerce')) : ?>

            <div class="camis-site-header-cart">
                    <a class="cart-contents" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php esc_attr_e('View your shopping cart', 'camis'); ?>">
                        <span class="amount"><?php echo wp_kses_data(WC()->cart->get_cart_subtotal()); ?></span>
                        <span class="count"><?php echo wp_kses_data(sprintf(_n('%d', '%d ', WC()->cart->get_cart_contents_count(), 'camis'), WC()->cart->get_cart_contents_count())); ?></span>
                    </a>
                <a href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php esc_attr_e('View your shopping cart', 'camis'); ?>">
                <div class="uni-icon-font"><i class="fa fa-shopping-cart"></i></div>
                </a>
                <div class="widget_shopping_cart_content text-left"></div>
            </div>

        <?php endif;
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) ) {
            $title = $instance[ 'title' ];
        }
        else {
            $title = __( 'New title', 'camis' );
        }

        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <?php
    }
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *