We’ve had a lot of our users asking how to add in Google Fonts or their own custom fonts to SlideDeck 2. And recently Dave wrote up a nice little FAQ on the topic. I thought I’d bring it here and elaborate on it slightly more.

This Tips & Tricks post requires some coding, but if you can copy and paste and edit a few lines of code and have access to your functions.php file, you can add your own fonts to use with SlideDeck 2 with relative ease. To load your own custom fonts you will need SlideDeck 2 for WordPress 2.1.20120823 or newer.

This example deck uses the Changa font from Google Fonts – compare to the Dribble Example on our Examples page which uses Lobster Two:

To add your own fonts you will be hooking into the filter that loads them. Here is how you do this:
Add the following code to your functions.php file of your WordPress theme:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
$fonts['droid-sans'] = array( 
// The name of the font displayed to the user in the drop-down
'label' => "Droid Sans",
// The CSS font stack used
'stack' => "'Droid Sans', sans-serif",
// The location of the CSS file that describes the web font
'import' => "http://fonts.googleapis.com/css?family=Droid+Sans",
// The CSS font weight used when this font is chosen
'weight' => '400'
);
return $fonts;
}
add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );
What does it do?

This adds the Droid Sans font to the list of fonts that gets pulled into the Title Font and Body Font options of SlideDeck 2 when editing a Lens. You will be able to choose/select your font now for use in your deck. What are all the parts that make this work?

  • label – The name of the font displayed to the user in the drop-down
  • stack – The CSS font stack used or “font-family” property. For Google Fonts be sure to use what is specified in step 4 of the Use instructions, see below
  • import – The location of the CSS file that describes the web font
  • weight – The CSS font weight used when this font is chosen, be sure to use the correct value, some Google Fonts use a number value instead of “normal” or “bold”

To get the correct reference from Google Fonts, you just need the URL reference to the CSS for that font. You can get that by adding the font to your collection, going to Use, down to step 3 and copy the href value of the stylesheet link.

To get the correct font stack from Google Fonts, take a look at step 4 in the Use tab.

To get the correct font-weight from Google Fonts, take a look at step 1 in the Use tab. Note you can only load 1 weight per entry. Essentially treating each weight as its own font.

What if I want to add more than one font?

You can add in as many fonts as you like, just be sure that the key for the font in the $fonts array (‘droid-sans’ in this case) is unique. For example if you wanted to add in Droid Sans Normal, Droid Sans Bold & Proxima-Nova your code would look like this:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
// Loads Droid Sans in Normal(400) font-weight from Google Fonts
$fonts['droid-sans-normal'] = array(
'label' => "Droid Sans Normal",
'stack' => "'Droid Sans', sans-serif",
'import' => "http://fonts.googleapis.com/css?family=Droid+Sans:400",
'weight' => '400'
);
// Loads Droid Sans in Bold(700) font-weight from Google Fonts
$fonts['droid-sans-bold'] = array(
'label' => "Droid Sans Bold",
'stack' => "'Droid Sans', sans-serif",
'import' => "http://fonts.googleapis.com/css?family=Droid+Sans:700",
'weight' => '700'
);
// Loads Proxima Nova in Bold font-weight from a local font file
$fonts['proxima-nova'] = array(
'label' => "Proxima Nova",
'stack' => "Proxima Nova, sans-serif",
'import' => "http://www.mywebsite.com/fonts/proxima-nova.css",
'weight' => 'bold'
);
return $fonts;
}
add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );
The import value for Proxima-Nova looks different, why?

You may see that Proxima-Nova’s import value is different. Proxima-Nova is not a Google Font, but with a web usage license you can reference the CSS hosted on the website that includes this font. Check out these links for more information on @font-face:

Since this code is a WordPress filter, you need to return the $fonts variable at the end of the function, whether or not you have modified it. For more information on using WordPress filters check out:

What if I use TypeKit?

If you are using a service like TypeKit which requires the insertion of custom JavaScript to load the fonts, you can leave out the import key and value. See this example for how to format your filter:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
// Loads Museo 300 from TypeKit - you need to use the slidedeck_iframe_header action to echo scripts to view in preview and via iframe mode
$fonts['museo-300'] = array(
'label' => "Museo 300",
'stack' => "'museo', serif",
'weight' => '300'
);
return $fonts;
}
add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );

You will need to make sure you add your TypeKit JavaScript to the <head> tag of your site, follow TypeKit’s instructions here. You will also need to hook into the newly added slidedeck_iframe_header action and echo your scripts into the iframe head for the preview and if you load your SlideDeck using the iframe method. To do this you would have an addition to your functions.php file that would look like this:

function add_my_custom_typekit_font_script( $slidedeck, $preview ){
// Replace the JavaScript tags here with the code for your Typekit Kit
$script_output = '<script type="text/javascript" src="//use.typekit.net/oak0aqy.js"></script>';
$script_output .= '<script type="text/javascript">try{Typekit.load();}catch(e){}</script>';
echo $script_output;
}
add_action( 'slidedeck_iframe_header', 'add_my_custom_typekit_font_script', 10, 2);
In Summary

You can add the fonts you want from Google Fonts with just a bit of custom code, you can even add in your own fonts via the @font-face implementation just by loading your own CSS. With the ability to load in your own custom fonts, you can now make SlideDeck 2 fit that much better with your site than you could ever before.

We would love to see your implementations of custom fonts in your SlideDecks. Share a link to your custom font SlideDeck in the comments below. If you have any technical questions about implementing your own custom fonts, please create a new support ticket.

We all love our WordPress plugins, but make no mistake – making them work for everyone can be a hairy beast. Each plugin developer has no control over how their user’s theme is coded, or which other developers’ plugins & scripts are being loaded, and how they behave. Given the openness of the WordPress community, it’s to be expected, but sometimes these external factors can conflict with each other to produce…interesting results…

Sometimes theme or script conflicts can prevent SlideDeck 2 from appearing and functioning as it should, right out of the box. Thankfully, we recognized this pretty early on in our internal testing, and we implemented an awesome little feature that can nip the majority of these issues in the bud – by loading them in iframes.

Already know about iframes? Skip straight to the code, below.

No, Apple did not invent the iframei-What?? Is this an Apple product?

No, no, no – iframes have been around a lot longer than the shiny white products of Jobsian heritage. They’re essentially mini web pages that are displayed within a window embedded in the surrounding parent page. Although you may not recognize them, you’ve definitely seen them around: Facebook Like buttons, Twitter search boxes and YouTube videos – all of these commonly-used social web elements are actually embedded in pages using iframes

So why is this helpful to us?

Since iframes are actually windows onto entirely separate pages, the content displayed in them is pretty well-insulated from anything else that’s happening on the surrounding page – whether that’s conflicting CSS styles, or javascript. Embedding your SlideDeck in an iframe therefore lets you effectively sandbag it from other conflicting elements on your page, thereby ensuring that it renders exactly as you intended.

Ok, I’m sold. How do I embed my SlideDeck inside an iframe?

Are you ready for this? We have two different ways to do it. Don’t worry, this won’t hurt a bit!

1. To embed a single SlideDeck inside an iframe: Simply add the parameter iframe=1 into the shortcode you used to embed the SlideDeck in your post or page – here are a couple examples:

[SlideDeck2 id=XXXX iframe=1]
<?php echo do_shortcode( '[SlideDeck2 id=XXXX iframe=1]' ); ?>

To embed all SlideDecks inside iframes, moving forward: Under “SlideDeck 2 » Advanced Options“, toggle the “Include the “iframe=1” attribute in all new shortcode embeds by default” option to ON (this will not affect any already inserted SlideDeck shortcodes, so you will need to go back and modify those)

What about SEO? Aren’t iframes, like, the devil when it comes to search rankings?

It depends what you’re going for. Google does actually crawl the content and links contained inside iframes, and gives credit to the originating page. This means that embedding your SlideDeck inside an iframe will confer no SEO benefit to the page you embed them on. The good news, however, is that your SlideDecks all reside locally on your WordPress installation, so your overall site will still be credited as the source of the content.

Hopefully that gives you a good understanding of our ‘silver bullet’ solution for script and styling conflicts. Still got questions? Let us know in the comments!

 

As you all may know SlideDeck does not support IE6. We’ve gotten the question over and over, Why don’t you support this browser, a lot of people in business still use it because they have to. Believe me, we completely understand this fight plight.

As a company, the creators of SlideDeck, digital-telepathy, don’t support IE6 either, unless the client wants to pay extra for it. Why do they charge more you ask? Well, IE6 has the unfortunate circumstance of an innumerable amount of rendering quirks that no other browser on the market (not even later versions of IE) have. Sometimes these quirks can add an additional 20% to the amount of work required to get whatever it is you are trying to make work, work in IE6. Often many hacks are required to get a website to render properly.

