• X

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

    By in Thesis Customization

    Bluehost hosting

    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 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

    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 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

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

    image thumb2 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

    • 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 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

    • 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 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

    • 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 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

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

    image thumb6 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

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

    image thumb7 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

    image thumb8 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

    • 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 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

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

    image thumb10 [Tutorial] How to add Featured Post Slider in Thesis Wordpress Theme

    • 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?

    Get Free Blogging updates in your Email

    Find more Topics based on Keywords

    Article by

    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… read them below or add one }

    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

    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

    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

    Ray

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

    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.

    Hesham

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

    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

    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

    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

    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

    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

    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

    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

    Tracy

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

    Reply

    Lisa

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

    Reply

    Zeeshan Khan

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

    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

    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

    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

    Anoop

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

    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

    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

    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

    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

    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

    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

    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

    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

    Jojje

    Thank’s for clearing that one out!

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `