\n\n\n\n\n\n\n<\/p>
What Are WordPress Widgets?<\/h2>
WordPress widgets make it easy for you to add additional functions to your website through a simple drag-and-drop interface. By default, WordPress ships with several widgets. They provide you with basic utility features and are compatible with every WordPress theme.<\/p>
However, sometimes, those standard widgets can’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’t fulfill your requirements.<\/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>
Where to Begin When Creating a Custom Widget?<\/h2>
First, you need to choose whether you want to create the widget using a plugin or via editing the functions.php<\/a> file. A plugin will enable the custom widget to work on any site while adding code to functions.php<\/strong>. This way, it makes the widget work alongside a specific theme.<\/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 WordPress on Docker<\/a>.<\/p> Once the tool is working correctly, it is time to move it to your website.<\/p> In WordPress, you have to create a custom widget using the standard WP Widget<\/a><\/strong> class from the Widgets API<\/a><\/strong>. There are around 20 functions that you can play around with. Out of these, four<\/strong> is the minimum requirement for any widget to work:<\/p> Of course, you’ve got plenty of other options that provide additional functions. For more on the WP_Widget<\/strong> class, take a look at the WordPress developer page<\/a>.<\/p> \n\n\n Important!<\/strong> It’s strongly recommended to create a full website backup<\/a> before proceeding further. In addition, you should also use a WordPress child theme<\/a> to prevent any issues from affecting your main theme.<\/p><\/div>\n\n\n\n<\/p> For this tutorial, we’ll be creating a simple “Greetings from Hostinger.com!”<\/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> One more thing to note is that we’re writing this code in the functions.php<\/strong> file for the currently loaded theme. That being said, you can use the same code for any custom plugin.<\/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 WP_Widget<\/strong> class, like this:<\/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’s ID, name, and description.<\/p> Now, let’s focus on the widget()<\/strong> function. It defines the look of your WordPress custom widget on the front-end.<\/p> With this, we have configured the output of our widget so that it displays the phrase “Greetings from Hostinger.com!”<\/strong> and widget’s title as specified by the user.<\/p> Now, we have to program the back-end of the widget using the form()<\/strong> method. You can see the result when you want to add the widget from the WordPress Dashboard.<\/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 Default Title<\/strong>.<\/p> Once that’s done, we have to implement update()<\/strong>, which will refresh the widget every time you change the settings.<\/p> We’re taking the current title of the newly created instance, removing any HTML\/PHP tags. Then, we’re passing the title to the instance and returning it.<\/p> Finally, we have to register the new custom widget using add_action()<\/strong> function. Keep in mind that you should place the following code at the top, before extending the WP_Widget<\/strong> class.<\/p> So, we’ve defined a new function called hstngr_register_widget()<\/strong>. It registers our widget using the widget ID, which is specified in the __construct()<\/strong> function.<\/p> Then, we have tied this function using widgets_init<\/strong>, which loads the widget into WordPress through the built-in add_action()<\/strong> method. Your final WordPress custom widget code should look like this:<\/p> Finally, it is time to insert the code to your functions.php<\/strong> file.<\/p> You can finally use your newly-installed widget.<\/p> Congratulations, you have successfully created your first custom WordPress widget!<\/p> WordPress custom widget allows you to add a specific function to your website based on your needs. It’s a great solution whenever you can’t find anything in particular that would meet your specific requirements. or when you’re becoming a WordPress developer<\/a> and want to develop your website.<\/p> To summarize, let’s take a look at the steps once again on how to create your own custom WordPress widget:<\/p> Good luck!<\/p> \n\n\n WordPress Template Hierarchy<\/a> 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’s not a complicated process as you only need basic knowledge of WordPress and PHP. So, without further ado, […]<\/p>\nHow Do WordPress Custom Widgets Work?<\/h2>
\n
Creating a WordPress Custom Widget<\/h2>
1. Extending the WP_Widget class<\/h3>
class hstngr_widget extends WP_Widget {\n\/\/Insert functions here\n}<\/pre>2. Adding __construct()<\/h3>
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' => __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}<\/pre>3. Adding widget()<\/h3>
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>4. Adding form()<\/h3>
public function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?>\n<p>\n<label for=\"<?php echo $this->get_field_id( 'title' ); ?>\"><?php _e( 'Title:' ); ?><\/label>\n<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 ); ?>\" \/>\n<\/p>\n<?php\n}<\/pre>![\"Giving](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/widget-back-end-1024x309.png\")
<\/figure><\/div>5. Adding update()<\/h3>
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>6. Registering WordPress Custom Widget<\/h3>
function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );<\/pre>Adding the Code to functions.php File<\/h2>
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' => __( '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?>\n<p>\n<label for=\"<?php echo $this->get_field_id( 'title' ); ?>\"><?php _e( 'Title:' ); ?><\/label>\n<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 ); ?>\" \/>\n<\/p>\n<?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>\n
![\"Adding](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/editing-functions-php-file-1024x415.png\")
<\/figure><\/div>Using WordPress Custom Widget<\/h2>
\n
![\"Dragging](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sampe-widget-1024x447.png\")
<\/li>\n\n\n\n![\"WordPress](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/hostinger-sample-widget-1024x340.png\")
<\/figure><\/div>Conclusion<\/h2>
\n
Discover More Expert WordPress Techniques<\/h4>\n
\nHow to Create Custom Post Types in WordPress<\/a>
\nHow to Create Custom WordPress Page Templates<\/a>
\nHow to Create a Custom WordPress Post Template<\/a>
\nHow to Setup and Manage Cron Jobs in WordPress<\/a>
\nHow to Add PHP to WordPress<\/a><\/p>\n <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"