Displaying a slider in your category pages

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

By default, the slider can be displayed before posts or pages in the Customizr theme but you might want to display a slider for a specific category (or for all).

The following snippet allows you to do so in two simple steps

1 First, create a slider and grab its name (see how to create a slider in Customizr )

2Then add one of the snippet below in your functions.php file.

 

Example 1 : displaying one slider for all categories

In the example below, just replace MY-SLIDER-NAME by your slider name.

 

Example 2 : displaying a different slider by categories

This snippet is a bit longer. It basically assigns a slider name for each category for which you want to display a slider.

Just replace the example values in the $category_list array with yours and you are done.

 

Important : the $category_list uses the category slugs (and not the names). For example, if you have been created a category named My Awesome Category, you will have to use my-awesome-category (which is the slug) in the $category_list array.

More about category slug in WordPress.

 

 

Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.


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!


17 thoughts on “Displaying a slider in your category pages

    • Reply
      Nicolas Post author

      Hey you are welcome Joshua,
      If you get the chance, please share the url of the website in which you have implemented this snippet. I (and many other I guess… ;-) ) would love to see the result!

  • Reply
    Joshua Sherman

    I want to add a slider for this ranch category

    http://leichtag.quexion.net/category/ranch/

    so I put in the slug and the slider… (I made the slider name too)

    function tc_get_slider_name_by_cat( $category_slug = null ) {
    //Associates category slugs to slider : ‘slug’ => ‘slider name’
    $category_list = array (
    ‘ranch’ => ‘ranchcategory’,
    );

    but the slider didn’t show up.

    thanks for your help!

  • Reply
    Rocco Aliberti

    Also someone would like to force the slider layout, then:

    Hope I’m not wrong..

  • Reply
    Rocco Aliberti

    I want add that if I try to show a slider on an empty category (no posts in it), I can show it but I get this error:

    Trying to get property of non-object in xxx/wp-includes/post-template.php on line 29

    Because, at line 44 in customizr/parts/class-content-slider.php we have:

    so get_the_ID() fails.
    Thus, for those who doesn’t want to get that error, I suggest to change this line of Nicolas’ hook ‘tc_show_slider’ function:

    with this one:

    Sorry for my poor english.

  • Reply
    Rocco Aliberti

    Other two additions to the second snippet.

    The slider name should be also passed to the javascript, otherwise the slider will not start cycle automatically, so this should be added:

    Optional: You can override the default interval between slides adding this:

    p.s.
    Since you can set the delay only in home/pages/post sliders, the param $delay for categories will be ”. Thus the default carousel interval, which is set in bootstrap.js (5000ms), will be used.

  • Reply
    Nick Hannington

    Extremely useful, thanks for this. The only problem I have found is that in my theme the slider appears full width but not when I’ve added it to the category page using your ‘Example 1′ it only displays the size of the image. Any pointers?

    • Reply
      Nicolas Post author

      Hi Nick,
      You can force the slider to be displayed in full-width by adding the following code :

      • Reply
        Nick Hannington

        Perfect thank you so much. You can also disregard email I sent regarding centering footer widgets, all sorted now and ready to launch!

  • Reply
    Lavanya

    Hi, can I make this code working for other themes also or will this work with Customizr only? I would love to have this function but have another theme already..

  • Reply
    idoia

    Hi there,

    Thanks for the great work, I’m working on it locally and it looks great.
    Anyway, I would like to add the slider not only to the categories, but also to the post pages, is that possible?

    • Reply
      Nicolas Post author

      Hi Idoia,
      targeting the posts page can be done with the is_posts_page property of the global $wp_query object :

      Simply replace the is_category() conditional tag by the above condition in the snippet and you should be done.

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">