Widget Archives - Josh Richet

( ! ) Notice: A non well formed numeric value encountered in /var/www/html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Call Stack
#	Time	Memory	Function	Location
1	0.0001	395848	{main}( )	.../index.php:0
2	0.0002	396136	require( '/var/www/html/wp-blog-header.php' )	.../index.php:17
3	1.4635	12790464	require_once( '/var/www/html/wp-includes/template-loader.php' )	.../wp-blog-header.php:19
4	1.4711	12919840	include( '/var/www/html/wp-content/themes/storefront/archive.php' )	.../template-loader.php:98
5	1.5622	13339744	get_template_part( )	.../archive.php:25
6	1.5622	13340208	locate_template( )	.../general-template.php:168
7	1.5623	13340288	load_template( )	.../template.php:671
8	1.5623	13340576	require( '/var/www/html/wp-content/themes/storefront/loop.php' )	.../template.php:724
9	1.5630	13342080	get_template_part( )	.../loop.php:21
10	1.5630	13342552	locate_template( )	.../general-template.php:168
11	1.5630	13342632	load_template( )	.../template.php:671
12	1.5631	13348512	require( '/var/www/html/wp-content/themes/storefront/content.php' )	.../template.php:724
13	1.5646	13349264	do_action( )	.../content.php:19
14	1.5646	13349640	WP_Hook->do_action( )	.../plugin.php:478
15	1.5646	13349640	WP_Hook->apply_filters( )	.../class-wp-hook.php:312
16	1.5682	13353672	storefront_post_content( )	.../class-wp-hook.php:288
17	1.5723	13365920	the_content( )	.../storefront-template-functions.php:414
18	1.5723	13367544	apply_filters( )	.../post-template.php:253
19	1.5723	13367944	WP_Hook->apply_filters( )	.../plugin.php:206
20	1.5797	13377128	CrayonWP::the_content( )	.../class-wp-hook.php:288
21	1.5857	13440720	CrayonHighlighter->output( )	.../crayon_wp.class.php:703
22	1.6003	13581568	CrayonFormatter::print_code( )	.../crayon_highlighter.class.php:189

( ! ) Notice: A non well formed numeric value encountered in /var/www/html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Call Stack
#	Time	Memory	Function	Location
1	0.0001	395848	{main}( )	.../index.php:0
2	0.0002	396136	require( '/var/www/html/wp-blog-header.php' )	.../index.php:17
3	1.4635	12790464	require_once( '/var/www/html/wp-includes/template-loader.php' )	.../wp-blog-header.php:19
4	1.4711	12919840	include( '/var/www/html/wp-content/themes/storefront/archive.php' )	.../template-loader.php:98
5	1.5622	13339744	get_template_part( )	.../archive.php:25
6	1.5622	13340208	locate_template( )	.../general-template.php:168
7	1.5623	13340288	load_template( )	.../template.php:671
8	1.5623	13340576	require( '/var/www/html/wp-content/themes/storefront/loop.php' )	.../template.php:724
9	1.5630	13342080	get_template_part( )	.../loop.php:21
10	1.5630	13342552	locate_template( )	.../general-template.php:168
11	1.5630	13342632	load_template( )	.../template.php:671
12	1.5631	13348512	require( '/var/www/html/wp-content/themes/storefront/content.php' )	.../template.php:724
13	1.5646	13349264	do_action( )	.../content.php:19
14	1.5646	13349640	WP_Hook->do_action( )	.../plugin.php:478
15	1.5646	13349640	WP_Hook->apply_filters( )	.../class-wp-hook.php:312
16	1.5682	13353672	storefront_post_content( )	.../class-wp-hook.php:288
17	1.5723	13365920	the_content( )	.../storefront-template-functions.php:414
18	1.5723	13367544	apply_filters( )	.../post-template.php:253
19	1.5723	13367944	WP_Hook->apply_filters( )	.../plugin.php:206
20	1.5797	13377128	CrayonWP::the_content( )	.../class-wp-hook.php:288
21	1.5857	13440720	CrayonHighlighter->output( )	.../crayon_wp.class.php:703
22	1.6003	13581568	CrayonFormatter::print_code( )	.../crayon_highlighter.class.php:189

