How to Add Widgets ( Twitter, Instagram, Shopping Cart, Etc. )

Widgets are the content boxes that appear on the sidebar of your website.

Article Contents

  1. How to Add Widgets
  2. Sidebar Options
  3. Available Widgets
  4. Add Beat Shopping Cart Widget
  5. Add Instagram Widget
  6. Add a Twitter Widget
  7. Widget FAQs

1. How to Add Widgets

Instructions

  1. In WordPress click Widgets under Appearance on the sidebar.
  2. Click and drag the widgets to the sidebar of your choice.
  3. Edit the widget information and click the Save button.

2. Sidebar Options

For version 2.18 and above:

  1. Beat Store Homepage - Appears on beat store homepage and beat sort pages.
  2. Single Beat Page - Appears on the single beat page.
  3. Blog Homepage - Appears on the blog homepage.
  4. Blog Single - Appears on single blog post pages.
  5. Static Pages - Appears on static pages.
  6. Three Footer Widgets - Appears in the footer of your website.

For version 2.17 and below:

  1. General Sidebar - This sidebar appears on the blog and static pages.
  2. Beat store & Genre Page Sidebar - This sidebar appears on the beat store homepage and the beat sorting pages.
  3. Single Beats Sidebar - This sidebar only appears on the single beats page.
  4. Three Footer Widgets - Appears in the footer of your website.

3. Available Widgets

New Beats Widget

Newest Beats

Random Beats Widget

Random beats

Beat Sorting Widget - Allows you to sort beats by Genres, Categories, and Tags.

Sort Beats Widget

Beat Sorting ( Dropdown )

sorting widget

Beat Buying Steps Widget

Beat Buying steps

Beat Shopping Cart Widget - This widget is called Downloads Cart on the widgets page.

Beat cart

Social Profile Links

social widget

About Widget

about widget

 Photo Gallery Widget

photo gallery

 Image Banner Widget

Image Banner

YouTube Widget

youtube

Vimeo Widget

Vimeo Widget

Text Banner

Text banner

Testimonial Widget

Testimonial Widget

Text Widget - This widget allows you to insert any text or HTML code you like.

text widget

Recent Blog Post Widget

Recent Blog Post

Facebook Widget

Facebook Widget

Blog Tags Widget

Blog Tags

Blog Categories Widget

Blog Categories

Events Widget

Events


4. Add Beat Shopping Cart Widget

Here are the steps to add a shopping cart widget like the example below.

  1. In WordPress click Widgets under Appearance on the sidebar.
  2. Click open the sidebar you would like to add the widget too.
  3. Drag and drop the Downloads Cart to the sidebar.
  4. Give the widget a title and click Save.

5. How to Add an Instagram Widget

Here are the steps to install an Instagram widget.

Preview

instagram Widget

1. In WordPress under Plugins click Add New.

2. In the search input on the top right of the page, enter Enjoy Instagram and hit enter on your keyboard.

3. Click the Install Now button, then click Activate Plugin.

Enjoy Instagram

4. Under Settings on the sidebar, click Enjoy Instagram.

5. Click the Connect Your Account button.

6. Enter your information to log in.

7. Click the settings tab.

8. Select the grid settings you want and click Save Settings.

grid settings

9. Under Appearance on the sidebar click Widgets.

10. Select a Text Widget and drag it to the sidebar you want the widget to appear on.

text widget

11. Give the widget a title and paste in this short code [enjoyinstagram_mb_grid]. Click Save.


6. How to Add a Twitter Widget

In this video I'm going to show you how easy it is to add a Twitter widget to your website.

1. Visit: https://twitter.com/settings/widgets. This is the page you will need to visit to create the widget. You will have to be logged into Twitter to view this page.

2. Click the "Create New" button.

Twitter Widget

3. Enter your Twitter username and click the "Create Widget" button. Copy the code provided below the widget and paste it where you would like it to appear on your website.

4. By default the widget will not have a height and width set, so you can easily copy and paste code this code

height="240" width="270"

after you see this class="twitter-timeline" in the code provided by Twitter.


Widget FAQs

Does your theme come widget ready?
Yes. This theme includes sidebars and a footer that supports multiple widgets.

Can I change the widget width?
No, there is no easy way to change this.

Fix Floating Widget Content
To fix this problem you want to add some CSS code to make the div around the content float left.

Screen Shot 2014-03-13 at 9.04.50 AM

If you added HTML to a text widget that is floating outside of the widget box, take the code below, and place your HTML in the middle where it says HTML goes here.

<div style="float:left;" >

<!-- HTML code goes here -->

</div>
Related Articles
Last updated on August 19th, 2017

Leave A Comment?

Looking Help?
1. First search the knowledge base for answers. Email support can take 48 hours.
2. If something is not working, please read trouble shooting problems.
3. If those do not help, provide a website link to help speed up the process.