How to add featured sliding content to WordPress


sliding content for wordpress screenshot 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.

Demo

Download

First
Unzip the download files posted above. Upload slider.css, slider.php, timthumb.php, the /js/ and /cache/ folders into your active theme folder. Copy the contents of the /images/ folder into your themes /images/ folder. Do not overwrite your existing /images/ folder. TimThumb.php requires the GD library, which is available on any host sever with PHP 4.3+ installed. Manually change the /cache/ folder permissions to 777.

Open up header.php in the theme editor. Add these three lines of code somewhere between the <code>__abENT__lt;head__abENT__gt;</code> and <code>__abENT__lt;__abENT__#8260;head__abENT__gt;</code>

<code>__abENT__lt;link rel=__abENT__quot;stylesheet__abENT__quot; href=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;slider__abENT__#46;css__abENT__quot; type=__abENT__quot;text__abENT__#8260;css__abENT__quot; media=__abENT__quot;screen__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;<br />
__abENT__lt;script src=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;js__abENT__#8260;jquery-1__abENT__#46;3__abENT__#46;2__abENT__#46;min__abENT__#46;js__abENT__quot; type=__abENT__quot;text__abENT__#8260;javascript__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;script__abENT__gt;<br />
__abENT__lt;script src=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;js__abENT__#8260;slider__abENT__#46;js__abENT__quot; type=__abENT__quot;text__abENT__#8260;javascript__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;script__abENT__gt;</code>

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:

<code>__abENT__lt;?php<br />
$featured = get_option(__abENT__apos;T_featured__abENT__apos;);<br />
if($featured == __abENT__quot;On__abENT__quot;) { include (THEMELIB __abENT__#46; __abENT__apos;__abENT__#8260;apps__abENT__#8260;featured__abENT__#46;php__abENT__apos;); }<br />
?__abENT__gt;</code>

Paste this right above it:

<code>__abENT__lt;?php include (__abENT__apos;slider__abENT__#46;php__abENT__apos;) ?__abENT__gt;</code>

As you might guess, this tells WordPress to include the slider.php.

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 ?>.

<code>__abENT__#8260;__abENT__#8260; Custom Write Panel<br />
<br />
$meta_boxes =<br />
	array(<br />
		__abENT__quot;image__abENT__quot; =__abENT__gt; array(<br />
			__abENT__quot;name__abENT__quot; =__abENT__gt; __abENT__quot;image__abENT__quot;,<br />
			__abENT__quot;type__abENT__quot; =__abENT__gt; __abENT__quot;text__abENT__quot;,<br />
			__abENT__quot;std__abENT__quot; =__abENT__gt; __abENT__quot;__abENT__quot;,<br />
			__abENT__quot;title__abENT__quot; =__abENT__gt; __abENT__quot;Image__abENT__quot;,<br />
			__abENT__quot;description__abENT__quot; =__abENT__gt; __abENT__quot;Using the __abENT__#92;__abENT__quot;__abENT__lt;em__abENT__gt;Add an Image__abENT__lt;__abENT__#8260;em__abENT__gt;__abENT__#92;__abENT__quot; button, upload an image and paste the URL here__abENT__#46; Images will be resized__abENT__#46; This is the post main image and will automatically be sized__abENT__#46;__abENT__quot;)<br />
	);<br />
<br />
function meta_boxes() {<br />
	global $post, $meta_boxes;<br />
	<br />
	echo__abENT__apos;<br />
		__abENT__lt;table class=__abENT__quot;widefat__abENT__quot; cellspacing=__abENT__quot;0__abENT__quot; id=__abENT__quot;inactive-plugins-table__abENT__quot;__abENT__gt;<br />
		<br />
			__abENT__lt;tbody class=__abENT__quot;plugins__abENT__quot;__abENT__gt;__abENT__apos;;<br />
	<br />
			foreach($meta_boxes as $meta_box) {<br />
				$meta_box_value = get_post_meta($post-__abENT__gt;ID, $pre__abENT__#46;__abENT__apos;_value__abENT__apos;, true);<br />
				<br />
				if($meta_box_value == __abENT__quot;__abENT__quot;)<br />
					$meta_box_value = $meta_box[__abENT__apos;std__abENT__apos;];<br />
				<br />
				echo__abENT__apos;__abENT__lt;tr__abENT__gt;<br />
						__abENT__lt;td width=__abENT__quot;70__abENT__quot; align=__abENT__quot;center__abENT__quot;__abENT__gt;__abENT__apos;;		<br />
							echo__abENT__apos;__abENT__lt;input type=__abENT__quot;hidden__abENT__quot; name=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__quot; id=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__quot; value=__abENT__quot;__abENT__apos;__abENT__#46;wp_create_nonce( plugin_basename(__FILE__) )__abENT__#46;__abENT__apos;__abENT__quot; __abENT__#8260;__abENT__gt;__abENT__apos;;<br />
							echo__abENT__apos;__abENT__lt;h2__abENT__gt;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;title__abENT__apos;]__abENT__#46;__abENT__apos;__abENT__lt;__abENT__#8260;h2__abENT__gt;__abENT__apos;;<br />
				echo__abENT__apos;	__abENT__lt;__abENT__#8260;td__abENT__gt;<br />
						__abENT__lt;td__abENT__gt;__abENT__apos;;<br />
							echo__abENT__apos;__abENT__lt;input type=__abENT__quot;text__abENT__quot; name=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__quot; value=__abENT__quot;__abENT__apos;__abENT__#46;get_post_meta($post-__abENT__gt;ID, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, true)__abENT__#46;__abENT__apos;__abENT__quot; size=__abENT__quot;70%__abENT__quot; __abENT__#8260;__abENT__gt;__abENT__lt;br __abENT__#8260;__abENT__gt;__abENT__apos;;<br />
							echo__abENT__apos;__abENT__lt;p__abENT__gt;__abENT__lt;label for=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__quot;__abENT__gt;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;description__abENT__apos;]__abENT__#46;__abENT__apos; __abENT__lt;__abENT__#8260;label__abENT__gt;__abENT__lt;__abENT__#8260;p__abENT__gt;__abENT__apos;;<br />
				echo__abENT__apos;	__abENT__lt;__abENT__#8260;td__abENT__gt;<br />
					__abENT__lt;__abENT__#8260;tr__abENT__gt;__abENT__apos;;<br />
			}<br />
	<br />
	echo__abENT__apos;<br />
			__abENT__lt;__abENT__#8260;tbody__abENT__gt;<br />
		__abENT__lt;__abENT__#8260;table__abENT__gt;__abENT__apos;;		<br />
}<br />
<br />
function create_meta_box() {<br />
	global $theme_name;<br />
	if ( function_exists(__abENT__apos;add_meta_box__abENT__apos;) ) {<br />
		add_meta_box( __abENT__apos;new-meta-boxes__abENT__apos;, __abENT__apos;Photo for post__abENT__apos;, __abENT__apos;meta_boxes__abENT__apos;, __abENT__apos;post__abENT__apos;, __abENT__apos;normal__abENT__apos;, __abENT__apos;high__abENT__apos; );<br />
	}<br />
}<br />
<br />
function save_postdata( $post_id ) {<br />
	global $post, $meta_boxes;<br />
	<br />
	foreach($meta_boxes as $meta_box) {<br />
		__abENT__#8260;__abENT__#8260; Verify<br />
		if ( !wp_verify_nonce( $_POST[$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__apos;], plugin_basename(__FILE__) )) {<br />
			return $post_id;<br />
		}<br />
	<br />
		if ( __abENT__apos;page__abENT__apos; == $_POST[__abENT__apos;post_type__abENT__apos;] ) {<br />
			if ( !current_user_can( __abENT__apos;edit_page__abENT__apos;, $post_id ))<br />
				return $post_id;<br />
		} else {<br />
			if ( !current_user_can( __abENT__apos;edit_post__abENT__apos;, $post_id ))<br />
				return $post_id;<br />
		}<br />
	<br />
		$data = $_POST[$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;];<br />
		<br />
		if(get_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;) == __abENT__quot;__abENT__quot;)<br />
			add_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, $data, true);<br />
		elseif($data != get_post_meta($post_id, $pre__abENT__#46;__abENT__apos;_value__abENT__apos;, true))<br />
			update_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, $data);<br />
		elseif($data == __abENT__quot;__abENT__quot;)<br />
			delete_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, get_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, true));<br />
	}<br />
}<br />
<br />
<br />
add_action(__abENT__apos;admin_menu__abENT__apos;, __abENT__apos;create_meta_box__abENT__apos;);<br />
add_action(__abENT__apos;save_post__abENT__apos;, __abENT__apos;save_postdata__abENT__apos;);</code>

You are done.
If you have made it this far, it’s now time to see your slider in action. Go write a new post in WordPress, paste the URL to your image in to the new image panel, and view your site.

Cheers.

Thanks to CSS Tricks for the jquery trick, TimThumb for thumbnail generation and WordPress for the great publishing system.

