Add a Slider Banner to the Frontpage

This article guides you through adding a slider banner to the Frontpage Sections template for Music Maker theme versions 3.17 and above.

We will primarily focus on using the free Smart Slider 3 plugin, although you can use other slider plugins that provide a shortcode.

Limited Support: Since Smart Slider 3 is a 3rd party plugin, we do not provide support for the plugin. So, if you have any issues, please watch the additional videos and visit the included help links at the bottom of this article.

Download 10 Premade Slider Banners – Import the .ss3 file.

How to Add a Slider Banner

Here is an overview of how to add a slider banner to the Frontpage Sections template.

Video Timecode:

0:00 – Banner Slider Introduction
1:04 – How to Install the Slider Plugin
1:35 – How to Create a Slider
2:10 – Interface Overview
3:43 – Editing a Slide
8:55 – Add Slider to Frontpage Section
10:10 – Edit a Second Slider

Banner Example Templates

Here are over ten examples of the Smart Slider plugins that you can use.

Add Smart Slider Plugin

Here are the step-by-step instructions to follow to add the Smart Slider plugin.

Instructions

In WordPress, click Add New under Plugins on the sidebar.
In the input on the top right, enter Smart Slider 3 and hit enter on your keyboard.
When you find Slider 3, click the Install Now button, then click the Activate button.

Plugin Interface Overview

Here is an interface overview when editing a slider.

A – Slider Preview – Click this to see a live preview of the slider.
B – Save – Back up any changes.
C – Slide Manager – These are the slides that will appear in your banner.
D – Slider Settings – Here, you can change several settings
E – Banner Shortcode – Add this to the frontpage Slider Banner shortcode input.
F – Controls – Edit the slider’s controls.

Editing a Slide Interface

A – Background, Animations, & Settings
B – Add headlines, text, images, and buttons.
C – Slider Preview

Add a Slider Banner to Frontpage

Here are the step-by-step instructions to follow to add the slider banner to the frontpage template.

Instructions

Once you have created and saved a slider. Copy the Shortcode under the Publish tab.
Click Customize under Appearance on the sidebar.
In the Customizer, click Widgets, then click Frontpage Sections Template.
Scroll down to the bottom and click the Add a Widget button.
In the input search for the slider
Click the Frontpage: Banner Slider – A temporary banner will appear at the bottom of the page.
Drag the Frontpage: Banner Slider to the top of the page in the widget’s window.
Click the Publish button.
Click the Edit: Slider Banner Shortcode link in the Frontpage Sections: Slider Banner widget.
Paste the copied shortcode into the Shortcode input.
Click the Publish button to save your changes.

The page will refresh with your slider banner.

Important Notes

Any changes to the slider banner must be made in the Smart Slider plugin section.
If you delete a slider or create a new slider, you must update the shortcode in the Frontpage Sections: Banner Slider input for the banner to appear.

Additional Smart Slider 3 Tutorials

Some features in the videos may only be available for the Smart Slider Pro users.

The free plugin has limitations.

Getting Started – WordPress Slider

Slide Editing 1 – Basics

Slide Editing 2 – Content Slide

Layers

Canvas Mode Responsive Tricks

How to Add Sliders to WordPress

Limited Smart Slider Support

Since Smart Slider 3 is a 3rd party plugin, we do not provide support for the plugin.

If you have any issues, please watch the additional videos above.

Helpful Links

Common Questions

How do I get the premium Smart Slider templates?

You have to pay for a Smart Slider Pro license. We have no association with the plugin developer.

The Frontpage: The Slider Banner does not appear for Me:

This feature was added in version 3.17, so you need to update the theme to the latest version to get this feature.

Can I use another slider plugin?

Yes, you should be able to use another slider plugin that gives you a shortcode that you can add to the Frontpage shortcode input.

How do I get all the additional features seen in the Smart Slider Pro videos?

You have to pay for a Smart Slider Pro license. There are many limitations to the free plugin.

How do I add a logo image of text to my slider banner?

Please watch all of the Additional Smart Slider 3 Tutorials above. Specifically, watch the Layers video to get a better understanding of adding and rearranging items.

The Smart Slider plugin is difficult to use:

We tested a number of free plugins and found Smart Slider to be one of the easier plugins. If the plugin is too hard to use, please stick with the 2 built-in Frontpage banner options.

Can I Add Multiple Smart Sliders to My Frontpage?

Yes, you can use any of the Frontpage Text Widgets.

Remove all text and any settings from the desired Frontpage Text widget.
Update the Section Height for the text widget to 0 to remove all padding.
Add the slider shortcode to the shortcode input.
Add this CSS code to expand the width of the text widget.
1. Only add the CSS that shares the same name as the text widget you add.

/* Frontpage Text 1 - Remove Width */
 #t1 .front_holder{width:100%;}  

/* Frontpage Text 2 - Remove Width */
 #t2 .front_holder{width:100%;}  

/* Frontpage Text 3 - Remove Width */
 #t3 .front_holder{width:100%;}  

/* Frontpage Text 4 - Remove Width */
 #t4 .front_holder{width:100%;}  

/* Frontpage Text 5 - Remove Width */
 #t5 .front_holder{width:100%;}

Common Problems

Thumbnail Missing Color

If you select a slider with thumbnails, you may see a space behind the thumbnails.

1. To edit this, select Thumbnails and Bar next to Styles.

2. Under background color select a color, and click the Apply button.

Bullets w/ Empty White Space.

The Demo Slider – Free Static banner will give you an issue like this.

Click Bullets, and for the Position, click the bottom square inside the square.

Can I use a different slider plugin than Smart Slider 3?

Yes, you can use other WordPress slider plugins. The key requirement is that the plugin must provide a shortcode that you can paste into the Frontpage Sections Template widget area.

I’m using an older version of the Music Maker theme. Can I still add a slider banner?

The specific method described in this article using the Frontpage Sections Template widget is for Music Maker theme versions 3.17 and above. If you are using an older version, you may need to explore different methods or consider updating your theme.

Will the slider banner automatically adjust to different screen sizes (mobile responsiveness)?

Smart Slider 3 is a responsive plugin, meaning it is designed to adapt its layout to various screen sizes. Ensure you configure the responsiveness settings within the Smart Slider 3 plugin for optimal display on all devices.

How can I link the slides in my banner to other pages on my website?

Within the Smart Slider 3 editor, when you are editing a slide, you can typically add a link to various elements like images or buttons. Refer to the Smart Slider 3 documentation for specific instructions on adding links to your slides.

My slider banner is showing below other sections on my homepage. How do I move it to the top?

In the Appearance > Customize > Widgets > Frontpage Sections Template area, ensure that the Text widget containing your Smart Slider 3 shortcode is positioned at the very top of the widget list. Widgets are displayed on the front page in the order they appear in this list.

Updated on March 9, 2025

Was this article helpful?

Yes No