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 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)
- 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:
- Effect & Animation Settings can be configured by referring the screenshot below:
- Image Source Settings can be configured by referring the screenshot below:
- 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.