Question

I’m trying to implement this gallery on my site: http://tympanus.net/Tutorials/SweetThumbnails/

I’m using the CSS and JavaScript provided by the site, but I can’t figure out what I need to do to add it to my WordPress theme.

Here’s what I have: http://jsfiddle.net/3n4tm/

Answer 1

The HTML structure they provide needs to go into your theme templates somewhere. Depends entirely on where you need it to display. You might add it to either index.php or home.php depending on your theme, if you want the homepage. If you want it to be displayed on a WordPress Page, you may want to create a special page template that includes your code as well as the WordPress loop, your header, etc.

The CSS would go into your theme’s stylesheet (style.css) or into a custom stylesheet, some themes make a custom_style.css or custom.css file available for your own custom styles.

The Javascript could all be placed into a .js file (create your own file called something like sweetthumbs.js or whatever, and dump all their code into it) and then called into your WordPress theme on the appropriate page in the area. (Often this is in header.php, and then header.php is included in the other .php templates in the theme). You’d load that like this <script type="text/javascript" src="/path/to/your/file/sweetthumbs.js"></script>. The .js file would need to be uplaoded to your server, preferably into the theme folder of the theme you’re using (found in your site root / where WordPress is installed, then /wp-content/themes/yourthemename)