In my recent work on advertising website design, client being a flyer designer had an amazing portfolio on automotive flyer design. In order to show portfolio work, client demanded for a presentation or a slide show of work on landing page. A featured content slider was added on the homepage using thesis theme. A screenshot below will clear you about the featured content slider.
Featured Slider on Client Site
Featured content slider uses JavaScript which takes your blog to next level along with SEO advantage. In this article, we will learn to add image slider in wordpress thesis theme. But before we proceed with this article I recommend you to safely upgrade thesis theme.
Step 1: Add Content Slider Plugin in WordPress
In order to add featured slider in wordpress we will have to install a plugin. Below is a simple procedure to add slider plugin:
- Login to Dashboard Admin of WordPress site.
- Navigate to Plugins > Add new Plugin.
- Type “Content Slide Plugin” in search box and click on the submit button.
- In the listed result, click Install Now link under WordPress Content Slide Plugin by Snilesh. (Refer to the screenshot below)
Step 1: Install Plugin
- Install the plugin by clicking on install link underneath it and further Activate it.
Step 2: Configure Content Slider Settings
On activating the plugin, a left pane menu item “Content Slide” is added. In order to customize content slider, we will have to configure its settings for width height and content. Below is a simple procedure to configure slider.
- Navigate to Dashboard > Content Slide.
- Content Slide options are divided into three sections General Settings, Effects & Animation Settings and Image Source Settings.
- General Settings for content slider can be configured by referring the screenshot below:
Step 2: General Settings
- Effect & Animation Settings can be configured by referring the screenshot below:
Step 2: Effect & Animation Settings
- Image Source Settings can be configured by referring the screenshot below:
Step 2: Image Source Settings
- Once you are done with the settings click the update button to save the configurations.
Step 3: Show Featured Slider in Thesis Theme
Now that we are done with the configuration of featured slider, we are left with to display slider on homepage template. Copy-paste the code snippet in the custom_functions.php, below:
Make sure you take full backup of custom_functions.php file using FTP before modifying it.
//Author: AkyJoe
//Email: akyjoe@gmail.com
function content_slider() {
if (is_home())
{ ?>
<div id="slider"><?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?>
</div>
<?php }
}
add_action('thesis_hook_before_content', 'content_slider');
We are Done!
Now, that we have added the code, you can refresh the website and see the slider in homepage. If you find the slider not adjusting the layout, you can repeat Step 2, above to change width, height and color settings for slider, till you are satisfied.
We come to the end of this tutorial to add featured content slider in thesis theme. If you have any query or further assistance is required, post comment below as your feedback.
Great work. I got it the slider to load, but I can’t seem to load content. Do the posts selected by Category require a thumbnail to show up?
Hey michelle,
I appreciate your comment over the post and i would like to tell you that, the plugin you installed has its options within the dashboard panel. So you can use these options to show up the content.
About the images, since it is a static silder, so you will have to specify URL of the image manually.
Let me know if you still don’t find to add content on slider.
Hi Aky,
I can’t seem to get the content slider to show up at all.
I’m putting this code under Thesis OpenHook =>before Content:
function content_slider() {
if (is_home())
{ ?>
<?php }
}
However, it's not working..perhaps I don't have the right code or I'm putting it in the wrong place?
Thanks,
Chung Tang
Hey Chung,
I understand the problem, thanks for writing up here. When we use Thesis Open Hook Plugin, we don’t mention the function with it. Hence for Thesis open hook code will be as under:
< ?php if (is_home()) { if(function_exists('wp_content_slider')) { wp_content_slider(); } } ?>
Make sure you check ‘execute php’ checkbox before saving the hook.
I am sure it will work now!
Cheers!
Hi Aky,
Thanks for your tutorial. I too am having trouble getting the content slider to show up…
I am also already using the Open Hook Plugin. I see your post to Chung about using a different bit of code… I copied and pasted that into my custom_functions.php doc, but the slider still doesn’t show up. You also mention checking ‘execute php’ checkbox… where would i find this?
Any help you can offer would be much appreciated. Thanks!
Josh
Hey Josh,
Don’t get confused, with the code I mentioned for Chung above, as it is for Open Hook Plugin. If you want to add code in custom_functions.php then you will have to use the code I posted in the tutorial, and it should work.
Make sure you are not skipping any of the step above. 😉
Let me know if problem still persists.
Aky,
Thanks for the reply. Unfortunately, I am still unable to get the slider to show up at all. I started over from the beginning and used your original code snippet from the tutorial and pasted that into my custom_functions.php. Nothing shows up when i refresh my page. Any ideas what would cause it not to show up at all? I’d love to avoid having to spend hours trying to write my own code and just use this plugin, but thus far, it seems to be completely useless. Please help.
Josh
Don’t loose your patience like this, we will make this slider work for your website. 🙂
Below are couple of things which you need to check:
1. Make sure that, you have renamed Thesis Custom Folder using FTP client, so as to reflect the changes.
2. Make sure that Plugin is activated and configured properly.
3. Make sure that your Thesis is installed properly and is using latest version.
I Hope should do, else you can contact me via Email for further assistance.
Thanks for your help! Wish i knew how you accomplished this!
As you were using a static homepage, you just had to replace “is_home()” with “is_page(‘#PAGE ID#’)”.
Cheers! 😉
so the “is_page (#PAGE ID#) should be what for a specific page?
For example, my page is labeled “landing”. how should I write the code, completely? And where should I place it? Can I use Open Hook to do this on a specific page or does it have to go in the custom.functions.php file?
You can either use open hook plugin or put the code in custom_functions.php.
We purposely use IDs because they can’t change whereas page name can. So you can either use page id code or simply use if(is_page(‘landing’)){ }
Cheers!
Absolutely fantastic article! This slider works perfectly and is super flexible – exactly what I was looking for. The code you gave in the comments as well works very nicely. Just need to get some good images and I’ll be up and running!
This is the code that worked for me in Open Hook (for a static homepage). Just exchange the number 16 for the page ID of the page/post you want the slider to appear on.
Great post Aky! much appreciated 🙂
Glad it worked for you, I hope tutorial made it look easy for you. 🙂
HI, and thanks for your awesome tutorial. It work for me. But I have a question, perhaps you can help me. I want the slider display below my header and navbar, but in 960×330 px. only in my blog page. Now its in 684 width. Something like in Platform theme. Can you help me on that?
Have a nice day and thanks again
Great stuff. Simple and informative tutorial. I had been using the plugin already but I needed to adjust a few things and this tutorial did it for me. Thanks
Hi, I ‘ve had a very frustrating experience with this code. I added the plugin and can see all the editing options but it actually broke my site when I added this code to my customfunctions.php page. I was trying to add it to my landing page, but I don’t know why it didn’t work. /*to add the wp content slider on the Landing page */
any suggestions?
Hey There. I found your blog using msn. This is a very well written
article. I’ll be sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll definitely comeback.