Category: usability

If you are like me, you love Slidedeck (http://www.slidedeck.com) for the ease of use for me and my clients when I have handed over the site.

Typically I use Slidedeck for what is known as a hero slides how on the home page and very occasionally on the page itself and Slidedecks combination of methods of site integration makes this really easy.

However, what if you have a site that needs to have product slideshows in the header area? Again, it’s easy if you can have a layout for each page, but the problem comes in where you need a single say ‘products’ layout to cover a large range of products/pages. There is just no way to change the slideshows on a per page basis, if the slideshows is to be in the header.

The solution is actually much easier than you would probably think. Using a combination of Slidedeck with another plugin (Advanced Custom Fields), and a small piece of php code inserted into your theme. Using this method you should be able to:-

• Provide a visual way to enter a Slidedeck code into an individual page
• Allow product (or similar) pages to show slideshows in the header rather than on the page. Even if they use the same theme template

This will take the form of step by step instructions. It’s worth noting that I am no php coder, so any additional help with the code beyond what I did to ‘make it work’ would be appreciated.

1. In your copy of WordPress, install Slidedeck and create a slideshow as an example we can use.
2. Install the plugin “Advanced Custom Fields”. This is what will allow you to create both the visual interface and the field of information the post needs to know which slideshow it needs to display
3. Once you have advanced custom field installed, you will see Custom Fields at the bottom of the left side menu bar in WordPress.
4. I created a custom field called Page Sliders, and gave it the settings as follows: –
   
   
   You can see from the above that I have a home page template where I don’t want to show this as an option, as it will use a standard template and slideshow with a slightly different layout. Selecting “Standard Metabox” ensures that there will be a box for the WordPress page editor.
   My description is probably a bit over wordy btw, but I have done this assuming it won’t be changed for a while and the user will more than likely have forgotten what to do when they need to make changes.
5. All the above should give you is something like the below. This gives you an area in your page to add the Slidedeck shortcode, so that it will be stored with the page. At the moment, that is all that this does as we have not yet integrated the code we need into the theme.
   
6. Now here comes the hard bit unfortunately! We need to edit our theme. It’s actually easier than it sounds, but I would advise you to back up the theme code before you start to edit it. You can either FTP the theme to your local machine, or even copy all the code and paste it in a text file. You do all this in <Appearance><Editor> from the WordPress sidebar.
7. Typically when you open the editor you will see your themes CSS file. If you have set up various page templates, you will also see those listed, otherwise you will just see the one template, the header template, footer template etc.
   Which one of these you want to edit depend on your theme. I would start by looking at the header, where you will probably see, the head section of the document, then the header of the site, then the navigation, then the top of the main content area. In my case I want the slideshow under the navigation and in the main content area, so instead of the header.php I can put the code in the page template.
8. Opening up the page template, you will see some code to get the get the header <?php get_header(); ?>, so the code is to go under that in my case (just above the main content). The code you need is: –
   <link rel=’stylesheet’ id=’slidedeck-css’ href=’http://www.webxopt.com/wp-content/plugins/slidedeck-lenses/half-moon-1a/lens.css?v=1.0′ type=’text/css’ media=’screen’ />
   <div id=”slider-custom” style=”position:relative;left:-20px;top:-24px;”>
   <?php
   $sliderdeck = get_field(‘slidedeck_shortcode’);
   ?>
   <?php echo do_shortcode($sliderdeck); ?>
   </div> <!– slider-custom –>This links to the slidedeck css files (in my case I used the half moon slidedeck style, so linked to that), creates a new div (the styles included were required for my theme, but you may need to change the numbers), then get the slidedeck shortcode from the custom field in the page, then add it into template.
9. Hopefully that should now all be done. The only thing left to do is set up the page.
10. You can go and get a shortcode directly from slidedecks interface, but for me the easiest way is to copy the code in the explanation, then change the number according to the slidedeck you want.
    
    The above shows the interface on the post page and the below in slidedeck. Note that you have to mouse over the deck you want to get the ID number.
    
11. Your end result should look something like “[SlideDeck2 id=2641]”. When you preview the page, you should now see your custom slidedeck up in the head of your page.
    

Hopefully, this will help anyone who has been battling with this problem as I have. If you have any comments, please leave them below. PHP code suggestions would be particularly helpful!