Make a Customizr slider display recent posts


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Updated Sep 2015: This snippet now works only with Customizr 3.4.* and Customizr-Pro 1.2.*

Updated June 2015: This snippet now works only with Customizr > 3.3.26 and Customizr-Pro > 1.1.9

Updated June 2015: Fixed conflict with AddThis plugin : better handling of the post excerpt. Thanks to @Claudia Lopez for reporting this.

(> strictly )

In this post I will show you how to make the front-page slider display the last 5 posts tagged in with a certain tag.

Steps:

  1. Follow just the #1,#2 and #4 steps of this tutorial. (In the snippet below we assume you’ve chosen “front-slider” to name your slider). The uploaded image, added to the slider, will be used as default image when posts have no image.
  2. Create a new post, or edit the posts you want, adding the tag “front-slider”. This will give us the control on which post display in the front slider. The displayed image for the post(s), in the slider, will be the featured image, if set, otherwise the first attachment image will be used. If neither of those are available, the abovementioned default image will be used.
  3. Copy the snippet below in your child-theme functions.php .
  4. [Optional] You can also chose to display a different image, than the featured one, for this slider. To achieve that just:
    1. upload a new image (see the slider’s image sizes)
    2. add a custom field named “slide_img” to the post and set its value with the ID of the just uploaded image..

Where to copy/paste this code?
Add it to your child-theme functions.php.
Everything you need to know about creating a child theme with Customizr here.

Goodluck and goodbye


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



