ThemeShaper Forums » Thematic

[closed]

Adding Feature Slider similar to Hybrid News

(14 posts)
  • Started 4 years ago by tzShaper
  • Latest reply from marcusjking
  • This topic is not a support question

Tags:

  1. tzShaper
    Member

    Hi All, looking for some suggestions on adding a Feature Posts Slider, similar to Hybrid News use of a jQuery plugin. If this were a static html page, I'ld be right at home plugging in a jQuery slider of choice. New to wordpress I'm not sure what the best solution is?
    Maybe ideally it would only show the excerpt and an image for each featured story.
    What resource am I looking for a plugin, tutorial, something else?
    I plan to use Thematic and redesign around the Commune theme since it's the only realy magazine style theme.

    Oh Hi to all, I think this is my first post, you can follow me on twitter @Crssp.
    I was one the first to read Ian's post that he's going to new job digs, congratulations again Ian. And also been trying to contact my long lost cousin Chris Gossmann my name is Ty Gossman, er well maybe we are cousins, ya never know.

    Posted 4 years ago #
  2. tzShaper
    Member

    It looks like the theme is set up to identify posts tagged with Featured and ads those to the Feature area on the homepage, if I'm not mistaken:
    http://www.cozmoslabs.com/2009/06/26/thematic-featured-posts/

    Posted 4 years ago #
  3. tzShaper
    Member

    Good tutorial here maybe, any suggestions:
    http://new2wp.com/pro/part-3-making-a-dynamic-wordpress-jquery-featured-post-slider-tutorial-finale/
    This was an oops added to Cozmoslabs post meant to ad here.
    Still getting used to Chrome tabs and multitasking 2-browsers, lol

    Posted 4 years ago #
  4. tzShaper
    Member

    Ok Searching the ThemeShaper site I found Action Hooks and a mention of jQuery sliders:
    http://themeshaper.com/action-hooks-wordpress-child-themes/

    A great slider to use would be this one:
    http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

    The kicker will be pulling in the slider to use dynamically just a certain category like Showcase Sites.

    Anybody that can add to my roadmap here, suggestions etc.?

    Posted 4 years ago #
  5. I'm about to venture out and trace your footsteps. How are you getting on?

    I'll let you know how I get on...

    Posted 4 years ago #
  6. tzShaper
    Member

    I've not had a chance to experiment on adding a slider.
    Still trying to settle on a theme.

    Posted 4 years ago #
  7. orionmessier42
    Member

    Hi all. I'm in the middle of trying to get this to work with a new site.

    We have a development site here:

    I have installed the plugin "wp-featured-content-slider"

    My home page is a static page. I would like the slider to appear on the home page, just below the thematic navigation bar, and to slide through 3 or 4 posts in the category "featured technology."

    I wrote a function into my child theme "functions.php" file, and it looks something like this:

    <?php
    function my_featured_slider () {
    	if (is_page(3)) {//Checks to see if it's the "Welcome" Page
    		include (ABSPATH . '/wp-content/plugins/wp-featured-content-slider/content-slider.php');
    		} else {
    		return;
    	}
    }
    add_action('thematic_belowheader', 'my_featured_slider' );
    ?>

    Still, I lose the content on my welcome page just below the slider, and it's not "sliding" between the featured posts. Any thoughts? Has anyone done anything similar?

    Thanks!
    Mandy

    Posted 4 years ago #
  8. orionmessier42
    Member

    Found the fix for the "wp-featured-content-slider" plugin problem. It is in the actual js file that unpacks with the plugin.

    In the slider.js file:
    replaced the $(..)-function by jQuery(..) for both lines, 57 and 58.

    The fix is listed in the comments below the post here: http://www.iwebix.de/featured-content-slider-wordpress-plugin/

    Hope this helps

    Posted 4 years ago #
  9. dorabelle
    Member

    You'd probably be best off doing the tutorial and creating your own, but I use the "WP Featured Content Slider" by IWEBIX, Dennis Nissle, which does the trick pretty well.

    Posted 4 years ago #
  10. I wanted a content slider that would automatically pull the first image from a post for display, along with the excerpt. I love the WP Featured Content slider, but my users always complained about having to add images to a custom field (lazy), so, I set out to make my own slider that would do everything for them.

    My biggest issue was in pulling that first image out of posts for use on the slider, so i sorta copped out and used Justin Tadlock's "get_the_image" plugin. Worked swell.

    I used the coda slider as the actual slider.

    I used theme options to dictate what category and quantity of posts to display.

    Here's the code i used for the actual slider, its only the portion that is actually in the page template, it doesn't account for the css/javascript additons to make it work, but this, to me, was the hardest part, and should show one method of pulling post data and having it dynamically display using coda.

    <div class="coda-slider-wrapper">
    	<div class="coda-slider preload" id="coda-slider-1">
    		<?php
    
    			$pocount = get_option('shabadoo_theme_options');
                      $featurePosts = new WP_Query();
                      $featurePosts->query('category_name='.$pocount['slidecat'].'&showposts='.$pocount['postcount'].'');
                  ?>
    
            <?php while ($featurePosts->have_posts()) : $featurePosts->the_post(); ?>
            <div class="panel">
    			<div class="panel-wrapper">
    <!-- add the resized post image -->
                 <div class="feature_post_pic">
    <?php get_the_image( array( 'image_scan' => true,'default_size' => 'large', 'width' => '363', 'height' => '242'
     ) ); ?>
    </div>
    <!-- add the post title -->
    <div class="feat_pst_t"><a>"><?php the_title(); ?></a></div>
    <!-- add the post custom excerpt -->
    <div class="feat_pst_exc"><?php echo new_excerpt('42'); ?><a>">read more</a></div>
    			</div>
    		</div>
    		<?php endwhile; ?>
    
    	</div><!-- .coda-slider -->
    
    </div><!-- .coda-slider-wrapper -->
    Posted 4 years ago #
  11. dorabelle
    Member

    Thanks for the code fix suggestion. It would be nice to mess with the code and get a little more art going on in your content slider. I have just manipulated the code with a lot of plugins, and its easy to really get it customized. guess and check!

    Posted 4 years ago #
  12. I'm working on a site with a feature slider using the JQuery code in http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ All the elements seem to be working OK except that the script isn't being initialised. I'm not sure what I have done wrong so if anyone can give any ideas they would be gratefully received.

    The code in my functions.php is as follows

    //jQuery
    function my_init() {
    if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
    wp_enqueue_script('jquery');
    }
    }
    add_action('init', 'my_init');
    
    // Add slider script to head
    function xcmag_slider_script() {
    ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	$("#xcmag-featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    	$("#xcmag-featured").hover(
    		function() {
    			$("#xcmag-featured").tabs("rotate",0,true);
    		},
    		function() {
    			$("#xcmag-featured").tabs("rotate",5000,true);
    		}
    	);
    });
    </script>
    
    <?php
    }
    add_action('wp_head','xcmag_slider_script');
    
    //create feature slider for home page
    function xcmag_featured_slider() {
    
    	//Get posts details
    
    	 	$cat_post_ids = array();
    
    		// fetch latest three features
    		$cat = 5; //category id
            $posts=get_posts('showposts=3&cat='. $cat);
    		if ($posts) {
    			foreach($posts as $post) {
    				array_push($cat_post_ids, $post->ID);
    			}
    		}
    
           // fetch the latest issue banner
    		$cat = 10; //category id
            $posts=get_posts('showposts=1&cat='. $cat);
    		if ($posts) {
    			foreach($posts as $post) {
    				array_push($cat_post_ids, $post->ID);
    			}
    		}
    
    	// out put slider
    
    	echo '<div id="xcmag-featured" >', chr(10);
    	echo '	<ul class="ui-tabs-nav">', chr(10);
    	echo '		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1">' . get_the_post_thumbnail($cat_post_ids[0], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
    	echo '		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2"><a href="#fragment-2">' . get_the_post_thumbnail($cat_post_ids[1], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
    	echo '		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3"><a href="#fragment-3">' . get_the_post_thumbnail($cat_post_ids[2], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
    	echo '		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-4"><a href="#fragment-4">' . get_the_post_thumbnail($cat_post_ids[3], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
    	echo '	</ul>', chr(10);  
    
    	$i=0;
    	while($i<=3) {
    		echo '<div id="fragment-' . ($i+1) . '" class="ui-tabs-panel" style="">', chr(10);
    		echo get_the_post_thumbnail($cat_post_ids[$i], 'homepage-thumb-big'), chr(10);
    		$post = get_post($cat_post_ids[$i]);
    		echo '		<div class="info" >', chr(10);
    		echo '		<h2><a href="' . get_permalink( $cat_post_ids[$i] ) . '" >' . $post->post_title . '</a></h2>', chr(10);
    		// Dynamically resize excerpt according to title length
    		$rem_len = ""; //clear variable
    		$title_len = strlen($post->post_title); //get length of title
    		if($title_len <= 35){
    			$rem_len=188; //calc space remaining for excerpt
    		}elseif($title_len <= 70){
    			$rem_len=146;
    		}elseif($title_len <= 105){
    			$rem_len=104;
    		}elseif($title_len <= 140){
    			$rem_len=62;
    		}
    		$trunc_ex = substr($post->post_excerpt, 0, $rem_len); //truncate excerpt to fit remaining space
    		$trunc_ex = $trunc_ex . '<a href="' . get_permalink( $cat_post_ids[$i] ) . '" >[Read More]</a>';
    		echo "<p>" . $trunc_ex . "</p>", chr(10); //display excerpt
    		echo '		</div>', chr(10);
    		echo '	</div>', chr(10);
    		$i++;
    	}
    
    	echo '</div>', chr(10);
    
    }
    
    ?>

    The final function is called from the home.php file in my child theme. If I take the generated html and put it in a file with the scripting manually added it all works fine, just doesn't work when in the theme.

    Posted 3 years ago #
  13. middlesister
    Member

    I am not 100% familiar with javascript, but I do know that in order to get wordpress to recognize the jquery $ function you have to massage it a bit.

    Adding

    jQuery.noConflict();
    jQuery(document).ready(function($) { //tells WP to recognize the $ variable

    before the code you add to head might to the trick.

    Take a look at this thread
    http://forums.themeshaper.com/topic/jquery-in-thematic-demystified.

    Posted 3 years ago #
  14. Thank you middlesister that worked perfectly

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.