wickywills
7/10/2018 - 8:50 AM

Wordpress widget template

Register new sidebar

Add the following to /functions.php

function theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Support Sidebar', 'lanmaster' ),
        'id' => 'support-sidebar',
        'description' => __( 'Sidebar for support section.', 'lanmaster' ),
    ) );
}
add_action( 'widgets_init', 'theme_widgets_init' );

Then call the sidebar in your template file using

get_sidebar('support');

Create new widget

Add the following to your /functions/widgets/my-widget.php

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

// Creating the widget
class link_box_widget extends WP_Widget {

    function __construct() {
        $widget_options = array(
            'classname' => 'link_box_widget',
            'description' => 'Widget for creating link boxes in the sidebar. See /support page for example',
        );

        parent::__construct(

            // Base ID of your widget
            'link_box_widget',

            // Widget name will appear in UI
            __('Link Box Widget', 'lanmaster'),

            $widget_options
        );
    }

    // Creating widget front-end
    public function widget( $args, $instance ) {
        $title      = apply_filters( 'widget_title', $instance[ 'title' ] );
        $link       = apply_filters( 'widget_link', $instance[ 'link' ] );
        $imageUrl   = apply_filters( 'widget_link', $instance[ 'link' ] );

        echo '
            <a class="lm-link-box lm-link-box--small lm-link-box--sidebar" href="'.$link.'">
                <div class="lm-link-box__image" style="background-image: url('.$imageUrl.')"></div>
                <div class="lm-link-box__content">
                    '.$title.'
                </div>
            </a>
        ';
    }

    // Widget Backend
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
            <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
        </p>

        <?php $link = ! empty( $instance['link'] ) ? $instance['link'] : ''; ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'link' ); ?>">Link:</label>
            <input type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" />
        </p>

        <?php
    }

    // Updating widget replacing old instances with new
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        $instance['link'] = ( ! empty( $new_instance['link'] ) ) ? strip_tags( $new_instance['link'] ) : '';
        return $instance;
    }
} // Class link_box_widget ends here