SlideDeck takes advantage of some pretty fancy effects, many of which are only available with CSS3 (which IE6 does not support). Not to mention, to support IE6 would hamstring the development because we’d be too busy trying to dumb down its capabilities to make it work in IE6 and then supporting all the weird rendering quirks that will come from all the existing CSS hacks interfering with SlideDeck’s CSS that are used to get users websites to even render decently in IE6.

Anyways, this is all rehashing of things we’ve already documented and communicated on the website. So, now that you know IE6 isn’t supported, what do you do with your content to handle users that still use it while still presenting the great interaction that SlideDeck offers to the majority of your visitors who aren’t using IE6? The best way of doing so is to present two versions of your content – one for incompatible browsers, the other for compatible browsers.

Below is a nice conditional script to detect the visitor’s browser server-side to prevent displaying the content on the website twice or a flicker of un-styled content before the CSS has finished loading or the JavaScript has finished running. This code snippet is written for PHP, but the concept can easily be adapted to your language of choice.

<?php
/*
We will look at the value of the $valid variable at the end
of this script to see if we should display the SlideDeck
content or not. By default we assume that the browser
viewing this page is a valid one, so we set it to TRUE. If
we find that it is invalid though we will set it to FALSE
and show different content.
*/
$valid = true;
// Check for IE (earlier than 7)
if( preg_match( "/MSIE (5|6)/", $_SERVER['HTTP_USER_AGENT'] ) ) {
// IE6 detected, invalidate
$valid = false;
}
// Check for old versions Firefox (earlier than 3.1)
if( preg_match( "/ Firefox\/([0-9a-z\.]+)/", $_SERVER['HTTP_USER_AGENT'], $ff_matches ) ) {
if( version_compare( $ff_matches[1], 3.1 ) == -1 ) {
// Firefox detected at less than version 3.1 (when the -moz-transform CSS3 property was added), invalidate
$valid = false;
}
}
// Check for Opera (earlier than 10.5)
if( strstr( $_SERVER['HTTP_USER_AGENT'], "Opera" ) ) {
// Opera detected, check UAString for version numbers (there are many variants)
if( strstr( $_SERVER['HTTP_USER_AGENT'], "Mozilla" ) ) {
if( preg_match( "/Opera ([0-9\.]+)/", $_SERVER['HTTP_USER_AGENT'], $o_matches ) ) {
if( version_compare( $o_matches[1], 10.5 ) == -1 ) {
// Opera version less than 10.5 found, invalidate
$valid = false;
}
}
} elseif( preg_match( "/Presto\/([0-9\.]+)/", $_SERVER['HTTP_USER_AGENT'], $o_matches ) ) {
if( version_compare( $o_matches[1], '2.5.22' ) == -1 ) {
// Opera version less than 10.5 (with Presto engine less than 2.5.22), invalidate
$valid = false;
}
} elseif( strstr( $_SERVER['HTTP_USER_AGENT'], "Opera/9.80" ) ) {
if( preg_match( "/Version\/([0-9\.]+)/", $o_matches ) ) {
if( version_compare( $o_matches[1], '10.50' ) == -1 ) {
// Opera version less than 10.5 found, invalidate
$valid = false;
}
}
}
}
if( $valid === true ):
?>
SlideDeck information
<?php else: ?>
IE6 and Non-compatible Firefox/Opera information
<?php endif; ?>

This code snippet looks for old and incompatible versions of IE (5.x and 6.x), incompatible versions of Firefox (< 3.1) and incompatible versions of Opera (< 10.5). If you have another browser you want to show different content for (a mobile device for instance), you can always add more conditionals in to check for that browser’s User Agent String. Check out UserAgentString.com for a list of all the variants out there for each version of each browser.

If you don’t have access to write server-side markup, you can also use some other CSS and JavaScript based solutions as well. Check out the following threads in our support community for more information on your visitors and IE6:

The last time we held a skin contest, we got a lot of great submissions and some interesting feedback from our users. Today I’ve modified one of the Smart SlideDeck skins to work with non-WordPress versions of SlideDeck. This skin is available to both Lite and PRO users and can be downloaded below.

This skin is intended for use with the non-WordPress version of SlideDeck and requires you to manually edit the HTML. You could also use it in PHP loops for dynamic content, but in general you’ll need to know your way around HTML to use this skin.

Smart SlideDeck skin for non-Wordpress sites.
Read more

