Creating a slider with the Customizr WordPress theme

Howdy web designer!

You’ve downloaded the Customizr theme and of course you want to have your own beautiful slider on your front page. But you don’t know where to start from to do that.

This is exactly why I have published this step by step short tutorial.  You won’t believe how quick and easy it is!

Slider


0. Removing the default slider

By default the Customizr theme, displays a  slider generated from your latest posts, using the post's featured image, if set, as background image, the post title as slide title, the post's excerpt as description, and the post's URL as link for the call to action button.

Let's see how to remove this default slider then:

  1. From your WordPress dashboard, navigate through Appearance -> Customize
  2. Open the Front Page Content section

    Front Page Content Customize Section

  3. Scroll down to reach the SLIDER OPTIONS set
  4. From the dropdown list against Select front page slider select No slider:

    Set no slider

  5. Save and Publish

1. Open the media library

dashboard media

2. Open a media and set the slide’s options

  • If your media library is displayed as a list (see the screenshot below), just click on the thumbnail of the image you want to add to a slider:

    Media library as list

  • If your media library is displayed as a grid (see the first screenshot below), click on the thumbnail of the image you want to add to a slider and then on the Edit more details link (see the second screenshot below):

    Media library as grid

    edit more details link

Scroll down and find the Slider Options box (see the screenshot below): Slider options box

3. Adding the image to a slider

Add the image to a slider by clicking on the iphone like button as shown in the screenshot below:

Add to a slider

A new set of fields to set up your slide will appear.

4. Adding optional call to action content

Here you can set the optional call to action content : title, description, color (of title and description), button text, link, etc...

Leave those settings empty if you only want to display an image only.

Call to action

5. Naming the slider

If you haven’t created any slider, you will see the following message :  “You haven’t create any slider yet. Write a slider name and click on the button to add you first slider.”

Just type a name and click on on the Add a slider button:

Add slider buttonOnce clicked on the button, your slider is created and you will see that your image has been added in it:

Add new slide

6. Reordering the slides

Reordering the slides is done manually by dragging and dropping your slides, see the screenshot below :

7. Displaying a slider on the front page

Now go back to the Customizer ( From your WordPress dashboard, navigate through Appearance -> Customize)

Open the Front Page Content section and click on the slider dropdown list. You should see your freshly created slider in the list now.

Front Page Slider Customize selecter

Just select it, save and you are done.

Additionally:

  1. Choose the slider options : full-width or boxed, delay between slides and whether or not apply a dark overlay on the slider's images. Note : The option Apply a dark overlay on your slider's images is available only for the modern style.
  2. Choose the slider height, choose whether to apply to all sliders, and whether to replace the default image height.

8. Displaying a slider on a post or a page

Open a page or a post and go to the bottom of the screen. There you’ll find a metabox called Slider Options.

Click on the iphone like button below Add a slider to this post/page and select your wanted slider in the dropdown list.

Add slider to postUpdate the recent changes on the post/page by clicking on the WordPress Update button

9. Deleting a slider

On the top right corner of the slides list, you’ll find a clickable link called Delete this slider (see below). Just click it and confirm the action in the pop in window.

Remove slider