WordPress Widgets Topic Index

WordPress Widgets Topic Index

Topic Index for "WordPress Widgets"

All posts made by Top Five Advisor that mention using WordPress widgets. See how to configure your WordPress widgets for display on your website.

5 Social Media Widgets to Enhance Your WordPress Sidebar

One of the best ways to enhance your website to attract return visitors is to add social media integration into your website. Besides integrating your social media with WordPress SEO, you can also add some really nice eye-catching widgets to your WordPress sidebar that will help you increase follows, likes and social commenting.

Heres’s our choice of 5 social media widgets that you can implement on your website. Keep in mind, the more you add, the longer your website will take to load, so pick and choose your favorites but mind your visitor, don’t use them all, that’d be overkill. Instead, choose one or two and then add some social media icons or links to your other social media pages you’d like people to visit.

1) Facebook Page Plugin

Facebook Page PluginThis plugin is brand new at the time of this writing and replaces the now deprecated Facebook Like Box. You can use the code they provide as a “Text” widget on your sidebar to display your Facebook page to all of your visitors.

What’s nice about this is there’s a “Like” button and a “Share” button that will encourage people to like and share your page to others.

Visit the Facebook Page Plugin site, enter your page’s URL and then begin customizing how your widget will look on your website. You can customize:

– Width: 280x to 500px
– Height: 130px or higher
– Hide or show the cover photo (screenshot shows it)
– Hide or show friend faces (screenshot shows it)
– Show page posts (screenshot shows it)

Once you customize the plugin, then click the Get Code option and you’ll get the code you need to get this to show up on your website.

Facebook Code

Enter the first code into your customized theme or child theme header.php file or look for a theme options on your dashboard since some themes come with a way to enter code into the header. An example of this is Thrive Themes which allows you to go to Thrive Themes > Thrive Options > Analytics / Scripts > Header Script box.

Once you have that added, you’d then add the second code as a text widget. Go to Appearance > Widgets. Look for a sidebar section then drag and drop the “Text” widget to that area. From there, you’ll get a box to enter the code in.

2) Twitter Widget

Log in to the Twitter account you want to setup a widget on then go to the Twitter Widgets page then click the “Create new” button. From there, you’ll see this configuration screen to begin setting up your new site widget:

Twitter Widget

From here, notice all of the options available starting with the tab area. They are as follows:

  • User Timeline: You can create a traditional “User timeline” widget that will show your users your latest tweets along with customization options including the ability to exclude replies, enable auto-expanded photos, customize the higher from 250px or bigger, choose a color theme and link color.
  • Favorites: This will show off your most recent tweets that you have favorited. Options include auto-expanded photos, height, theme and link color.
  • List: Show off tweets from a list of users using the Twitter list feature. The best use of this would be to create an employee list of accounts from your website’s staff and instruct your staff members to make sure they only tweet stuff related to your website or website’s interests. Options include auto-expanded photos, height, theme and link color.
  • Search: Show off a specific search query on your website. You could specify a hashtag or any query but you won’t have control of what appears since anyone tweet with any hashtag or search query. Options include only showing top tweets, safe search mode, auto-expand photos, height, theme and link color.
  • Collection: If you have created a collection on your Twitter account, you can display that collection of tweets in a widget. Options include auto-expand photos, height, theme and link color.

Once you make your decision and customize the settings, click the blue “Create widget” button which will cause a message Your widget has been created along with a small code to copy and paste into a text widget as explained in the Facebook Page Plugin instructions above. You won’t need to add a special code to the header section of your website with this code.

3) Google+ Badge

Google+ BadgeAnother great social media widget integration is the Google+ Badge. This badge is similar to the Facebook Page Plugin except it doesn’t allow you to display your most recent posts. It allows people to add your Google+ page to circles and also to +1 the page. This feature was also mentioned in our Google+ Beginner’s Guide and makes yet another appearance here.

Head on over to the Google+ Badge page and wait a few seconds for the page to fully load. You’ll miss the badge creation page if you impatiently scroll down the page, give it a few seconds and the badge creation options will appear right on the top of the page.