Sometimes you just can’t find a pre-built widget that does exactly what you want, when you run into this scenario, your best bet is to build something from scratch. This tutorial will is an answer to “How do I build a custom WordPress widget?“.

WordPress widgets are objects that have several required parts:

Constructor (__construct) – actions to take when the widget is first created like enqueueing javascript or stylesheet files.
Front-end (widget) – the widget’s HTML output
Back-end (form) – the form for the widget’s edit interface in the Admin section
Update (update) – catches the form submission from the back-end form, updating the database

The easiest way to add a custom widget type to your theme is to build a class that looks something like this:

<?php
/*
Plugin Name: A Widget
Plugin URI: https://joshrichet.com
Description: A Hello World Widget Tutorial
Author: Josh Richet
Version: 1.0
Author URI: https://joshrichet.com
*/
// Block direct requests
if ( !defined('ABSPATH') )
	die('-1');
	
	
add_action( 'widgets_init', function(){
     register_widget( 'A_Widget' );
});	
/**
 * Adds A_Widget widget. I would rename this class when using this code as a template.
 */
class A_Widget extends WP_Widget {
	/**
	 * Register widget with WordPress.
	 */
	function __construct() {
		parent::__construct(
			'A_Widget ', // Base ID
			__('Hello World Widget', 'text_domain'), // Name
			array( 'description' => __( 'Widget Tutorial!', 'text_domain' ), ) // Args
		);
	}
	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param Array $args     Widget arguments.
	 * @param Array $instance Saved values from database.
	 */
	public function widget( $args, $instance ) {
	
     	echo $args['before_widget'];
		if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
		}
		echo __( 'Hello, World!', 'text_domain' );
		echo $args['after_widget'];
	}
	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'New title', 'text_domain' );
		}
		?>
		<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 
	}
	/**
	 * Clean form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		return $instance;
	}
} // class A_Widget

<?php

Plugin Name: A Widget

Plugin URI: https://joshrichet.com

Description: A Hello World Widget Tutorial

Author: Josh Richet

Version: 1.0

Author URI: https://joshrichet.com

// Block direct requests

if ( !defined('ABSPATH') )

die('-1');

add_action( 'widgets_init', function(){

register_widget( 'A_Widget' );

});

/**

* Adds A_Widget widget. I would rename this class when using this code as a template.

class A_Widget extends WP_Widget {

/**

* Register widget with WordPress.

function __construct() {

parent::__construct(

'A_Widget ', // Base ID

__('Hello World Widget', 'text_domain'), // Name

array( 'description' => __( 'Widget Tutorial!', 'text_domain' ), ) // Args

);

}

/**

* Front-end display of widget.

* @see WP_Widget::widget()

* @param Array $args Widget arguments.

* @param Array $instance Saved values from database.

public function widget( $args, $instance ) {

echo $args['before_widget'];

if ( ! empty( $instance['title'] ) ) {

echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];

}

echo __( 'Hello, World!', 'text_domain' );

echo $args['after_widget'];

}

/**

* Back-end widget form.

* @see WP_Widget::form()

* @param array $instance Previously saved values from database.

public function form( $instance ) {

if ( isset( $instance[ 'title' ] ) ) {

$title = $instance[ 'title' ];

}

else {

$title = __( 'New title', 'text_domain' );

}

<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

}

/**

* Clean form values as they are saved.

* @see WP_Widget::update()

* @param array $new_instance Values just sent to be saved.

* @param array $old_instance Previously saved values from database.

* @return array Updated safe values to be saved.

public function update( $new_instance, $old_instance ) {

$instance = array();

$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;

}

} // class A_Widget

To embed this widget type into your own custom theme, just include this php in your functions.php

To add this widget type to your custom plugin, include this code in a standard plugin file.

Tag: Widget

Basic WordPress Widget Tutorial

Share this: