ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

[Tutorial] How to add Featured Post Slider in Thesis WordPress Theme

bluehost
[Tutorial] How to add Featured Post Slider in Thesis WordPress Theme

Thesis theme is not a framework but it’s no less than a framework. You can do anything with Thesis WordPress theme and customize it in any ways. We have already shared some great tutorial for the same and if you have missed it, you can read it

Working as Thesis Theme Developer, I really feel the ease of developing and skipping other layout related ambiguities or bugs when using Thesis. Thesis theme is known for its SEO, Typography and flexibility for running JQuery Sliders, AJAX forms etc.

Below is the screenshot of a smooth slider configured on Thesis Theme.

Featured slider 520x270

Featured Slider Thesis Theme

Below is a tutorial to add a dynamic content slider in Thesis Theme, WordPress Blog. We will be using a Plugin called Smooth Slider, which works well with the Thesis Theme, without any conflicts.

Tutorial to add Content Slider in Thesis Theme, WordPress goes under:

1) Install Smooth Slider Plugin

  • Login to Dashboard admin of the Blog or Website.
  • On the left Navigation Pane, under Plugin click “Add New”.

image thumb1

  • Search for the Plugin name “Smooth Slider”, and click install to download and setup plugin on your blog.

image thumb2

  • Now activate the installed plugin to finish Plugin Installation.

2) Add a Post or a Page to content slider

  • Login to the Dashboard admin, on left Navigation Pane, select Edit under Posts Menu item.

image thumb3

  • In the edit posts window, click and edit the post you want to add to featured smooth slider.
  • Now in the Post editor, scroll to the bottom of the page or simply press “End” on your Keyboard.

image thumb4

  • Once you have checked the field, hit Update Post button, and the post is added to the content slider.

3) Configure Smooth Slider Plugin

  • Login to the Dashboard, on left Navigation Pane, select Smooth Slider under Settings Menu Item.

image thumb5

  • Configure the basic settings for the slider layout like Slider Width, height, background colour and Navigation etc…

image thumb6

  • Further there are more advanced settings for slider enhancement, like Typography, Thumbnail Settings and Slider Content.

image thumb7

image thumb8

  • Once done, hit save and see the preview in the same window for the content slider. If the preview satisfies you, close the window, else edit it again till it meets your requirement.

4) Adding Slider to Home Page Thesis Theme

  • Login to Dashboard Admin, on left Navigation pane, select Custom File Editor under Thesis Menu Item.

image thumb9

  • In the thesis Custom file editor choose “custom_functions.php” file and hit edit selected file.

image thumb10

  • Add the below code snippet at the end of the file.

Make sure you backup the Custom_Functions.php file using FTP before modifying it. So, that you can easily revert back, when in uncertainty happens.

   1: //Featured Content Slider

   2:

   3: function content_slider() { ?>

   4: <?php if (is_home()){ ?>

   5:

   6:             <?php if ( function_exists( 'get_smooth_slider' ) ) { get_smooth_slider(); } ?>

   7: <?php }

   8: }

   9: add_action('thesis_hook_before_content', 'content_slider');

Make sure you insert the code very precisely, else it may crash or lay down your website.

  • Now save the custom_functions.php file, and we are done with the setting up of Slider on the Home Page of the WordPress blog using Thesis Theme.

This ends our tutorial to add slider on Homepage. For any queries or any Thesis Theme help, post comments as your feedbacks. You can also see this slider in action at Wphostingdisocunt.

Do let us know if you use any slider or featured post in your WordPress theme?

  • Author Bio

  • Latest Post

Article by Akshay Khurana

Akshay has written 4 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

{ 38 comments… add one }

  • Tom Smith

    Had a lot of trouble with the php code here even with using open hook, no problem to use the short code [smoothslider] in open hook but would like it to appear on only one of my pages, any ideas?

    Reply
  • Yvonne

    Ok, I am desperate to have this smooth slider, spent over 10 hours on this already trying everything and then researching, looking, uninstalling, deactivating , reactivating… looking at the cod until my eyes are crossed. I have it in my feature box. I can see the images… but they are stacked and NOT scrolling. IN the set up for smooth slider it looks normal, moving across, but there seems to be a problem or conflict with the code. I am just setting up my site, so have minimum plugin, nothing I can think of that should conflict with this, but I just can’t get this to work. I have seen this problem described on the developers site, he says save again, make sure default is set and deactive, reactivate, and that’s all the advise.

    any suggestions?

    Reply
  • Kim

    I added it by using the shortcode – [smoothslider] – just add it to the html version of your homepage and save. No need to add code to the custom-function.php file.

    Reply
  • Tony Zeoli

    I noticed a bug.

    - Clicked the check box in media library to add image to slide show.
    - Tried to remove image from slide show, clicked check box again to disable.
    - Clicked Update Media, was then returned to main Media Library and not the page of the image I wanted to disable.
    - Tried it a few times and it still returns the check box as “true” when it should be “false” after clicking Update Media.

    Reply
  • Mark H

    Thanks for the tut.!

    I’ve used the Smooth Slider before and really wanted to find different ways to incorporate into the Thesis theme.

    Reply
  • Carl

    Hey i had a problem with this, i got a web error on line 41 and i’m not sure what i did wrong. Any way you can help me out?

    Reply
  • Ahmad Wali

    As George Serradinho mentioned that I have removed the plugin to streamline the blog. Does it make your blog slow? I have tried various plugins, but they effect loading time.

    Reply
  • Rick Upshaw

    I found the correct code and got it to work. For the benefit of anyone else reading this, here is the scenario:

    I have the latest version of Thesis (at the time I posted this, it was Thesis 1.8). I have a page I created entitled “Home” set as the home page of the site, and “News & Updates” set as the blog page. I want the slider to appear only on the static home page (“Home”).

    If this is your scenario, then the code above is correct except for line 4. Change “is_home” on that line to “is_front_page”.

    Hope this helps!

    Reply
  • Anoop

    @Lisa whats the error or problem you are facing? Please elaborate. :)

    Reply
  • Rick Upshaw

    I, too, am having problems getting the slider to show up on my home page. However, I think it may have something to do with the code when used with a STATIC home page. If I set the site to use the blog posts as the home page (as it comes by default), then it works fine. However, if I create a page called “Home” and set that to be the front page shown when the URL is typed in, and then something like “Blog” or “News” as the page where the blog posts show up, that is where the slider shows up using the code above, and not the page I called home. Is there a way to fix this, or are we stuck using the blog posts as our home page if we want to use this plugin?

    Reply
  • Trasie

    Fabulous!

    BUT… I’ve created multiple sliders and now wish to add various ones to various sections. For instance, I want to add the content slider I named Bentobox to only the Bentobox category page. That content slider is identified as 3. What would the PHP code be that I would add to my custom.php file to make that call?

    Each category page will have its own content slider if I can make it work.

    Reply
  • Anoop

    @Zeeshan
    To remove the Smooth Slider Link, Do as follows.
    1]Go to Dashboard.
    2]Go to Plugins>Editor.
    3]Choose Smooth Slider from the Plugin to Edit drop down.
    4]Search for this text:
    Smooth Slider

    5]Remove this text and save the plugin.
    6]Refresh the page.

    Hope it helps! :)

    Reply
    • Jojje

      Even if I really like Smooth Slider I’d like to get the link removed.
      Sorry if I act like a noob here but I find several instances of ‘Smooth Slider’. But is it this one you refer to?
      Line 78
      $sql = “INSERT INTO $meta_table_name (slider_id,slider_name) VALUES(’1′,’Smooth Slider’);”;

      or line 1173
      Smooth Slider

      Reply
      • Jojje

        Nevermind! It’s on line 1173. Just removed the name. Thank you!

        Reply
  • Zeeshan Khan

    him, nice article , I am also using it now, please tell me how to remove smoothslider link from slide?

    Reply
  • Lisa

    I forgot to add that I cannot get the featured slider to show up on my homepage.

    Reply
  • Tracy

    k so that didn’t work…pasting it into my comments removed some stuff….
    how can i post what i have?

    Reply
  • Tracy

    Hi, I’ve tried this and gone over it multiple times and i continue to get an error message and have to back up my custom functions file.

    just to confirm : the code I enter in my custom_functions.php file is:

    function content_slider() { ?>

    <?php }
    }

    add_action('thesis_hook_before_content', 'content_slider');

    so here is my exact custom_functions.php fileL

    <a rel="nofollow" href="http://delicious.com/save?url=&title=” onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=&title=’, ‘delicious’, ‘toolbar=no,width=550,height=550′); return false;” title=”Bookmark this post on del.icio.us”>Bookmark this article on Delicious

    <?php }
    }
    add_action('thesis_hook_before_content', 'content_slider');

    Reply
  • Duck

    I’ve installed the plugin as per your instructions. But what i would like to do is for it to display video posts. I’m using the ‘Flash Video Player with HTML5′ plugin for the video but the slider doesn’t play the video, it just shows the video tag. any ideas what i can do?

    Reply
  • Ricardo

    Sure you can, is just that this instructions are specifically for those of us using it. You’ll probably notice that you can follow this instructions all the way until you have to deal with custom.css and custom_funtion.php, at that point instructions are Thesis specific.

    Hope this help. How’s your site SEO?

    Reply
  • Gautham

    Hi Aky ,
    What if i dont have thesis theme !!! Can i use in normal wordpress theme ??

    Reply
    • Akshay Khurana

      Hello Gaautham,

      I appreciate your question, and I would like to explain it to you. In your template file (for instance home.php or index.php), where you want the slider, just add the code below in your PHP file. Make sure you take a backup using ftp.

      “< ?php if ( function_exists( 'get_smooth_slider' ) ) { get_smooth_slider(); } ?>” (without the quotes). Please find this code above with the appropriate formating, so that you don’t get any errors. Save the file and upload it on the server.

      Activate the plugin, and you will see it on your home page. Style it using the smooth slider options, from dashboard admin. :)

      Reply
  • Ricardo

    Nice slider, now: it is there on my site but not showing any images!

    I tried checking ‘PureImage’ and guess what? Yeah, text is gone but sill no image so only slide bar border is showing.

    Reply
  • Hector

    Hey thanks for the tutorial, i was trying with the featured content gallery plugin but o got a mayor bug. Im glad i saw your tutorial. The only thing i have to say is that the code here didnt work for me that well but i found an easy way around it for all of you that are having trouble still.

    1. install plugin “Thesis OpenHook”
    2. install and set up “Post Slider” plugin
    3. add this line of code To the part on the “Thesis OpenHook” that you want:

    Voila!

    Works like a charm. Hope this Helps.

    Reply
    • Ricardo

      Hector, when you said “add this line of code”

      What line of code are you talking about? I need it Urgently!

      Reply
  • Gustavo

    Thanks for the great tutorial!
    I need to align the right side of the slider box with the top banner on my home page. I’ve increased the width, but on the left side now it’s to close to my sidebar. How can I fix that?
    Also, is there any way that I can put it after the first post, instead that on top of the page?
    thanks,

    Reply
  • Hesham

    Nice Thesis tutorial akyjoe, Smooth Slider is really awesome and probably I will implement it on one of my blogs soon

    Reply
  • venkat

    Can I add the code you mentioned to custom functions using open thesis hook plugin by selecting thesis_ hook_ before_ content

    Reply
    • akyjoe

      Yes, certainly you can use the code in your Thesis Open Hook Settings.

      Make sure you only add the below mentioned code:

      < ?php if (is_home()){ ?>
      < ?php if ( function_exists( 'get_smooth_slider' ) ) { get_smooth_slider(); } ?>
      < ?php } ?>

      Let me know, if it worked fine at your end. :) Since it is a smooth slider, hence it should be added very smoothly. :P

      Reply
      • Ricardo

        Hi akyjoe, I did add the provided code to my Openhook and guess what? the code is showing on my site instead of the slider.

        Any clue?

        Reply
        • Ricardo

          Never mind!, My bad, just needed to get rid of the space between ‘<'and '?' at beginning of the line.

        • Jojje

          Thank’s for clearing that one out!

  • Ray

    Hi, I’ve use this one on my website and works perfectly well for me. You should check it out guys..

    Reply
  • George Serradinho

    I also wrote a post about using Smooth Slider with Thesis and I must say that it’s so easy to setup and use. I had it on my blog for sometime and then removed it. I liked it, but needed to streamline my blog as much as possible and this was one of the plugins I removed.

    Reply
  • Peter J

    any chance you could show us a slider for blogger? You would make your blog amazingly popular because sliders for blogger, there are none. To bad i have wordpress. :(

    Reply
    • Norcross

      Not sure that would even be popular, since Blogger doesn’t run on PHP and you don’t have the file access required to make it happen.

      Reply
  • venkat

    Not worked for me gave the error at line 49 under custom functions.php. I am safe that I backup my custom functions file before modifying.
    I followed the same procedure as it is, still not worked any suggestions.

    Reply
    • akyjoe

      I appreciate your comment for the issue.

      Just for the concern, the tutorial has been tested and is working fine on various websites for our clients.

      Kindly paste the code that you have used in your custom functions file, so that I can refine it for you. :)

      Also, go through the tutorial once again, as a single step skipped, can result bugs and crashes.

      Reply

Leave a Comment