premium WordPress photography themes

How to add featured sliding content to WordPress

In this tutorial, I’ll show you how to add a sliding content region to your WordPress site. You can download the source code for the tutorial, which contains everything you need to put this little thingy on your site in 5 minutes max.

There are a few basic principle that you must know before jumping into this tutorial. First, javascripts are like car parts: You can’t mix Ford parts and expect them to work on a Honda. The same goes with javascript libraries. Conflicting javascript libraries can cause some javascript-powered features to “choke” or freeze. There are ways to use multiple libraries together, but that is beyond the scope of this tutorial. Second, you must load JQUERY before you load JQUERY plugins, like the ones we use on our sites. Make sure that JQUERY shows before other javascripts in the head of your site.

If you already have JQUERY running on site, do not add it again. If you are unsure, view your source code and look for a line containing “jquery.”

Second
Now that we have loaded the css and javascripts required for running the slider, we can now include the slider.php WordPress template file in your theme files. Open up index.php or home.php and locate spot where you want to include the slider. If you are using our Modularity theme framework, you might insert the slider right above this line of code:

Third
Finally, we are going to create a custom write panel to your WordPress post, so that you can choose a thumbnail for each post. Open up your functions.php file and add this code right above the very last ?>.

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

JQUERY comes packaged in the WordPress admin (it powers quite a few features in the admin) but it doesn’t necessarily come in your theme. Adding this line between the <code>__abENT__lt;code__abENT__gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;head__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__lt;__abENT__#8260;code__abENT__gt;</code> and <code>__abENT__lt;code__abENT__gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;head__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__lt;__abENT__#8260;code__abENT__gt;</code> loads JQUERY version 1.3.2:

Notice that I’m referencing jquery from the Google API. This can help speed up page load time (many users might have the JQUERY – Google API cached in their browser, so there is no need to reload jquery each time).

Make sure you load JQUERY BEFORE you load any JQUERY-dependent plugins.

JQUERY comes packaged in the WordPress admin (it powers quite a few features in the admin) but it doesn’t necessarily come in your theme. Adding this line between the <head> and </head> loads JQUERY version 1.3.2:

Notice that I’m referencing jquery from the Google API. This can help speed up page load time (many users might have the JQUERY – Google API cached in their browser, so there is no need to reload jquery each time).

Make sure you load JQUERY BEFORE you load any JQUERY-dependent plugins.

Automatically? Or with hot keys? You can use your keyboard arrow keys on most browsers to scroll left and right. You can also click inside the main box on the left to scroll left. Same goes for the right side.

Automatically? Or with hot keys? You can use your keyboard arrow keys on most browsers to scroll left and right. You can also click inside the main box on the left to scroll left. Same goes for the right side.

hey! I can;t get it to work ! how can i resize the feature content ? lets say, the main content area where i want to display it is about 260 px, how do i resize the feature so it would work with that ? thx for the help

hey! I can;t get it to work ! how can i resize the feature content ? lets say, the main content area where i want to display it is about 260 px, how do i resize the feature so it would work with that ? thx for the help

Q: I followed the directions above. When I first inserted the J_Query, I put it below the JS and then the slider worked but my other graphic elements did not. I moved it above and now my other elements work, but my slider doesn’t slide. It only allows one posting at a time. If I add another, It writes over it….http://www.filmsonartists.com/blog

Q: I followed the directions above. When I first inserted the J_Query, I put it below the JS and then the slider worked but my other graphic elements did not. I moved it above and now my other elements work, but my slider doesn’t slide. It only allows one posting at a time. If I add another, It writes over it….http://www.filmsonartists.com/blog

I joined GPP a few weeks ago and downloaded your Modularity package. My question is this : Are all these things included in the version i downloaded ? meaning all the slider, JQUERY things? or do i need to follow the inastructions listed above as well? Or did i download the new package that has all of this in it and these instructions written above are only for members who had the older Modularity theme download? I have yet to get a slider to work so it seems like i may have to do this stuff you listed here ? Everything else seems to work pretty good except i am still having trouble with video. I use Squeeze 4.0 and i can’t seem to get the proper .flv settings to make my video look good. it all starts as crisp HD quicktimes and ends up as not-so-great looking .flv files. i have been using the MED_prog and Large_prog compression presets in Squeeze. Can you tell me what dimensions and frame reordering, etc. settings you usually use to compress video for your themes? or can you write a tutorial on the detailed way to get the most out of your video for Modularity and other similar themes? That would be helpful. Thanks !

I joined GPP a few weeks ago and downloaded your Modularity package. My question is this : Are all these things included in the version i downloaded ? meaning all the slider, JQUERY things? or do i need to follow the inastructions listed above as well? Or did i download the new package that has all of this in it and these instructions written above are only for members who had the older Modularity theme download? I have yet to get a slider to work so it seems like i may have to do this stuff you listed here ? Everything else seems to work pretty good except i am still having trouble with video. I use Squeeze 4.0 and i can’t seem to get the proper .flv settings to make my video look good. it all starts as crisp HD quicktimes and ends up as not-so-great looking .flv files. i have been using the MED_prog and Large_prog compression presets in Squeeze. Can you tell me what dimensions and frame reordering, etc. settings you usually use to compress video for your themes? or can you write a tutorial on the detailed way to get the most out of your video for Modularity and other similar themes? That would be helpful. Thanks !

How do you modify the graphpaper press modularity themes so that the slider, thumbnail post, or slideshow display on the main page can take images from a nextgen gallery post? All my posts contain images inside of nextgen galleries and out of the box, modularity does not read any of them. Thank you.

How do you modify the graphpaper press modularity themes so that the slider, thumbnail post, or slideshow display on the main page can take images from a nextgen gallery post? All my posts contain images inside of nextgen galleries and out of the box, modularity does not read any of them. Thank you.