This entry was posted in Themes and tagged , . Bookmark the permalink.

Posted by , at Graph Paper Press

Thad is a photographer, designer and developer who embraces the evolution of storytelling on the web. He lives in Brooklyn, NY with his wife Abby.

  • Google
  • Blog
  • Instagram

  • http://www.internetmemorymattress.co.uk Linda

    Thank you, looks interesting

  • http://www.internetmemorymattress.co.uk Linda

    Thank you, looks interesting

  • aurelein

    Sorry: another question is:
    Is jquery part of wordpress 2.7 or do I need to load the library ? And if so, how to do it?

    Thanks again.

    Aurelien

    • http://graphpaperpress.com Thad

      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:

      <code>__abENT__lt;code__abENT__gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;script type=__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;text__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;javascript__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot; src=__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;http:__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;ajax__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#46;googleapis__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#46;com__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;ajax__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;libs__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;jquery__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;1__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#46;3__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#46;2__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;jquery__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#46;min__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#46;js__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;script__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__lt;__abENT__#8260;code__abENT__gt;</code>

      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.

  • aurelein

    Sorry: another question is:
    Is jquery part of wordpress 2.7 or do I need to load the library ? And if so, how to do it?

    Thanks again.

    Aurelien

    • http://graphpaperpress.com Thad

      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:

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

      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.

  • aurelien

    oups: too fast bloggin.
    I added the code at the end of functions.php after the “?>”… Now it works fine.

    I have all the posts in the slider.
    Is it possible to change the settings so that only 3 main pages appear on the slider?

    • http://graphpaperpress.com Thad

      Pages are not possible because you can’t attach photos to pages.

      • Agus MU

        You’re wrong. We can attach photos to pages with the same way…

    • http://huriata.com Huroman

      Yes, it’s possible. You need to create a new page php file and insert in the top:

      Just insert the “slider.php” in each page you want to show the slider.

      Then, in you admin page panel select the Template option you want.

  • aurelien

    oups: too fast bloggin.
    I added the code at the end of functions.php after the “?>”… Now it works fine.

    I have all the posts in the slider.
    Is it possible to change the settings so that only 3 main pages appear on the slider?

    • http://graphpaperpress.com Thad

      Pages are not possible because you can’t attach photos to pages.

      • Agus MU

        You’re wrong. We can attach photos to pages with the same way…

    • http://huriata.com Huroman

      Yes, it’s possible. You need to create a new page php file and insert in the top:

      Just insert the “slider.php” in each page you want to show the slider.

      Then, in you admin page panel select the Template option you want.

  • Lee

    Hey,

    Is there a way for this to automatically scroll thru the differnt content boxes on a loop?

    Thanks

    • http://graphpaperpress.com Thad

      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.

    • Lee

      Automatically, so it will just scroll thru the boxes by its self until stopped?

  • Lee

    Hey,

    Is there a way for this to automatically scroll thru the differnt content boxes on a loop?

    Thanks

    • http://graphpaperpress.com Thad

      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.

    • Lee

      Automatically, so it will just scroll thru the boxes by its self until stopped?

  • Bo Lane

    Not working. I’ve followed all of your steps, etc. I don’t have a current version of WordPress, is that a problem?

  • Bo Lane

    Not working. I’ve followed all of your steps, etc. I don’t have a current version of WordPress, is that a problem?

  • http://www.iversoncreative.com Patrick

    Greetings! I’m very excited about this and I’m trying to install this puppy locally to test it out and tweak it before rolling it out on my own site, but can’t seem to get it working.

    I’ve completed all of the steps, but the posts are coming out underneath one another – not side by side – and therefor there’s no sliding love going on. Any ideas? Thanks!

    -Patrick

    • Patrick Iverson

      I tried to find the support forums but am unable to access them…

      • Patrick Iverson

        Well, got it figured out. Thanks…

        • fedexx

          how did you fix that problem patrick ? i think i have the same issue

        • Jeanette

          I have the same problem too. When it first loads, it looks fine but once I click on the left/right arrows to scroll, they will be on top of each other and totally mess up.

        • Erin

          How did you fix it?

  • http://www.iversoncreative.com Patrick

    Greetings! I’m very excited about this and I’m trying to install this puppy locally to test it out and tweak it before rolling it out on my own site, but can’t seem to get it working.

    I’ve completed all of the steps, but the posts are coming out underneath one another – not side by side – and therefor there’s no sliding love going on. Any ideas? Thanks!

    -Patrick

    • Patrick Iverson

      I tried to find the support forums but am unable to access them…

      • Patrick Iverson

        Well, got it figured out. Thanks…

        • fedexx

          how did you fix that problem patrick ? i think i have the same issue

        • Jeanette

          I have the same problem too. When it first loads, it looks fine but once I click on the left/right arrows to scroll, they will be on top of each other and totally mess up.

        • Erin

          How did you fix it?

  • PT

    Thanks for this great tutorial which i successfully managed to implement into my wordpress blog(2.7.1). Evrythings working fine.

    Is there a way around for wpquery to pickup random posts and extract the default images rather than adding image url to each post you want featured.

    Next one would be autoscrolling feature,like Lee asked. There’s lot of tutorials around but most of them are incomplete.

  • PT

    Thanks for this great tutorial which i successfully managed to implement into my wordpress blog(2.7.1). Evrythings working fine.

    Is there a way around for wpquery to pickup random posts and extract the default images rather than adding image url to each post you want featured.

    Next one would be autoscrolling feature,like Lee asked. There’s lot of tutorials around but most of them are incomplete.

  • fedexx

    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

  • fedexx

    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

  • http://contentwritten.com/ Artcile Content

    its look nice and pretty good start for me…

  • http://contentwritten.com/ Artcile Content

    its look nice and pretty good start for me…

  • http://amazooo.com V.C

    Could you please tell me how to display this featured content slider on page?
    And how can i resize it?

  • http://amazooo.com V.C

    Could you please tell me how to display this featured content slider on page?
    And how can i resize it?

  • derek lam

    how do you modify this so it only shows posts under a “featured” catagory?

    how do you mod this so it initially highlights the latest post, instead of the 3rd post.

    thanks

  • derek lam

    how do you modify this so it only shows posts under a “featured” catagory?

    how do you mod this so it initially highlights the latest post, instead of the 3rd post.

    thanks

  • CourTney Collins

    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

    ignore everything else, the site is a mess :o)

  • CourTney Collins

    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

    ignore everything else, the site is a mess :o)

  • http://www.watchyearoneonline.com/ Watch Year One

    My fellow on Facebook shared this link with me and I’m not dissapointed at all that I came here.
    p.s. Year One is already on the Internet and you can watch it for free.

  • http://www.watchyearoneonline.com/ Watch Year One

    My fellow on Facebook shared this link with me and I’m not dissapointed at all that I came here.
    p.s. Year One is already on the Internet and you can watch it for free.

  • http://www.byroofs.com agnieszka

    hi
    this is so great – just wondering – can I use specific pages instead of the posts?

  • http://www.byroofs.com agnieszka

    hi
    this is so great – just wondering – can I use specific pages instead of the posts?

  • http://www.byroofs.com agnieszka

    this is really great – just wondering – is it possible to swap random post with specific pages???

  • http://www.byroofs.com agnieszka

    this is really great – just wondering – is it possible to swap random post with specific pages???

  • http://punkko.blogspot.com fraN

    Magnificent!!

  • http://punkko.blogspot.com fraN

    Magnificent!!

  • Pingback: 20 wordpress tutorials that dont SUCK! | Webdevtuts | Web Development | Web Design | Graphic Designs

  • http://foreignexchangequote.com free wordpress themes

    Thanks, i want to try using this

  • http://foreignexchangequote.com free wordpress themes

    Thanks, i want to try using this

  • http://huriata.com Huroman

    Any option to set multi slider in a single page?

    (Works like charm!)

  • http://huriata.com Huroman

    Any option to set multi slider in a single page?

    (Works like charm!)

  • Pingback: 30 Tutorials Combining Both Wordpress and jQuery : Speckyboy Design Magazine

  • Pingback: 30 Tutorials Combining Both Wordpress and jQuery | huibit05.com

  • http://www.thejazzindie.com Michael

    hi Thad,

    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 !

  • http://www.thejazzindie.com Michael

    hi Thad,

    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 !

  • http://www.memorymattress2go.co.uk Buzz

    I like this. Could be a useful tool

  • http://www.memorymattress2go.co.uk Buzz

    I like this. Could be a useful tool

  • Pingback: 30 Tutorials Combining Both Wordpress and jQuery | .::tek3D Weblog::.

  • http://huriata.com Huroman

    Hello, there… all seems great, but when the slider it shows in IE everything go wild.

    Any advice for fixed it up?

    Thank you in advance.

    The link:
    huriata.com/showroom

    H.

  • http://huriata.com Huroman

    Hello, there… all seems great, but when the slider it shows in IE everything go wild.

    Any advice for fixed it up?

    Thank you in advance.

    The link:
    huriata.com/showroom

    H.

  • http://huriata.com Huroman

    Any idea to fix it in IE:

    huriata.com/showroom

    Thank you in advance,

    H.

  • http://huriata.com Huroman

    Any idea to fix it in IE:

    huriata.com/showroom

    Thank you in advance,

    H.

  • http://www.mikaelhornqvist.se Mikael

    Hi,
    how can i change picture and post width within the slider?

    Trying to get the width for the slider and posts to 700px, so it shows only one post at the time, but i can’t get the “navigation” to move as much as the post-width are..

    very grateful for any kind of help!

    best regards
    Mikael

  • http://www.mikaelhornqvist.se Mikael

    Hi,
    how can i change picture and post width within the slider?

    Trying to get the width for the slider and posts to 700px, so it shows only one post at the time, but i can’t get the “navigation” to move as much as the post-width are..

    very grateful for any kind of help!

    best regards
    Mikael

  • Pingback: 30 Tutorials Combining Both jQuery and Wordpress

  • Pingback: 30 Tutorials for Using JQuery in Wordpress | oOrch Blog

  • chas

    Having the same issue as Patrick above but without a fix. The photos just go on top of each other filling out the page.

    • chas

      the order of the scripts are very important. the above instructions are very good and i had it working. the issue i run into was with another plugin not playing nice with jquery. thanks for the info.

  • chas

    Having the same issue as Patrick above but without a fix. The photos just go on top of each other filling out the page.

    • chas

      the order of the scripts are very important. the above instructions are very good and i had it working. the issue i run into was with another plugin not playing nice with jquery. thanks for the info.

  • Gabrielle

    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.

  • Gabrielle

    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.

  • http://www.pyramedadesign.com Mark

    Wow, I have been looking for something like this all over the place with no luck. Thank you so much, you have made my life a lot easier!

  • http://www.pyramedadesign.com Mark

    Wow, I have been looking for something like this all over the place with no luck. Thank you so much, you have made my life a lot easier!

  • Pingback: 10 wordpress tutorials that dont SUCK! | Webdevtuts

  • http://fusildechispas.com cristian

    I´m getting an error mesage from functions.php
    Fatal error: Call to undefined function add_action()

  • http://fusildechispas.com cristian

    I´m getting an error mesage from functions.php
    Fatal error: Call to undefined function add_action()

  • Pingback: FAQPAL Blog

  • Pingback: Add featured sliding content to Wordpress | bijusubhash.com

  • http://www.samrohn.com Sam Rohn

    looks like just what i’ve been looking for, but the demo & download slider.zip links are broken ?

  • http://www.samrohn.com Sam Rohn

    looks like just what i’ve been looking for, but the demo & download slider.zip links are broken ?

  • ken

    I have uploaded to WordPress 2.9.2 and it works perfectly. However, is there anyway to stop the script from enlarging the photos? I have tried to change the H and W sizes, but this has no effect.

  • ken

    I have uploaded to WordPress 2.9.2 and it works perfectly. However, is there anyway to stop the script from enlarging the photos? I have tried to change the H and W sizes, but this has no effect.

  • PeppezZ

    really usefull!

  • PeppezZ

    really usefull!

  • PeppezZ

    I’m wondering about 2 things:
    1 – if it’s possible to use the post thumbnail option of wp 2.9+ instead of a custom write panel for image thumbails
    2 – if it’s possible to automatically scroll the boxes?

  • PeppezZ

    I’m wondering about 2 things:
    1 – if it’s possible to use the post thumbnail option of wp 2.9+ instead of a custom write panel for image thumbails
    2 – if it’s possible to automatically scroll the boxes?

  • Pingback: 30 Tutorials Combining Both Wordpress and jQuery | Coyot [at] CanalCoffee.com : WordPress

  • Pingback: Interstate Bound Magazine » test 2

  • http://www.ptec.co PTEC

    Thank you for your useful post
    a lot …

  • Pingback: faqpal.com

  • Pingback: 30 Tutorials Combining Both WordPress and jQuery | a place to share, bookmarks, resources, css, jquery, photoshop, design, inspiration

  • Pingback: 30 tutorial para utilizar jQuery en nuestro Wordpress | megustaelturismo

  • Enmanuel
  • Enmanuel

    Thats a WordPress Plug in to add Sliding Boxes all visual, WYSIWYG

  • Origin of Image (OoI)

    Is it possible to have the feature image on the home page or the slider, link to a relevant page? (So can it be clickable?)