Sometimes you want to loop through content in a way that the WordPress plugin cannot or it might be a little confusing if you aren’t using WordPress at all. Well, we’re here to help! This tutorial is the first in a series of how-tos for SlideDeck, offering integration solutions so you can keep creating!

Disclaimer: This particular tutorial is pretty advanced and requires knowledge of PHP and some knowledge of XHTML/CSS. Not all of our tutorials will be this advanced and we will try to keep all of them as simple as reasonably possible.

The paginated loop

Say you want to place a SlideDeck on your home page with the your most recent blog posts listed in groups of 4 on each slide of your SlideDeck. How do you loop through all of your posts and group them into groups of 4, creating a new slide after each group? This ends up being a fairly complex loop, but super useful for any kind of paginated content, not just SlideDecks.

Step 1: Setup your HTML

First things first, lets setup our HTML with some dummy content to determine how our markup will look after we have setup the loop. For this example we’ll use a simple group of link tags as our content on each slide.

<div id="slidedeck_frame" class="skin-slidedeck">
<dl class="slidedeck">
<dt>Slide 1</dt>
<dd>
<a href="link1">Post Title 1</a>
<a href="link2">Post Title 2</a>
<a href="link3">Post Title 3</a>
<a href="link4">Post Title 4</a>
</dd>
<dt>Slide 2</dt>
<dd>
<a href="link5">Post Title 5</a>
<a href="link6">Post Title 6</a>
<a href="link7">Post Title 7</a>
<a href="link8">Post Title 8</a>
</dd>
<dt>Slide 3</dt>
<dd>
<a href="link9">Post Title 9</a>
<a href="link10">Post Title 10</a>
</dd>
</dl>
</div>
<script type="text/javascript">
$('dl.slidedeck').slidedeck();
</script>
<noscript><p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p></noscript>

So, as you can see here we have a simple SlideDeck with groups of four links of the title for each post – not too complex. I’m not going to go into how this should appear visually in this tutorial as our primary focus is the code necessary to create the automatic loop.

Step 2: Create the Loop

Now that we have the HTML markup base established, a goal of what we’re trying to create with our loop, lets create it! For the purposes of this example, I’m going to use WordPress and a WP_Query command to simulate getting the latest posts from our blog. You can see the code all put together below and each piece broken up and explained further down the post.

<?php
$args = array(
'cat' => 58,
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 20,
'orderby' => 'date',
'order' => 'DESC'
);
// Our incrementing counter, leave this set to 0
$counter = 0;
// Query the posts based off of the parameters in the $args variable
$slidedeck_posts = new WP_Query( $args );
// Our calculated limit of how many posts we have to work with, don't change this
$slidedeck_posts_limit = count( $slidedeck_posts->posts ) - 1;
// How many posts to display in each slide of the SlideDeck
$per_page = 4;
?>
<div id="slidedeck_frame" class="skin-slidedeck">
<dl class="slidedeck">
<?php foreach( $slidedeck_posts->posts as $slidedeck_post ): ?>
<?php
$slide_number = floor( $counter / $per_page ) + 1;
$slide_mod = $counter % $per_page;
$slidedeck_post_ID = $slidedeck_post->ID;
$slidedeck_post_title = get_the_title( $slidedeck_post_ID );
$slidedeck_post_link = get_permalink( $slidedeck_post_ID );
?>
<?php if( $slide_mod == 0 ): ?>
<dt>Slide <?php echo $slide_number; ?></dt>
<dd>
<?php endif; ?>
<a href="<?php echo $slidedeck_post_link; ?>"><?php echo $slidedeck_post_title; ?></a>
<?php if( $slide_mod == ( $per_page - 1 ) || $counter == $slidedeck_posts_limit ): ?>
</dd>
<?php endif; ?>
<?php $counter++; ?>
<?php endforeach; ?>
</dl>
</div>
<script type="text/javascript">
$('dl.slidedeck').slidedeck();
</script>
<noscript><p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p></noscript>

A single loop to break up your data into nice chunks on each slide. Again, keep in mind that while we are only outputting the title linked to the post, but you could put anything you want there such as the post thumbnail, an excerpt or any other data you have access to regarding the post. I recommend looking at the WordPress Function Reference and Template Tag Reference for more information about what you can get with WordPress post data. Now, on to what each of these pieces of code actual do…

Setup your data:

