by Raelene Morey on June 19, 2019

How to Add WordPress Sliders to Twenty Nineteen

twenty nineteen theme slider

Twenty Nineteen is the new default theme for WordPress and has been designed to show off the power of the new block editor. What’s more, it’s super easy to customize if you’re looking to add sliders to your site!

Twenty Nineteen features custom styles for all the default blocks and works great with custom blocks provided by third party plugin developers. It’s also been built so what you see in the new editor looks like what you’ll see on the front-end of your site.

It’s a minimal starter theme that has an elegant aesthetic designed to be adaptable to a wide range of sites. Use it for your typography-driven blog or adapt it for your professional business website. It’s also suitable for magazine, portfolio and non-profit sites.

Twenty Nineteen WordPress theme preview
Twenty Nineteen WordPress theme preview

Twenty Nineteen was originally released with WordPress 5.0 and it is proving popular, with over 1 million active installations to date. I personally like the new theme design and have enjoyed tinkering with it in the new block editor (formerly the Gutenberg editor). It’s easy to customize with blocks, and it feels relatively light compared to other free WordPress themes.

Let’s take a look at Twenty Nineteen’s design features, and then we’ll show you how to easily add a slider to this fantastic free theme.

Twenty Nine Features At a Glance

With its pared-down, open aesthetic, Twenty Nineteen provides a great foundation for a wide variety of websites. Plus, with the WordPress Customizer, you can easily access theme options for your site.

Its features include:

Customizable With the New Editor

Twenty Nineteen is completely customizable with the new WordPress editor. You can choose any of the available blocks to create any kind of content for your site, from columns of text to full-width sliders. You can also use blocks provided by third-party plugins.

Unlike Twenty Seventeen, which has a fullscreen homepage design, Twenty Nineteen has a more contemporary full-width, single column design that looks great on all devices. There’s ample whitespace, giving the theme a professional look and feel. The sans serif headline paired with serif body text makes for a classic typographical combination.

Gutenberg block editor in Twenty Nineteen theme
Gutenberg block editor in Twenty Nineteen theme

Supports Site Logos

Twenty Nineteen supports site logos in the header. Whether you have a personal blog, portfolio, or business site, you can easily add a logo or photo to your site, which will appear in the top-left corner together with your navigation menu.

To add a logo, open the WordPress Customizer and go to “Site Identity.”

Changing your site logo in Twenty Nineteen theme's customizer
Changing your site logo is easy in Twenty Nineteen theme’s customizer

The new default theme also includes a social icons menu, which lets you add links to your social media provides in the header, too.

Supports Bold Features Images

With Twenty Nineteen, you can display featured images full-width or fullscreen (the images cover the full width and height of the screen).

Color overlays are a new feature in this default WordPress theme, which you can easily switch on and off. Twenty Nineteen uses a blue accent color by default, but you can change the primary color in the WordPress Customizer. This gives you loads of control over custom colors that make you look like a pro.

Accent color picker in Twenty Nineteen's Customizer
Accent color picker in Twenty Nineteen’s Customizer

Widgetized Footer

There’s a widget area in the footer, which includes all the widgets you would normally see in a sidebar, i.e. search, archives, categories, meta, recent comments.

On screens wider than 1169px, widgets are automatically displayed in a two column layout.

Why Use Smart Slider 3 for Your Twenty Nineteen Sliders?

Smart Slider 3 is a robust, feature-rich and user-friendly slider plugin for WordPress that comes with a custom block for the new WordPress editor. That means it’s easier than ever to add a slider to your WordPress website!

The free version of Smart Slider 3 offers just the right number of customization options to help you create a beautiful slider, all without feeling overwhelmed by features. Unlike other free slider plugins, it also lets you work with layers — an essential feature of any slider plugin, in my opinion.

Here are some of the things that I like about Smart Slider 3 over other plugins:

  • Content editor – Edit your slides like you would with a page builder.
  • Canvas editor – Drag and drop your layers anywhere on your slides.
  • Slide library – The Slide Library provides several pre-made slides to kickstart your work.
  • Page builder supportElementor, Divi, Beaver Builder, Page Builder by SiteOrigin, Visual Composer, and the new WordPress block editor.
  • Responsive and touch-friendly – Your sliders will look great on all devices.
  • Dynamic slides – Automatically display your WordPress posts in slides.
  • Customizable controls – Arrows, bullets, autoplay, bar, thumbnails, shadows.
  • Slide backgrounds – 9 background animations.
  • Layers – Build unique designs with 6 layers: Image, heading, text, button, Vimeo, YouTube.
  • Font and style manager – Easily update typography, font sizes, and styles.
  • Sample sliders – With 11 sliders to start.