Here’s the features you can choose from and an explanation:

  • Google+ User: Select either your main profile or your Google+ page.
  • Features: Choose Badge or Icon. Most use badge here.
  • Layout: Portrait or Landscape. Use portrait to get the screenshot we show here or use landscape for a much smaller height profile.
  • Width: Portraight, 180px – 450px. Landscape, 273px – 450px.
  • Color theme: Light or dark.
  • Cover photo:  For portrait mode only, allows you to disable the cover photo.
  • Tagline: For portrait mode only, allows you to disable the tagline.

Under advanced options, we recommend enabling “Dynamic” because this will enable the dynamic load feature which will improve your initial page loading time.

Once you are done, you will notice below the badge is a snippet of code that has been automatically generated for you. There’s two parts of this code just like Facebook’s code. Place the first part in your theme’s header.php or custom header script box (if available) and place the second part in a text widget.

4) YouTube Subscribe Button

YouTube SubscribeIf you create video and upload them to YouTube, a great way to raise awareness and subscribers is to use the YouTube subscribe button. Head on over to the subscribe button page and scroll down until you see “Configure a button.”

For the channel name or ID, you will want to enter in your custom channel name or use your full channel ID name. We had a little difficulty getting our Top Five Advisor channel to work, but figured it out. So if you have a channel that was created from a Google+ page or from another source, go to your channel’s main page and click on your channel name. From there you can get the real channel ID from the URL as shown:

YouTube Channel ID

Anyway, once you configure the YouTube button with Layout setting, Theme setting and whether or not it shows Subscriber count, you’ll see the code that you can enter into a text widget. For this code, you can either enter the entire code into the widget or place the javascript part of the code in your theme’s header area which is shown below.

[html]<script src="https://apis.google.com/js/platform.js"></script>[/html]

5) SnapWidget for Instagram

Instagram WidgetIf you run a photography driven website or offer promotions and various related content, you may want to add Instagram as a sidebar widget (or take advantage of other widget areas on your theme).

Since Instagram doesn’t offer a direct widget solution, we’ve chosen SnapWidget as your Instagram solution. Head on over there then click the blue “Get Your Free Widget Button.” From there, you’ll get a large amount of configuration settings that you can use to make best use of this widget on your website.

Enter your username or favorite hashtag and then select the widget type that you’d prefer. We recommend selecting one style then click the Preview button at the bottom to see how it looks. The most popular style is the “Grid” layout because it shows just the photo and offers excellent options that will help you get it looking exactly the way you want.

For the sidebar widget area, we recommend the 125px thumbnail size and a 2×2 layout. Another option is to go with a larger thumbnail size like 250px and choose 1×2 or 1×4 so that your Instagram images are stacked vertically.

Other options include the background color, photo padding (space between images), hover effect, social sharing buttons that appear at the bottom of each image, and the ability to enable “responsive” if you have a responsive WordPress theme.


That’s it for our recommendations. Is there a widget that you use on your website that failed to make our list? Comment below and let our readers know!

How to Limit Tags in Tag Cloud Widget in WordPress

Have you ever tried to use the Tag Cloud widget in your WordPress but it appeared way too messy to use? Here at Top Five Advisor, we have over 100 tags that we have setup and we’re just getting started. Unfortunately, the default display of the tag cloud widget is to show all of your tags and increase in size depending on the tag use on your content.

WordPress Tag Cloud WidgetYou may notice that we have the following screenshot on the left displaying on the bottom of our website and you may be wondering how we did it.

Thankfully, all you need to do is make a quick edit in your functions.php file and you’ll be able to customize how many tags will appear in your widget area.

Simply change the number 5 on the “$args[‘number’] = 5;” line and the number you set will be the total tags allowed to be shown in that widget area, whether it is in your sidebar or footer areas.

Here’s the code snippet that you need to add to your functions.php:

// Limit Tags in Tag Cloud Widget
add_filter('widget_tag_cloud_args', 'tag_widget_limit');
function tag_widget_limit($args){
 if(isset($args['taxonomy']) && $args['taxonomy'] == 'post_tag'){
  $args['number'] = 5; // <-- Tags Limit
 }

 return $args;
}

What this will do is show your most popular tags in the tag cloud depending on the number you set. In our case, the screenshot in this post represents the 5 most popular tags as of the time of this posting.