<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 20,
'orderby' => 'date',
'order' => 'DESC'
);
// Our incrementing counter, leave this set to 0
$counter = 0;
// Query the posts based off of the parameters in the $args variable
$slidedeck_posts = new WP_Query( $args );
// Our calculated limit of how many posts we have to work with, don't change this
$slidedeck_posts_limit = count( $slidedeck_posts->posts ) - 1;
// How many posts to display in each slide of the SlideDeck
$per_page = 4;
?>

Here we setup the data to loop through. First we setup the arguments for the group of posts in the $args variable (the 20 most recent published posts) and pass that to the WP_Query() command to get our group of posts. Next we can set the $per_page variable to determine how many posts we want on each slide of our SlideDeck. The other variables ($counter and $slidedeck_posts_limit) should be left alone as they are used for calculating where to break the loop.

Start the loop:

<div id="slidedeck_frame" class="skin-slidedeck">
<dl class="slidedeck">
<?php foreach( $slidedeck_posts->posts as $slidedeck_post ): ?>

We will be looping through the slides so we need to start the loop within the <DL> tag so we are only creating new slide titles (<DT> tags) and slides (<DD> tags). The WP_Query object returns all kinds of data about the database query itself as well as the results. All we are concerned about is the posts themselves, so we will be looping through each $slidedeck_posts->posts.

Setup some variables for use in the loop:

<?php
$slide_number = floor( $counter / $per_page ) + 1;
$slide_mod = $counter % $per_page;
$slidedeck_post_ID = $slidedeck_post->ID;
$slidedeck_post_title = get_the_title( $slidedeck_post_ID );
$slidedeck_post_link = get_permalink( $slidedeck_post_ID );
?>

Here we are setting up the variables we’ll be using in each iteration of the loop. The $slide_number variable is used to title each slide title tag (Slide 1, Slide 2, etc.). The $slide_mod variable is the modulo value of the incrementing $counter variable – this is used to determine where our groups of posts start and stop for each slide. The $slidedeck_post_ID, $slidedeck_post_title, and $slidedeck_post_link variables are all simple lookups to be used in the output for the ID of the post, the title and the permalink respectively.

Determine when to make a new slide:

<?php if( $slide_mod == 0 ): ?>
<dt>Slide <?php echo $slide_number; ?></dt>
<dd>
<?php endif; ?>

When using the modulo of an incrementing value it will return as a number between 0 and the second number in the modulo equation minus 1 (see the Wikipedia article for more information on the math behind this). For example, since we are paginating slides every 4 posts, the modulo will just loop 0, 1, 2, 3, 0, 1, 2, 3, etc. So, whenever the modulo value is zero we will start a new slide.

Output the slide content:

<a href="<?php echo $slidedeck_post_link; ?>"><?php echo $slidedeck_post_title; ?></a>

Each time we go through the loop we will output the information about the post that we want to be displayed. The end result is that we are looping through all the posts (as opposed to how many slides we want) and just inserting HTML markup to make (or close) a new slide whenever needed.

Determine when to close a slide:

<?php if( $slide_mod == ( $per_page - 1 ) || $counter == $slidedeck_posts_limit ): ?>
</dd>
<?php endif; ?>

When looping through a series of paginated data like this, the most difficult thing to determine is when you need to close the surrounding HTML markup. You will need to close the slide on both the maximum modulo value ($slide_mod == ( $per_page - 1 )) of the $counter variable and when we have run out of posts ($counter == $slidedeck_posts_limit). This way though we asked for the last 20 posts, even if we only get 17 posts back, we’ll still close off the HTML <DD> tag even though we haven’t filled that last slide with 4 post entries.

Increment the counter and close the loop:

            <?php $counter++; ?>
<?php endforeach; ?>
</dl>
</div>

Here we increment the counter for each iteration in the loop and close up the loop, closing the HTML for the <DL> and container <DIV> as well to create well formed HTML markup for our SlideDeck.

You can use this code snippet on any website utilizing PHP, just change how you get the data to utilize the database methods your website’s platform uses. If you want to use this on your WordPress website, just copy and paste the code snippet into one of your template files where you want to display the SlideDeck. Make sure you have the SlideDeck plugin running and it will use the default SlideDeck skin automatically. You could also custom program your own CSS as well to create a great looking SlideDeck for your website.

Next time:

In our next tutorial we’ll talk about creating a secondary navigation like the dots navigation used in the Smart SlideDeck skin that comes with the SlideDeck WordPress plugin.

Questions? Comments? Ideas for future tutorials? Let us know in the comments below!

Related Reading: