How to Add Widgets ( Sidebar )

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

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.

Widget Sidebar Options

1. Frontpage Sections Template – Used for the frontpage section Template.
2. Beat Store Homepage – Appears with the Beat Store Playlist template and beat sort pages.
3. Single Beat Page – Appears on the single beat page.
4. Blog Homepage – Appears on the blog homepage.
5. Blog Single – Appears on single blog post pages.
6. Static Pages – Appears on static pages that are not full width.
7. 3 Footer Widgets – Appears in the footer of your website.
   • Footer ( Left )
   • Footer ( Center )
   • Footer ( Right )

Frontpage Sections Widget: This is for the front page template only.

How to Show Footer Widgets

1. First, add widgets to the 3 footer widgets:
   • Footer ( Left )
   • Footer ( Center )
   • Footer ( Right )
2. In WordPress, click Customize under Appearance on the sidebar.
3. Click the Misc (10) link.
4. Click Footer
5. Toggle Show Footer Widgets to on.

   

6. Click the Publish button.

Available Widgets

New Beats Widget

Random Beats Widget

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

Beat Sorting ( Dropdown )

Beat Buying Steps Widget

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

Social Profile Links

About Widget

Photo Gallery Widget

Image Banner Widget

YouTube Widget

Vimeo Widget

Text Banner

Testimonial Widget

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

Recent Blog Post Widget

Facebook Widget

Blog Tags Widget

Blog Categories Widget

Events Widget

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 to.
3. Drag and drop the Downloads Cart to the sidebar.
4. Give the widget a title and click Save.

Instagram Widget

Here are the steps to install an Instagram widget.

Preview

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.

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.

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.

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

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.

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 this code

height=”240″ width=”270″

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

Widget FAQs

Does the theme come widget-ready?

Yes. This theme includes sidebars and a footer that support 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.

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>