74 thoughts on “Make a Customizr slider display recent posts

  • Lars Relund

    Hi Rocco
    Do the code also include custom post types (such as events – from the The Events Calendar plugin) or is it possible to modify the code so that custom post types also are included? [Running Customizr Pro v1.2.35]

  • 0toxins

    I just want front page slider to be a recent post carousel instead of full slide image. Any snippet for that?

    After finally figuring out how to get to my child’s theme functions php location I don’t know if a plugin given functions php code is wrong or I need additional snippet to go along because its NOT working. Plugin gives me shorcode too and not sure which i need to use, neither work on their own.

  • Isidro M

    Hi, Rocco.
    I’ve a new problem. The snippet works fine, but wen I activate the plugin Polylang it doesn’t work.

    Thanks.

  • Isidro M

    Hello Rocco, I have a error using this snippet.
    The error is:
    Fatal error: Access to undeclared static property: TC_Slider_mod::$rendered_slides

    I’m using Customizr version 3.4.13

    Thank you!

  • Pierre

    Hello Rocco, thanks for this snippet !
    I had a problem however. After I created a slider with the correct name and pasted the code, my homescreen went blank.

    I investigated and, for some reason, the code of the loaded page stopped at what is line 116 in your code.
    It appeared like this in my loaded page’s source code : “<div id="customizr-slider-"

    So, for some reason, customizr couldn't resolve this :

    I modified the line like this : <div id="customizr-slider-2" class=" “>
    … and now it works. I don’t know if you can reproduce, i just wanted to warn you :).

    Thank you !

  • Robert

    Hello, is there any way to use both a video embedded into the slider, AND to make the slider display latest posts at the same time? I pasted both snippets into the functions.php file, set the tags for posts, but it seems it ignores the snippet for recent posts. Video is still okay.

    Your theme is awesome anyway. Thank you 🙂

  • Andrea Sacchi

    Hi Rocco, I’m working with child-theme (version 3.4.8). When I add the snippet, I’m getting some warning messages:

    Warning: Illegal offset type in isset or empty in /web/htdocs/www.bio-love.it/home/wp-content/themes/customizr-child/inc/parts/class-content-slider.php on line 163
    Warning: Illegal offset type in /web/htdocs/www.bio-love.it/home/wp-content/themes/customizr-child/inc/parts/class-content-slider.php on line 238
    Warning: Illegal offset type in /web/htdocs/www.bio-love.it/home/wp-content/themes/customizr-child/inc/parts/class-content-slider.php on line 240
    Warning: extract() expects parameter 1 to be array, null given in /web/htdocs/www.bio-love.it/home/wp-content/themes/customizr-child/inc/parts/class-content-slider.php on line 51

    I’m not sure, but all the line in this messages are about the “sliders_model”. Do you think is not working with the last version of Customizr? Thanks in advance!

      • Rocco Aliberti Post author

        Hello Andrea,
        I’m not able to reproduce your issue. What I can see from your warning (which are warning and not errors, and you can “mute” them disabling wp_debug or in your php.ini) is that you have a class-content-slider.php in your child-theme. Why?
        The reason why I made this snippet the way it’s written it’s exactly to avoid the re-write of that class in the child-theme, so to always keep the original code intact.

        p.s.
        I just made a correction in the snippet (see line: ) to fix a bug which prevented the slider to cycle.

  • Kamil

    Hi there, is it possible to make a slider that would display 5 most viewed posts? F.e. 5 most viewed posts this week/month?

    • Rocco Aliberti Post author

      Hello Kamil,
      those are not standard wordpress info. It doesn’t take care, by default, of such statistics. So you cannot make a query (line 18) to retrieve those posts. But if you have a plugin which allows you to retrieve those info maybe you can set up a custom query for this purpose.

  • The Sugarchimp

    it did not work for me. dunno if it’s cause i have the 3.3.28 instead of the 3.3.26

    Thank you

    • Rocco Aliberti Post author

      Hello Sugarchimp.
      Would you like to elaborate “did not work”? What exactly doesn’t work?
      It works fine here with 3.3.28.

      • Felipe

        I’m getting some warnings when I choose the front-slider, but it’s working fine if I choose the demo slider.

        “Illegal offset type in isset or empty” in some files.

    • Jordi

      I’m just seeing now that the snippet works with the 3.3.14 < Customizr < 3.3.27
      backing up a previous version.

        • Jordi

          Yes, this one and it doesn’t work. (it seems the same. it is the one that allows us to put images before and after. It is the one that we found a bug some weeks ago)

          I’m creating a temporary manual slider until we can solve it.

          it’s weird. It happened when I updated

          • Rocco Aliberti Post author

            I’m sorry but I’m not able to reproduce the “not working” bug.
            There was a small bug with the excerpt and now I’ve fixed it (snippet updated above).
            I also tried the snippet I gave and it still works here.
            Maybe try again the snippet above and see if it works, otherwise please elaborate a little more the “not working” bug in the wp.org topic 😀

  • Claudia Lopez

    I just updated the Addthis plugin and noticed that the front slider is displaying a code instead of the post summary. This code appears on each slide (Changing the URL and title, dependind on post):
    <div class='at-above-post-arch-page-recommended addthis_default_style addthis_toolbox …

    This appears only when the plugin is active. I posted a support topic on their plugin in case there's an error on their part.

    • Rocco Aliberti Post author

      Hello Claudia,
      thanks for reporting this.
      Snippet updated.

      N.B. Before updating to the new Customizr version check here if this snippet has been updated ’cause it will not work properly with Customizr > 3.3.26

  • kelly

    Rocco,

    Do I need to add the pics to the slider each time or will it just take the image from the post? The reason I ask is because I went back and deleted the previous images from the newly created slider and now when the slider has disappeared from the home page.

  • Kelly

    Rocco!

    I don’t want to use the tag “front-slider” each time I post. Is there anyway I could make this work with a different tag?

    I’ve been trying to edit the code from above but I am the newest of newbies to CSS. I figured if I could find “front-slider” in the code and replace it with the tag I wanted, everything would work… So far I am wrong.

    • Rocco Aliberti Post author

      Hello Kelly,
      you should just replace front-slider :
      'tag' => "front-slider", (line19 on the snippet above)
      with the tag you want and should be fine.

      Isn’t so?

      • kelly

        Thanks Rocco,

        I think I may have solved it! At first I did what you said and it didn’t work but then I went into the customize section under appearance and chose the newly created slider.

        I appreciate the help!

  • Roseanna

    Will you update this snippet so it’d work on future theme versions? I love this feature and I’d like it to work on 3.3.15 onwards ->>

    • Rocco Aliberti Post author

      Hi,
      what exactly doesn’t work in 3.3.15 ?
      Doesn’t slide? If that’s the problem, I’ve updated the snippet to make it work with 3.3.15.
      If not.. dunno works here. 😉
      Let me know

      • Claudia Lopez

        Hi, With the new theme update, the slider changes images abruptly, it’s not as smooth as it was before. Is that something related to the code?

        • Claudia Lopez

          Ooops, Nevermind, please disregard the last question. The new snippet works fine, i thought it wasn’t updated for the new update, since it says at the beginning: “Updated March 2015: This snippet now works only with Customizr > 3.3.12 and Customizr-Pro > 1.0.17”

  • Claudia Lopez

    After update and snippet, slider is appearing in every post and page, not only in the home page, even though the slider is turned off in every post. Is there any way to fix this?

    • Rocco Aliberti Post author

      Hi Claudia,
      thanks for reporting this. There was an error in the latest code. I’ve updated the snippet.
      Could you double check?

      Thanks

      • Claudia Lopez

        Thanks! I’ve made the change with the new snippet and it works. Slider only shows up on the Home Page.

          • Jordi

            Hey Rocco,

            The slider disappeared after the theme update, but after putting your new code it works fine.
            The only thing is that, as before, the sticky post displays as the last post not the first. I have been looking what you told me in line 46 and read about the query, but i can’t figure it out

            • Rocco Aliberti Post author

              Hi Jordy,
              the sticky thing is a little tricky, by default just the blog displays those as first. To achieve the same result you should do a custom query.
              But for your needs, I’ve modified the code above a little bit.
              Added line 211 $slides = apply_filters('tc_post_slides', ( !empty($slides) ) ? $slides : false, $img_size);
              small change on line 223 return $slides;

              Then, just for you :P, add this snippet to your child-theme functions.php as well, and customize it they way you need 😉
              https://gist.github.com/eri-trabiccolo/712a1681ca3a32d364aa#file-add_slides_recent_posts_slider-php

              Hope this helps.

          • Jordi

            I had my difficulties trying to see new changes even though I cleared constantly my cache (and I have deactivated my cache plugins) but finally I could see the changes. JUST AWESOME man! Thanks so much. Really. Grazie mille. il tuo snippet sta laborando perfetto

  • Rocco Aliberti Post author

    Doesn’t it display as first?
    The problem using the sticky post is that it will be displayed as first also in the blog, but it will be always the first if you don’t add any other sticky post 😀

    About don’t display the link, just after line #79
    put this:

    This will avoid the button displaying 😉

    • Jordi

      No, it doesn’t displayed first even though appears as a sticky in my blog.

      I have also put what you told me after line 79 and it worked but in the other post. It seems like the sticky is the last post, not the first.

      Anyways, let me explain again what I would like to have cause I don’t know if I did a good job before.

      What I want is not text, no excerp in the image. and no button if possible (but the button is not a priority)

      Thanks

    • Jordi

      I forgot one thing

      I would like less excerpt too, less words. I have tried to modify in the customizr editor/menu but it only affects the excerpt inside the blog, not the one in the slider

      THANKS so much. I’m really wasting your time, hehe

      • Rocco Aliberti Post author

        Hi Jordy,
        sorry didn’t have the time to dig into this code, the new version is about to come and I have to rewrite it.
        About the sticky-post, look at the line #46 of this snippet. That is where I retrieve the posts, so if you make your own query you can manage this kind of stuff, maybe excluding sticky posts from the query and add that specific post in head.

        Start from here:
        http://codex.wordpress.org/Class_Reference/WP_Query

  • Jordi

    hehehe

    What I mean is that I would like apart from the images of the post, another image (no link to any post) that shows first in the slider

    so imagine I have my 5 posts in my slider and before them (as first image) I have another image (the sixth) with no link attached.

    I don’t think you refer to this in point 4, right? or do you? In any case, this is what I would like to achieve

    Thanks so much. The snippet by itself is already amazing

    • Rocco Aliberti Post author

      Hi Jordi,
      now I get 😀
      as for now, isn’t very possible without making some important changes to the snippet.
      Though a new version of the theme is about to be release and I have to change this snippet anyway. I’ll see if I can add this feature 😉

      • Jordi

        Ok, no prob. Thanks anyways.

        I will keep visiting the website to see if you have include my idea on the new snippet. Thanks

      • Jordi

        I think the easiest way for now to do what I want is create a post that will be always posted first. Let’s see if I find a way. hahaha

      • Jordi

        sorry for the comments, hehe

        the way I have is creating a sticky first post, and it works

        the only issue is that I would like to have this post displaying first always and with no link to anything. Is that possible?

        Thanks again and again

  • Jordi

    Hi Rocco,

    It worked perfect for me. Now I have my posts displaying as you said. I have a question though.
    I would like to display before the posts images another image. I’ve seen your point 4, but I’m not sure if you referred to the same thing. In any case I don’t get point 4.

    Any help?

    • Rocco Aliberti Post author

      Hi Jordi,
      sorry I don’t get what you mean with “before the posts images”.. Can you explain it a little more? 😀
      My point 4 says that this snippet displays the image you set as featured image or one of the attachments in the post if no featured image is set. I added this new “option” which consists in add a new custom field (with a link to how to add it) named “slide_img”. The value of this new custom field must be the ID of the image you want to show in the slider.
      Does this helps?

  • Salem AL-Ghanim

    the thumbnail next to the original post are deleted after installing the code could you pleas help

    • Rocco Aliberti Post author

      Hi Salem,
      thanks for reporting this!
      You’re right, I re-added the smart load parser filter even if you didn’t use that feature.
      Snippet updated.
      Now should be fine 😉

  • Kieran

    I’m getting an error with this. I commented out line 18 ‘tag’=> “front-slider”. and it was all working yestarday. Now however I’m getting

    Fatal error: Call to undefined method TC_post_thumbnails::tc_get_thumbnail_data() in /home1/k33k00/public_html/wp-content/themes/customizr Junior/functions.php on line 123

    if I remove the the functions.php, which only has the above code in, it works. Also if I just delete the slider it works.

    Any idea’s?

    • Rocco Aliberti Post author

      Hi Kieran,
      thanks for reporting this!
      I’ve update the snippet and now should work fine with the latest Customizr and Customizr-Pro versions.
      Cheers

  • Dave Trowbridge

    When I paste this code into the functions.php file in the Customizr Child theme you supply, my admin and home screen go blank and the only way to recover is to FTP in and delete the functions.php file. What gives? I’d really, really like to use this. but that result rather scares me!

  • Micha

    Great that worked! BUT now I face the following problem. Since the slider uses the post thumbnails, which has to be 270*250 px because of the themes, the slider images look pretty bad. Is there a way to set up a recent post slider with the possibility to upload images that have the slider size? And is it possible to just show the title and the read more button?

    • Rocco Aliberti Post author

      Hi Micha thanks.
      About the fact it uses the post thumbnail which is 270×250, I don’t agree. If it happens to you then… it’s weird. Here were we tell that method to use the ‘slider’ size:
      TC_post_thumbnails::$instance->tc_get_thumbnail_data($img_size)
      and we get that $img_size, from the original TC_slider class.
      So.. can you share the link of your site?
      About non showing the text, just remove all the part with the variable “$text” involved and, where you set $slides[$id], replace
      ‘text’ => $text,
      with
      ‘text’ => ”,
      Hope this helps

      • Micha

        Hi Rocco,
        the text problem is solved, thanks! But the images…I uploaded the thumbnail images for the post in 270*250. Maybe you misunderstood me, sorry english is not my mother language. The slider shows the images with the right dimensions, but due to the fact that it seems to use the small thumbnail images, the images are very out of focus. See yourself: http://www.ledertramp.de/
        I uploaded the pictures to my media in the slider dimensions, too but I can’t make the slider take those…is it even possible?

        • Rocco Aliberti Post author

          Hi Micha,
          don’t worry, english it’s not my mother language too 🙂 and I don’t think your is bad, or at least not worse than mine ;). And yes you’re right I misunderstood you. And yes you’re right, there’s an issue if the uploaded featured image is small. That’s ’cause wordpress doesn’t generate a bigger version (which is good).
          I will find a workaround for this, stay tuned, and thanks for reporting this!!
          Cheers,

          Rocco

  • anna

    sorry I’m new at css, do i need to change anything for my site specifically when i copy the code into functions.php or is it good to go ?

    • Rocco Aliberti Post author

      Hi anna.
      You have to put this code into the child-theme functions.php .
      Did you create a child-theme?

Comments are closed.