{"id":4953,"date":"2017-06-17T17:28:41","date_gmt":"2017-06-17T17:28:41","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=4953"},"modified":"2026-03-09T19:20:06","modified_gmt":"2026-03-09T19:20:06","slug":"how-to-create-custom-widget-in-wordpress","status":"publish","type":"post","link":"\/ng\/tutorials\/how-to-create-custom-widget-in-wordpress\/","title":{"rendered":"How to create WordPress custom widgets: what are they and how do they work?"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Did you know that you can create your own WordPress custom widget? While there are tons of additional widgets that come alongside themes and plugins, WordPress offers its users the option to code custom widgets manually.<\/p><p>It&rsquo;s not a complicated process as you only need basic knowledge of WordPress and PHP. So, without further ado, let&rsquo;s get started!<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-EN.pdf\">Download all-in-one WordPress cheat sheet<\/a><\/p><p>\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-are-wordpress-widgets\">What are WordPress widgets?<\/h2><p>WordPress widgets make it easy for you to add additional functions to your website through a simple drag-and-drop interface. By default, <a href=\"\/ng\/tutorials\/wordpress\/\">WordPress<\/a> ships with several widgets. These provide you with basic features and are compatible with every WordPress theme.<\/p><p>However, sometimes, those standard widgets can&rsquo;t perform the tasks you want. Your best option is to look for plugins offering you the desired function. Unfortunately, you might find that even third-party plugins can&rsquo;t fulfill your requirements.<\/p><p>Thankfully, you have the power to create a WordPress custom widget. Just keep in mind that it has to be built from the ground-up so you can personally fine-tune your custom widget based on your needs.<\/p><h2 class=\"wp-block-heading\" id=\"h-where-should-you-begin-when-creating-a-custom-widget\">Where should you begin when creating a custom widget?<\/h2><p>First, you need to choose whether you want to create the widget using a plugin or via editing the <a href=\"\/ng\/tutorials\/functions-php-wordpress\/\">functions.php<\/a> file. A plugin will enable the custom widget to work on any site while adding code to <strong>functions.php<\/strong>. This way, it makes the widget work alongside a specific theme.<\/p><p>Secondly, you have the option to add the widget on a live site or in a local environment. However, we highly recommend you to implement the widget in a local environment first, to test it out. You can easily do this by following our guide on how to run <a href=\"\/ng\/tutorials\/run-docker-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress on Docker<\/a>.<\/p><p>Once the tool is working correctly, it&rsquo;s time to move it to your website.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-do-wordpress-custom-widgets-work\">How do WordPress custom widgets work?<\/h2><p>In WordPress, you have to create a custom widget using the standard <strong><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\">WP Widget<\/a><\/strong> class from the <strong><a href=\"https:\/\/codex.wordpress.org\/Widgets_API\">Widgets API<\/a><\/strong>. There are around 20 functions that you can play around with. Out of these, <strong>four<\/strong> consist of the minimum requirement for any widget to work:<\/p><ul class=\"wp-block-list\">\n<li><strong>__construct()<\/strong> &ndash; constructor function where you can define your widget&rsquo;s parameters.<\/li>\n\n\n\n<li><strong>widget()<\/strong> &ndash; contains the output of the widget.<\/li>\n\n\n\n<li><strong>form()<\/strong> &ndash; determines widget settings in the WordPress dashboard.<\/li>\n\n\n\n<li><strong>update()<\/strong> &ndash; updates widget settings.<\/li>\n<\/ul><p>Of course, you&rsquo;ve got plenty of other options that provide additional functions. For more on the <strong>WP_Widget<\/strong> class, take a look at the WordPress <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\">developer page<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-creating-a-custom-wordpress-widget\">Creating a custom WordPress widget<\/h2><p><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Important!<\/strong> It&rsquo;s strongly recommended to create a full <a href=\"\/ng\/tutorials\/backups\/downloading-website-backup\/\">website backup<\/a> before proceeding further. In addition, you should also use a WordPress <a href=\"\/ng\/tutorials\/how-to-create-wordpress-child-theme\/\">child theme<\/a> to prevent any issues from affecting your main theme.\n            <\/p><\/div>\n\n\n\n<\/p><p>For this tutorial, we&rsquo;ll be creating a simple <strong>&ldquo;Greetings from Hostinger.com!&rdquo;<\/strong> custom widget so you can learn the basics of widget creation in WordPress. Once that is done, you can move on to creating more complex widgets on your own.<\/p><p>One more thing to note is that we&rsquo;re writing this code in the <strong>functions.php<\/strong> file for the currently loaded theme. That being said, you can use the same code for any custom plugin.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-extending-the-wp-widget-class\">1. Extending the WP_Widget class<\/h3><p>The first thing you need to do is to open any text editor on your computer and create a new class that extends the base <strong>WP_Widget<\/strong> class, like this:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class hstngr_widget extends WP_Widget {\n\/\/Insert functions here\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-2-adding-construct\">2. Adding __construct()<\/h3><p>Next, we start implementing the four standard functions one by one. The first one is the constructor method, which will determine the custom widget&rsquo;s ID, name, and description.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Hostinger Sample Widget', 'hstngr_widget_domain'),\n\/\/ widget description\narray ( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-3-adding-widget\">3. Adding widget()<\/h3><p>Now, let&rsquo;s focus on the <strong>widget()<\/strong> function. It defines the look of your WordPress custom widget on the front-end.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before widget'];\n\/\/if title is present\nIf ( ! empty ( $title ) )\nEcho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( 'Greetings from Hostinger.com!', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}<\/pre><p>With this, we have configured the output of our widget so that it displays the phrase <strong>&ldquo;Greetings from Hostinger.com!&rdquo;<\/strong> and widget&rsquo;s title as specified by the user.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-adding-form\">4. Adding form()<\/h3><p>Now, we have to program the back-end of the widget using the<strong> form()<\/strong> method. You can see the result when you want to add the widget from the WordPress Dashboard.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}<\/pre><p>Here you can see how a custom widget has been set up. If a user applies a title, then that title will be inserted in the HTML form we created. In this example, we will set the name of the title to <strong>Default Title<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1886\" height=\"570\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/public\" alt=\"Giving your WordPress custom widget a title\" class=\"wp-image-20180\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/w=1886,fit=scale-down 1886w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/w=990,fit=scale-down 990w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end.png\/w=1320,fit=scale-down 1320w\" sizes=\"auto, (max-width: 1886px) 100vw, 1886px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-5-adding-update\">5. Adding update()<\/h3><p>Once that&rsquo;s done, we have to implement <strong>update()<\/strong>, which will refresh the widget every time you change the settings.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}<\/pre><p>We&rsquo;re taking the current title of the newly created instance, removing any HTML\/PHP tags. Then, we&rsquo;re passing the title to the instance and returning it.<\/p><h3 class=\"wp-block-heading\" id=\"h-6-registering-your-custom-wordpress-widget\">6. Registering your custom WordPress widget<\/h3><p>Finally, we have to register the new custom widget using <strong>add_action()<\/strong> function. Keep in mind that you should place the following code at the top, before extending the <strong>WP_Widget<\/strong> class.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );<\/pre><h2 class=\"wp-block-heading\" id=\"h-adding-the-code-to-the-functions-php-file\">Adding the code to the functions.php file<\/h2><p>So, we&rsquo;ve defined a new function called <strong>hstngr_register_widget()<\/strong>. It registers our widget using the widget ID, which is specified in the <strong>__construct()<\/strong> function.<\/p><p>Then, we have tied this function using <strong>widgets_init<\/strong>, which loads the widget into WordPress through the built-in <strong>add_action()<\/strong> method. Your final WordPress custom widget code should look like this:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );\nclass hstngr_widget extends WP_Widget {\nfunction __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Hostinger Sample Widget', ' hstngr_widget_domain'),\n\/\/ widget description\narray( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}\npublic function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before_widget'];\n\/\/if title is present\nif ( ! empty( $title ) )\necho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( 'Greetings from Hostinger.com!', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}\npublic function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}\npublic function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}\n}<\/pre><p>Finally, it is time to insert the code to your <strong>functions.php<\/strong> file.<\/p><ol class=\"wp-block-list\">\n<li>Log in to your WordPress admin area. Then, navigate to <strong>Appearance<\/strong> -&gt; <strong>Theme Editor<\/strong> -&gt; <strong>Theme Functions<\/strong>.<\/li>\n\n\n\n<li>Paste the code from your text editor to the bottom of <strong>functions.php<\/strong> file. Click <strong>Update File<\/strong> to save the changes.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1526\" height=\"619\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/public\" alt=\"Adding custom widget code to functions.php file in WordPress\" class=\"wp-image-20182\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/w=1526,fit=scale-down 1526w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/w=990,fit=scale-down 990w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file.png\/w=1320,fit=scale-down 1320w\" sizes=\"auto, (max-width: 1526px) 100vw, 1526px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-using-your-custom-wordpress-widget\">Using your custom WordPress widget<\/h2><p>You can finally use your newly-installed widget.<\/p><ol class=\"wp-block-list\">\n<li>Go to the <strong>Appearance<\/strong> menu, and select <strong>Widgets<\/strong>. You should see a widget named <strong>Hostinger Sample Widget<\/strong> in the <strong>Available Widgets<\/strong> list.<\/li>\n\n\n\n<li>Next, drag the widget and drop it in the <strong>Sidebar<\/strong> section on the right side of the page.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-20184 size-large\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget-1024x447.png\" alt=\"Dragging and dropping a custom widget to the sidebar in WordPress\" width=\"1024\" height=\"447\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget.png\/w=990,fit=scale-down 990w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget.png\/w=1320,fit=scale-down 1320w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget.png\/w=1887,fit=scale-down 1887w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n\n\n\n<li>Save your changes and visit your website. You will be welcomed with a custom widget with the words <strong>&ldquo;Greetings from Hostinger.com&rdquo;<\/strong> inside.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1681\" height=\"558\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/public\" alt=\"WordPress custom widget final result\" class=\"wp-image-20396\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=1681,fit=scale-down 1681w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=414,fit=scale-down 414w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=990,fit=scale-down 990w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget.png\/w=1320,fit=scale-down 1320w\" sizes=\"auto, (max-width: 1681px) 100vw, 1681px\" \/><\/figure><\/div><p>Congratulations, you have successfully created your first custom WordPress widget!<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>Custom WordPress widgets allow you to add a specific function to your website based on your exact needs. It&rsquo;s a great solution whenever you can&rsquo;t find anything in particular that meets your specific requirements, or when you&rsquo;re <a href=\"\/ng\/tutorials\/how-to-become-wordpress-developer\/\">becoming a WordPress developer<\/a> and want to learn about developing widgets.<\/p><p>To summarize, let&rsquo;s review the steps to create your own custom WordPress widget:<\/p><ol class=\"wp-block-list\">\n<li>Create a new class that extends <strong>WP_Widget<\/strong>.<\/li>\n\n\n\n<li>Begin with <strong>__construct()<\/strong> to determine widget&rsquo;s parameters.<\/li>\n\n\n\n<li>Use <strong>widget()<\/strong>&nbsp;to define the appearance of the widget on the front-end.<\/li>\n\n\n\n<li>Add <strong>form()<\/strong> to configure how the widget will look.<\/li>\n\n\n\n<li>Don&rsquo;t forget to add <strong>update()<\/strong> to refresh the widget every time you modify it.<\/li>\n\n\n\n<li>Register the new WordPress custom widget using <strong>add_action()<\/strong> function.<\/li>\n\n\n\n<li>Copy and paste the entire code to the bottom of <strong>functions.php<\/strong> file and click <strong>Update File<\/strong>.<\/li>\n\n\n\n<li>Go to the <strong>Widgets<\/strong> menu and move the widget to the desired place.<\/li>\n<\/ol><p>Good luck!<\/p><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Discover More Expert WordPress Techniques                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/ng\/tutorials\/wordpress-template-hierarchy\/\">WordPress Template Hierarchy<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-custom-post-types\/\">How to Create Custom Post Types in WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-page-template\/\">How to Create Custom WordPress Page Templates<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-post-template\/\">How to Create a Custom WordPress Post Template<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-setup-and-manage-a-wordpress-cron-job\/\">How to Setup and Manage Cron Jobs in WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-add-php-code-to-wordpress-post-or-page\/\">How to Add PHP to WordPress<\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that you can create your own WordPress custom widget? While there are tons of additional widgets that come alongside themes and plugins, WordPress offers its users the option to code custom widgets manually. It&rsquo;s not a complicated process as you only need basic knowledge of WordPress and PHP. So, without further ado, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/how-to-create-custom-widget-in-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Create WordPress Custom Widgets: A Step-by-Step Guide","rank_math_description":"Need more out of your WordPress website? Learn how to create your very own WordPress custom widget in this step-by-step guide.","rank_math_focus_keyword":"wordpress custom widget","footnotes":""},"categories":[22637],"tags":[],"class_list":["post-4953","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-widget-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-widget-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-widget-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/4953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=4953"}],"version-history":[{"count":41,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/4953\/revisions"}],"predecessor-version":[{"id":145365,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/4953\/revisions\/145365"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=4953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=4953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=4953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}