Customizr tutorial : creating a slider with the Customizr WordPress theme

Howdy web designer!

You’ve downloaded the Customizr theme and of course you want to have a 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! (check this video for a quick introduction).

I am assuming you have done the following pre-requisites :

1 installed last version of Customizr from your WordPress admin panel

2 logged into your WordPress admin

3 Opened the front page customizer section and see the dropdown list below :


1. Go to the media library



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


1  From the Media Library, click on an image that you want to add to your slider
2  Click on the “Edit more details” link on the right of the screen (not the Edit button)
3 Scroll down and find the Slider Options box (see the screenshot below)




3. Adding optional call to action content

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

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




4. Creating a slider name

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 “add a slider”.


Once clicked on the button, your slider is created and you will see that your image has been added in it (see below).



5. Adding another slide to an existing slider

Now you might probably want to add other slides to this slider. Then just open a new media and follow the previous steps.

Once done, you should now have 2 slides in your slider (see below).



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 customizer (click on customiz’it to go there), open the front page section and click on the slider dropdown list. You should see your freshly created slider in the list now.

Just select it, save and you are done.



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 and select your wanted slider in the dropdown list.



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.




10. Creating a slider in Customizr : (quick) video demonstration!


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!

280 thoughts on “Customizr tutorial : creating a slider with the Customizr WordPress theme

  • silk

    Hi there, I tired to add a GIF as a slider, but it stays as a steady non-moving photo instead of showing the animation. Please help! Dimensions are kept according to samples here!

    • SARAH

      Hello ,
      i ve been working with customizr theme so far , downloaded a slider , created a menu , pages, articles.. but the problem is that the slider only works on my PC and menu also only shows on the PC too. When i turn to the tablet the slider is static and when i click on the menu there s that dark screen coming and bloking the navigation. can anybody help? thank you.

        • Michel Girard

          Hello Nicolas,

          I have install your Theme on my provider folder where wordpress is install, but i don’t see all your management option for the slider.

          How it is possible, i made a child theme as you sayed, i have donwnloaded customizr-master too but i have no information how to install

          it, i am a beginer in wordpress and building site, it should be nice to have some help, your theme is exactly what i need for our little ONG.

          Thanks for your reply, have a good day

  • Karen McRae

    My slider on the front page is only displaying approximately 1/3 across instead of being full screen. It has been displaying properly until yesterday so am not sure what happened. Any insight? Thank you!

  • Harold

    I need help with the Customizr slider.
    I loaded all my pics through Media menu and added a slide named Home. When I viewed the slider it was obvious that the size of the pictures needed to be changed -all I got was the bottom edge of the picture all the way across the page. I went to the Media menu and cropped all my pictures to the correct aspect ratio. And I made sure I clicked on the Update button on each picture. I checked the page view again and nothing had changed. I went back into the Media menu and Deleted the slider. Then it did not show up on each picture. I created the slider all over again and added each picture. I then checked the page view again and it still had the old pictures showing the bottom edge of each picture (which supposedly didn’t exist any more on each picture because I had cropped it off). What the hell???

  • Delaina Miller

    I can’t get the slider to work. This is one of two sites I have that use your fantastic theme but for the life of me I can’t get the slider to work on this one. Any suggestions?

  • Tony

    I am considering moving from the Hueman theme to Customizr but have a couple of questions about the slider.

    Can I have a single, fixed image instead of a slider (multiple images)?
    Can I remove the timing options for the slider images (multiple images) to where the user is able to select the next image by clicking on a right or left arrow, for example?

    • Nicolas Post author

      Hi Tony,
      1) fixed sinlge image : yes, you just have to set only one image in your slider
      2) manual slide : you can control the delay between each slides, => set the delay to a high value will be equivalent to remove the timing option.
      Hope this helps, best.

      • Tony

        Hi Nicolas

        Many thanks. Have installed the theme and set slider timing at high sequence. Works great!

  • Richard

    The alternate text keeps disappearing for the first featured page. If I go in and edit it, it reappears, but then it disappears again after saving it.

    Also, I used pics that were 933 x 500 because they were already of that proportion and I notice they don’t always get displayed right. Sometimes they do. Sometimes they don’t.

    This seems like a nice theme, but can any of this be fixed sometime soon? And/or do I really have to use the exact suggested image sizes for the slider? (If so, I will have to re-create the images altogether. Not your problem I know, but still — a pain.)

  • meike

    I want to copy the existing site to another page in my multisite – I used wp-importer – all pages and post are there – but no sliders!

    Any idea how to copy / import-export them?


  • Terry

    Great theme! I own many themes and after many hunting trips discovered Customizr. Love it.

    Is there a simple way to resize the “height” of the slider? Current is 500px and like to keep it at 300px.

    I have searched the docs and do not seem to find info on this question. Before I dig in and make a child theme to customize the slider wanted to ask if easy solution.


  • Katrina

    I LOVE the design and layout of Customizer. I do however have a few slider questions:
    I don’t see anywhere (commented or such)
    1: about the size of the image needed for good viewing in the sliders. I am selling digital security cams with high resolution so i MUST show quality.
    2. Changing the size of the slider. It’s too large for my needs. something smaller is needed. (not a developer so mucking around the backend is not a good idea :()
    3. I would like to add smaller sliders on different pages without having to make animated gifs.
    4. Can I add video to a slider?
    5. Most of my clients are mobile users. So i need sliders to play nice with mobile devices. ( i LOVE this option of slider.!!!!!–any thoughts on building something like this?)

      • Michelle Lee


        1) How do I add a video to the homepage slider? I know it requires some coding, but it is necessary! Please help!
        2) How do I move the main navigation so it is centre aligned?
        3) The dropdown of the menu does not seem to be working correctly. When I hover over a parent menu title, the dropdown appears but I go to click on dropdown option and it disappears. It also does not appear correctly on iPhone.


  • Joy

    Sorry, but I must be an idiot and I’m clearly missing something. Have changed hosts and my site is now online. Didn’t save the db just before migration, so despite having all the images that came with the last db save, I’m having to redo all my links and sliders. I’m having a new issue now:

    After creating the slider, the thumbnail image doesn’t appear in the box below showing the slider’s image(s). Do I need to delete the slider, delete the image, and re-upload the image and start over?

      • Joy

        Thanks, but I figured out the issue. I needed to have the theme recognize my images so I uploaded the “regenerate thumbnails” plugin. That did the trick. :)

  • Joy

    My sliders aren’t showing.

    Images that have the slider turned on and the slider name created are not showing the thumbnail, letting me know there’s something wrong. When I return to the customize page to select the slider, it says no sliders have been created.

    I have recently migrated my wordpress to a new host. After the move, I started having this issue.

    Do I need to install Regenerate Thumbnail plugin? Or do I need to delete the images I’d used for sliders and reupload?


  • Ali

    Great theme, I love it. I’m wondering how can I change font size and location of description text as well as Buton box. They are almost cover the image. I want to make them smaller at the bottom of the image.


    • Nicolas Post author

      You can manually change the CSS properties of the theme or use a plugin.
      Manually : you might want to read the numerous guides and snippets available on this website.
      With a plugin : the WordPress Font Customizer will allow you to change any font of your website live without coding.
      Hope this helps

  • Karim Sultan

    I’ve just updated to the latest version of Customizr (3.1.123) under Brandoo WP 4.0, and I’m running into a problem. All the sliders have stopped working. There were no issues prior; this was a post upgrade impact. Running Chrome. I can get the first image to display only if under “Responsive Settings” I turn off “Enable/disable slider’s slides centering on any devices”. However, this won’t rotate the images. Any ideas?

    If not, do you have a link to the old version of the theme so I can go back?

  • Karim Sultan

    Just to add: creating new sliders does not have any effect; new sliders don’t display either. Nor does the demo slider. No probs prior to upgrade.

  • Stephanie Hall

    Slider images that has a button – Learn More, Click Here etc. How can I make that hyperlinked to a another site completely.

    Example – – we have artist that perform at our venue. I use their images on the slider to showcase who’s coming soon. I would like to hyper link the “Learn More” button so that it takes you to the artists’ page so they can surf around that site as well.

    • Nicolas Post author

      Hi Alex,
      Here’s the code to insert an already created slider in search page and 404 page :


      • Alex

        And where do I put those lines of code? I had tried functions.php but it does’nt work !
        is there a line that i have to go under with this code? …. it goes in another file ?

      • Alex

        i vahe posted the code like this:

        * Here’s the code to insert an already created slider in search page and 404 page :Nicolas

        add_filter(‘tc_show_slider’ , ‘__return_true’ );
        add_filter(‘tc_slider_active_status’ , ‘__return_true’ );
        add_filter(‘tc_slider_name_id’ , ‘set_slider_name’);
        function set_slider_name( $original_name ) {
        if ( ! is_404() && ! is_search() )
        return $original_name;
        return ‘promenada-culturala-slider';//<= replace this string by your slider name

  • tim

    Hi, I have resized the slider in the child theme css but it now appears justified to the far left. Can you give me some code to centre it again?

  • Chad Lerch

    Great job explaining this so a marketing guy, not a programmer, can understand it. I really appreciated this article.

    Thank you!!!

  • ks

    Where is the video walk through on how to create a slider? The link on this page just jumps to the comments. Please advise. I’m not seeing at all what the instructions are showing when I’m on on the view image page. I have no “edit more details” so I’m clearly missing something

  • Jon

    I see the demo page of the child customizr theme has the front page slider where the images moves/bounces-around vertically in the slider container. How do I do that? I wish to use Customizr for a photography/art site so cropping the images to fit the suggested dimensions is not ideal. Thanks in advance.

  • franco

    hello nicolas, your subject matter is fascinating, but I do not know why the images in the slide are still not flowing, I have followed many guides but I still have not found the solution .. could you help me? Thanks.

  • Kyle Sherwood

    I feel like I may be missing something with the slider? I’ve created images @ 1170px 500px & 400px (the video shows 1200px x 500px as examples) along with several other sizes smaller than the recommended size images. (I’m loading like size images together and not mixing and matching sizes)No matter what size image(s) I use the photo crops off at the top. Have I missed something in the forums and help files to remedy this? I just downloaded to see if V 3.1.24 will fit my needs. Thanks for the help!

Comments are closed.