Create custom Widget
![](https://cloudarcade.net/wp-content/uploads/2022/05/carousel-1684591_1280-1024x709.png)
On this tutorial, I will show you how to create a custom Widget with PHP code, it’s pretty simple.
First step, open “Theme Editor” plugin, if you don’t have, you can install it from plugin repository.
![](https://cloudarcade.net/wp-content/uploads/2022/05/hjtg78g.png)
Select “custom.php” file, then click EDIT. Is recommended to always put custom PHP script or widgets on custom.php since custom.php will not overridden during theme update.
You will see this:
![](https://cloudarcade.net/wp-content/uploads/2022/05/j7.png)
Put code below inside php tag:
class widget_sample extends Widget {
function __construct() {
$this->name = 'Sample Widget';
$this->id_base = 'sample-widget';
$this->description = 'This is sample Widget.';
}
public function widget( $instance, $args = array() ){
$html = isset($instance['html-sample']) ? $instance['html-sample'] : '';
echo "<h3>$html</h3>";
}
public function form( $instance = array() ){
if(!isset( $instance['html-sample'] )){
$instance['html-sample'] = '';
}
?>
<div class="form-group">
<label><?php _e('Test form') ?>:</label>
<input type="text" class="form-control" name="html-sample" value="<?php echo $instance['html-sample'] ?>">
</div>
<?php
}
}
register_widget( 'widget_sample' );
Explainer:
- Line 2: widget child, you can replace “widget_sample” with your widget name (lowercase, alphabet characters, no space), make sure it’s unique
- Line 4-6: Widget details, name & id_base must be unique
- Line 8: widget() is called on theme code or visitor page also can be called renderer
- Line 9: If $instance[‘html-sample’] is exist, store the value to $html, if not, put empty string instead.
- Line 10: Show $html
- Line 13: form() is called on admin panel “Layout > Widgets”, we can put widget configuration script here
- Line 15-17: Set $instance[‘html-sample’] to empty string if not exist
- Line 19-22: Widget configuration form
- Line 21: Make sure input name is same with instance name, on this sample: name=”html-sample”
- Line 26: Register the widget, if this fuction not called, your widget won’t be loaded.
Then save it
![](https://cloudarcade.net/wp-content/uploads/2022/05/sdqa.png)
Now you can visit “Layout > Widgets” page, you will see new widget you just created.
![](https://cloudarcade.net/wp-content/uploads/2022/05/jsua-1024x439.png)
Drag and drop “Sample Widget” into “Sidebar 1” widget placement. Fill the input field, then click save
![](https://cloudarcade.net/wp-content/uploads/2022/05/jgy.png)
Here is the result on game page sidebar:
![](https://cloudarcade.net/wp-content/uploads/2022/05/jhg7p.png)
You can also using built-in functions or get current page object and variables on widget()
Sample code:
class widget_sample extends Widget {
function __construct() {
$this->name = 'Sample Widget';
$this->id_base = 'sample-widget';
$this->description = 'This is sample Widget.';
}
public function widget( $instance, $args = array() ){
global $custom_path;
global $game;
if($custom_path == 'game'){ // Check if real page name is "game"
echo '<h3>Current game is: '.$game->title.'</h3>';
echo '<p>This game have '.$game->upvote.' likes</p>';
} else {
echo 'This widget only work on game page';
}
}
public function form( $instance = array() ){
//
}
}
register_widget( 'widget_sample' );
don’t forget to put “global” type on global variable.
Result:
![](https://cloudarcade.net/wp-content/uploads/2022/05/jh8.png)
Advanced
Create a new Widget placement
Put code below inside custom.php
register_sidebar(array(
'name' => 'New Placement',
'id' => 'new-placement',
'description' => 'Sample Placement.',
));
Result:
![](https://cloudarcade.net/wp-content/uploads/2022/05/uy8p.png)
Now you can put widgets on your new placement
Then put this code on your theme code to show the widget placement:
<?php widget_aside('new-placement') ?>