Posted on Leave a comment

Basic WordPress Widget Tutorial


( ! ) 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
#TimeMemoryFunctionLocation
10.0001396072{main}( ).../index.php:0
20.0001396360require( '/var/www/html/wp-blog-header.php' ).../index.php:17
31.345512491848require_once( '/var/www/html/wp-includes/template-loader.php' ).../wp-blog-header.php:19
41.352712544824include( '/var/www/html/wp-content/themes/storefront/single.php' ).../template-loader.php:78
51.565213104240get_template_part( ).../single.php:19
61.565213104760locate_template( ).../general-template.php:168
71.565313104856load_template( ).../template.php:671
81.565313105128require( '/var/www/html/wp-content/themes/storefront/content-single.php' ).../template.php:724
91.566713105880do_action( ).../content-single.php:21
101.566713110352WP_Hook->do_action( ).../plugin.php:465
111.566713110352WP_Hook->apply_filters( ).../class-wp-hook.php:310
121.569913179304storefront_post_content( ).../class-wp-hook.php:286
131.570913181856the_content( ).../storefront-template-functions.php:414
141.570913183136apply_filters( ).../post-template.php:247
151.571013183536WP_Hook->apply_filters( ).../plugin.php:208
161.580213192056CrayonWP::the_content( ).../class-wp-hook.php:286
171.584313255008CrayonHighlighter->output( ).../crayon_wp.class.php:703
181.600813330320CrayonFormatter::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
#TimeMemoryFunctionLocation
10.0001396072{main}( ).../index.php:0
20.0001396360require( '/var/www/html/wp-blog-header.php' ).../index.php:17
31.345512491848require_once( '/var/www/html/wp-includes/template-loader.php' ).../wp-blog-header.php:19
41.352712544824include( '/var/www/html/wp-content/themes/storefront/single.php' ).../template-loader.php:78
51.565213104240get_template_part( ).../single.php:19
61.565213104760locate_template( ).../general-template.php:168
71.565313104856load_template( ).../template.php:671
81.565313105128require( '/var/www/html/wp-content/themes/storefront/content-single.php' ).../template.php:724
91.566713105880do_action( ).../content-single.php:21
101.566713110352WP_Hook->do_action( ).../plugin.php:465
111.566713110352WP_Hook->apply_filters( ).../class-wp-hook.php:310
121.569913179304storefront_post_content( ).../class-wp-hook.php:286
131.570913181856the_content( ).../storefront-template-functions.php:414
141.570913183136apply_filters( ).../post-template.php:247
151.571013183536WP_Hook->apply_filters( ).../plugin.php:208
161.580213192056CrayonWP::the_content( ).../class-wp-hook.php:286
171.584313255008CrayonHighlighter->output( ).../crayon_wp.class.php:703
181.600813330320CrayonFormatter::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:

  1. Constructor (__construct) – actions to take when the widget is first created like enqueueing javascript or stylesheet files.
  2. Front-end  (widget) – the widget’s HTML output
  3. Back-end (form) – the form for the widget’s edit interface in the Admin section
  4. 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:

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.