WordPress: Full Width Slider

The Full Width Slider can be used to display a selection of blog posts at the top of your site. The example below is from our Blossom theme:

full width slider

This guide will show you how to enable the full width slider, as well as covering some extra options available too.

How to enable the Full Width Slider:

1. Go to the Appearance > Customize section of your dashboard

2. Look for the "Full Width Slider" tab in the options along the left side of the screen:

3. You can now select from various options to display blog posts in the slider:

How to display specific blog posts in the slider:

By default, the slider will display your most recent blog posts. However you might like to display some specific blog posts instead. You can do this by assigning a post category to the slider. For example, the options shown below would show posts from the "Lifestyle" category:

If you want to have complete control over the posts which display in the slider, you could create a dedicated category called "Featured" or "Post Slider", for example. Then assign this category to the slider. This means that any posts you add to the "Featured" or "Post Slider" category would show in the slider. If you publish a post that should not show in the slider, simply do not add it to that category.

How to display static photos in the slider

Sometimes you might want to show photos in the slider rather than blog posts. This is possible by installing the free MetaSlider plugin. Follow the steps below to do this:

1. Go to Plugins > Add New in your dashboard:


2. Search for "MetaSlider" then install and activate the plugin:

3. Go to the new "MetaSlider" page in your dashboard:

4. Follow the on-screen instructions to create your new slider.

5. After you have created your slides, go to the "Advanced" tab:

6. Enable the "100% wide output" option:

7. Now that the MetaSlider plugin is setup, we can add this to the theme options. Look for the "How to use" box on the page and left-click on this line:

This will copy the code to your clipboard, which we can then paste into the theme options. In the example above, the code we should copy is:

[metaslider id="6091"]

8. Now go to the Appearance > Customize section of your dashboard:

9. Look for the "Full Width Slider" tab in the options along the left side of the screen:

10. Scroll to the bottom of the panel and paste the MetaSlider code into the option:

11. You should see the slides show up in the preview area of the Customize screen. However the size might not work too well. You may need to go back to the "MetaSlider" page in your main dashboard and adjust the sizing options at:

It may take some trial and error to find the best width and height options. After making any changes, you may wish to view your homepage to check how the new sizes look.

Article tags: meta slider, full width banner, carousel, hero slider, sliding, hide posts from full width slider

Was this article helpful?