Smart Slider 3 makes it really easy to add sliders to Twenty Nineteen. Whether you want to add a slider to the header of your site, a fullscreen slider background, or a simple image slider, Smart Slider 3 makes it really to add new sliders to your WordPress site.

How to Add a Slider to the Twenty Nineteen Theme

Twenty Nineteen theme is the perfect theme for any modern blog. Your visitors can focus on the content of your post, without any distractions. But you don’t need to have fancy effects to make your website interesting and interactive. Instead of distracting your visitors, you can create a simple slider which strengthens your message.

What’s a Simple Slider?

A simple slider is a kind of slider, that’s not bloated with fancy effects. Generally, it has images and a few lines of text, which either describe the image or tell a different story. They can browse them in an easy and convenient way.

Smart Slider 3 Free is the perfect choice to create a simple slider to enrich your blog posts. As a matter of fact, you can customize every aspect of your slider. Not only you can create an unlimited number of sliders, but they’ll be truly unique. What’s more, all sliders you create are fully responsive. Gutenberg makes it super easy to add your slider to any page or post of your website.

How to Create a Simple Slider for your website?

It’s incredibly easy to create a simple slider with Smart Slider 3. First, add images, then put down some layers and style them. Finally, add arrows or bullets and the perfect simple slider is ready. To demonstrate how easy it is to create a simple slider, we recorded a video for you. It shows you how to create a beautiful simple slider and add it to a post using Gutenberg editor.

With Smart Slider 3 you’re not restricted to create static slides only. You can create beautiful dynamic post sliders as well. A dynamic post slider shows your latest blog posts automatically. In other words, you don’t have to update the slider after you add a new post. Moreover, a simple blog slider on your homepage can attract more people to your latest posts.

How to publish a slider to your Twenty Nineteen slider’s homepage?

Twenty Nineteen theme has one widget position only, at the footer of the page. This position is perfect to create copyright text or footer menu. On the negative side, the footer widget position makes it harder to create header sliders. But worry not, because you don’t have to give up on having a homepage slider. You can always edit your theme’s files and place your slider there.

Publishing a Smart Slider 3 slider to your theme’s file

In this tutorial below, we’re going to place a slider just below the main menu. We’re going to directly edit the theme’s files, so be sure to use FTP and don’t edit your theme from Appearace > Theme Editor.

When you update your theme, all modifications will be lost. If you want to avoid that, create a child theme for your changes. Then only edit the child then, which makes your edits update-safe.

Twenty Nineteen slider custom postion
The place between the menu and content where we’re going to place our Smart Slider 3 Slider
  1. Let’s open up the theme’s header.php file located at /wp-content/themes/twentynineteen.
  2. Find the following code: </header><!-- #masthead -->
  3. Go to the Smart Slider 3 slider you want to publish and copy its PHP code. It will be something like echo do_shortcode('[smartslider3 slider=1]');
  4. Write the following code to your theme’s file, just below </header><!-- #masthead -->
    <?php
        if(is_home() || is_front_page()){
    
        }
    ?>

    This code makes sure your slider will only show up in your home page. If you want to have the slider on all pages, skip this step.

  5. Put the PHP code you copied in step 3 to the 3rd line of the code, like this:
  6. <?php
        if(is_home() || is_front_page()){
            echo do_shortcode('[smartslider3 slider=1]');
        }
    ?>

    This is how the final result should look like:
    Twenty Nineteen slider publishing via Smart Slider 3

  7. Save the file and upload it back your site.

That’s it, the slider will show up in your home page now.

Twenty Nineteen slider on the homepage using Smart Slider 3
Twenty Nineteen slider on the homepage using Smart Slider 3

Ready to Get Started?

Overall, Twenty Nineteen is a great new addition to the collection of WordPress default themes. It has a clean, elegant design that’s easy to customize and adapt for any kind of site.

Want to add a slider to Twenty Nineteen? With Smart Slider 3, you can easily add sliders to the new theme using the new block editor. Try Smart Slider 3 for free today!

Have you used Twenty Nineteen? What customizations have you made? Let us know in the comments below!

Raelene Morey

About Author

Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.