How to Add a Picture Slider to an Artisteer Theme

I have always loved the way picture sliders look on the home pages of some Premium themes for WordPress.  Don’t you?

Now, with the help of a new plugin I found out last week, I am able to add a picture slider to themes created with Artisteer.  This is what the finished website looks like:

Click here for a Live Demo

Do you like it?  This is how I did it.

What you need:

• Artisteer – I am using version 3.1.0
• Easing slider plugin for WordPress – http://wordpress.org/extend/plugins/easing-slider/
• A “Company Logo” image 900 x 150 pixels to be used as the header picture.  Note: Logo has to fit on the top 110 pixels because the menu will cover the bottom 41 pixels
• At least 3 pictures for the slider, 900 x 225 pixels each

We start by creating a theme with Artisteer (If you want to skip the next few steps, Click Here to download a copy of the Artisteer Theme and files already configured):

1. Open Artisteer, and select  a new WordPress Theme.
2. Go to the “Colors & Fonts” tab, click on “Color Themes” and select “Silver Stream” (under Bluish).
3. Go to the “Layout” tab:

• Click on “Design Layout” and go down to “Menu Inside Header”, select the fourth one to the right. This is the one with the menu at the bottom of the header picture.
• Click on “Sheet Width” and select 900 pixels.
• Click on “Columns” and select two columns, with the sidebar to the right.
• Click on “Column Width” and select 225 pixels (this will be the width for the sidebar).

4. Go to the “Background” tab:

• Click on “Fill Color” and click on White.
• Click on “Texture or Image” and select “No Texture”.
• Click on “Light Effect” and select “No Glare”.

5. Go to the “Sheet” tab:

• Click on “Border” and select “No Border”.
• Click on Shadow” and select “No Shadow”.

6. Go to the “Header” tab:

• Click on “Height” and select 150 pixels.
• Click on “Fill Color” and select White.
• Click on “Background Image” and upload the “Company Logo” picture you created before.
• Remove the Headline and Slogan Text.

7. Go to the “Menu” tab:

• Click on “Length” and select “Page Width”.
• Click on “Menu Styles” and select the eight design from the left column.
• Click on “Styling”, then click on “Align” and select right Justified.

8. Go to the “Footer” tab:

• Click on “Length and Position”, select “Page Width”.
• Click on “Fill” and select the darker blue at the bottom-left side.

9. Once you have finished with the design, save it and export the files for WordPress.

Next, we need to create a template for the homepage of our theme. This template will have the picture slider on it.

Go to the theme directory created by Artisteer, an copy the file “page.php” to “page-homeslider.php”. Edit the file “page-homeslider.php” (you can use notepad for editing), and replace the first line:

<?php get_header(); ?>

With these lines:

<?php
/*
Template Name: Homepage Slider
*/
?>
<?php get_header(); ?>
<br /><br /><?php if (function_exists('easing_slider')){ easing_slider(); }; ?>

Save the file. Copy the theme folder to your WordPress installation, and activate the theme.

Copy the Easing Slider plugin to your WordPress installation, and activate it.

Once the plugin is activated, you will see a new tab on the left side labeled “Easing Slider”. Click on it.

The first page is used to add the pictures for the slider.  Copy the pictures you want on your slider to a directory on your WordPress installation. For this example, let’s say you are using the following directory:

http://www.YOURDOMAIN.com/images

If this is the case, then the path to the pictures would be something like this:

http://www.YOURDOMAIN.com/images/image-1.jpg

Using this path, add the pictures to the slider.  For example, under “Image #1 Link:”, put the path for the first image on the field labeled “Image Path”. Do the same for all other pictures. Save your work.

Next, Click on the tab “Slider Settings”.  Set Slider “width” to 900 pixels, and Slider “height” to 225 pixels.  Save your work.

Now create a page to be used as your homepage.  On the right hand side, under “Template” select “Homepage Slider”. This is the file we just created (page-homeslider.php). After you finish with the page, Publish it.

To make this page the home page, click on “settings”, then on “Reading”. Click on “A static page (select below)”, and select the page you just created from the list. Save your changes.  This will make the page you just created your homepage.

That’s it. You should be able to look at your website and you will have a slider on your home page.  Some of the settings I have used are my own preferences, such as the size of the pictures on the slider, choice of colors, transitions, etc.  You can change these to anything you want.  Go ahead, experiment.

I hope this was helpful, leave me comments below and let me know what you think.