How to Create a Custom WordPress Widget

Do you want to create your own custom widgets in WordPress? Widgets allow you to drag and drop elements into any sidebar or widget ready area of your website. In this article, we will show you how to easily create a custom WordPress widget.

Creating a custom WordPress widget

What is a WordPress Widget?

WordPress widgets contain pieces of code that you can add to your website’s sidebars or widget ready areas. Think of them as modules that you can use to add different elements by using a simple drag and drop interface.

By default, WordPress comes with a standard set of widgets that you can use with any WordPress theme. See our beginner’s guide on how to add and use widgets in WordPress.

WordPress widgets

WordPress also allows developers to create their own custom widgets. Many WordPress themes and plugins come with their own custom widgets that you can add to your sidebars.

For example, you can add a contact form, a custom login form, or a photo gallery to a sidebar without writing any code.

Having said that, let’s see how to easily create your own custom widgets in WordPress.

Creating a Custom Widget in WordPress

Before we get started, it would be best if you create a site-specific plugin where you will be pasting the widget code from this tutorial.

You can also paste the code in your theme’s functions.php file. However, it will only be available when that particular theme is active.

In this tutorial, we will create a simple widget that just greets visitors. Take a look at this code and then paste it in your site-specific plugin to see it in action.

 // Register and load the widget
function wpb_load_widget() { register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' ); // Creating the widget class wpb_widget extends WP_Widget { function __construct() {
parent::__construct( // Base ID of your widget 'wpb_widget', // Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), // Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) );
} // Creating widget front-end public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] ); // before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title']; // This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
} // Widget Backend public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>

After adding the code you need to head over to Appearance » Widgets page. You will notice the new WPBeginner Widget in the list of available widgets. You need to drag and drop this widget to a sidebar.

Custom WordPress widget added to a sidebar

Now you can visit your website to see it in action.

Previewing your custom widget

Now let’s study the code again.

First we registered the ‘wpb_widget’ and loaded our custom widget. After that we defined what that widget does, and how to display the widget back-end.

Lastly, we defined how to handle changes made to the widget.

Now there are a few things that you might want to ask. For example, what’s the purpose wpb_text_domain?

WordPress uses gettext to handle translation and localization. This wpb_text_domain and __e tells gettext to make a string available for translation. See how you can find translation ready WordPress themes.

If you are creating a custom widget for your theme, then you can replace wpb_text_domain with your theme’s text domain.

We hope this article helped you learn how to easily create a custom WordPress widget. You may also want to see our list of the most useful WordPress widgets for your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

How to Display Author’s Twitter and Facebook on the Profile Page

Do you want to display your author’s Twitter and Facebook links on their WordPress profile page? By default, WordPress user profile page does not have any fields to add Facebook or Twitter profiles. In this article, we will show you how to easily display author’s Twitter and Facebook profile links in WordPress.

How to Add Author's Twitter & Facebook in WordPress Profile Page

1. Add Twitter and Facebook Profiles with Author Bio Box

This method is easier and is recommended for all users.

First, you need to install and activate the Author Bio Box plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Author Bio Box page in your WordPress admin to configure plugin settings.

Author bio box

First you need to select where you want to display the author bio box. The plugin can automatically show the author bio box below posts only or below posts and on homepage.

After that you can select background color, text color, gravatar size, border, etc.

Don’t forget to click on the save changes button to store your settings.

Next, you need to go to the Users » All Users page. Here you need to click on the edit link below the user account.

Edit author profile

This will bring you to the user’s profile page. You will notice that there are new social profile fields available on this page.

Now you just need to enter the author’s Facebook, Twitter, or any other social media profile URLs in the respective fields.

Enter your social profile URLs

Once you are done, click on the update profile link.

You can now view any posts written by that user, and you will see their author bio box with icons for their Twitter, Facebook, and other social media profiles.

Author bio box with social profiles

Registered users on your WordPress site can also edit their own profiles to add links for their Facebook and Twitter pages. You can also send an email to all registered users on your website and ask them to update their profiles.

2. Display Twitter and Facebook Profiles with Yoast SEO

This method is for advanced users because it will require you to edit WordPress theme files. If you haven’t done this before, then check out our guide on how to copy and paste code in WordPress.

If you are already using Yoast SEO plugin on your website, then you are in luck as it can be used to add Twitter and Facebook profile fields in author’s profile page.

The problem is that Yoast does not automatically display them in the author bio, but don’t worry we will show you how to do that.

Related: How to properly install and setup Yoast SEO plugin on your website.

Once you have Yoast plugin setup, you need to head over to the Users » All Users page, and then click on the edit link below the author name.

Edit author profile

On the user’s profile page, you will notice new Facebook and Twitter profile fields. For Twitter, you just need to enter the user handle without @ symbol.

For Facebook, you will need to enter the complete Facebook profile URL.

Facebook and Twitter fields in user profile

Once you are done, click on the update profile button to store your changes.

Now you need to display these fields as links in your theme.

You can do this by adding the following code to your theme files where you want to display the author profile links.

post_author );
$facebook = get_the_author_meta( 'facebook', $post->post_author );
echo 'Twitter | Facebook';
?> 

Save your changes and view a post on your website.

Here is how it looked on our demo website.

Author social profile links

We hope this article helped you learn how to display author’s Twitter and Facebook profile links in WordPress. You may also want to see our list of how to show an authors list with photos in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

How to Add Title Attribute in WordPress Navigation Menus

Recently, one of our readers asked if there’s a way to add title attribute in WordPress menus? Title attribute allows you to provide extra information about a link. It often appears as tooltip text when the mouse moves over the link. In this article, we will show you how to add title attribute in WordPress navigation menus.

How to Add the Title Attributes in WordPress Menus

Why Use Title Attribute in Menus?

Title attribute is an HTML attribute that can be added to any element, but it is most commonly used with links and images.

It allows you to provide additional information about the link or the image. See our guide on the difference between what’s the difference between image alt text vs title.

Title attribute displayed as a tooltip for an image

Typically web browsers display the title attribute on mouseover. This allows users to see where this link will take them before they click on it.

Screen readers may also read title attribute, but many screen readers will ignore it and will only read the anchor text.

Some SEO experts believe that it is not useful while others claim it is useful for SEO as it allows you to provide more context.

WordPress removed title attribute from insert link popup in version 4.2. However, you can easily add the title and rel=nofollow options in insert link popup.

Having said that, let’s take a look at how to add title attribute in WordPress navigation menus.

Adding Title Attribute in WordPress Navigation Menu Items

First you need to visit Appearance » Menus page and click on the ‘Screen Options‘ tab in the top right corner of the screen.

Enable title attribute for navigation menus in WordPress

This will bring down a menu where you need to click on the check box next to Title Attribute option.

After that, simply scroll down and click on any menu item in your existing menu to expand it. You will now see the title attribute field.

Add title attribute to the menu item

You can now add the text you want to use as title and then repeat it for all menu items in your navigation menu.

Don’t forget to click on the save menu button to store your changes.

You can now visit your website and take your mouse to a link in navigation menu. You will see the title attribute displayed as tooltip.

Title displayed in tooltip

You can take title attributes even further with jQuery by adding fancy tooltips on mouseover effect.

We hope this article helped you learn how to add title attribute in WordPress navigation menus. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.