WordPress.org

Ready to get started?Download WordPress

Forums

Theme with multiple Sliders on Home Page (1 post)

  1. thomas williamson
    Member
    Posted 2 years ago #

    Hello,

    I am quite new to this. I am trying to create a custom theme purely to learn and improve my knowledge. I am modifying a free theme I found online locally on my PC and I am struggling to get multiple sliders on the home page (was looking to do three in total). can any one help?

    In my style.css I have:

    #slider {
    	position:relative;
    	background:url(images/loading.gif) no-repeat 50% 40%;
    	height:370px;
    }
    #slider img {
    	position:absolute;
    	top:0px;
    	left:0px;
    	display:none;
    	z-index:1;
    }

    I assume I need to add another two for sliders 2 and 3?

    In my functions.php I have:

    /*******************************
       SLIDESHOW CUSTOM POST TYPES
    ********************************/
    register_post_type( 'slideshow',
        array(
          'labels' => array(
            'name' => __( 'Slider Items' ), //this name will be used when will will call the investments in our theme
            'singular_name' => __( 'Slider Item' ),
    		'add_new' => _x('Add New', 'slideshow'),
    		'add_new_item' => __('Add New Slider Item'), //custom name to show up instead of Add New Post. Same for the following
    		'edit_item' => __('Edit Slider Item'),
    		'new_item' => __('New Slider Item'),
    		'view_item' => __('View Slider Item'),
          ),
          'public' => true,
    	  'show_ui' => true,
    	  'exclude_from_search' => true,
    	  'hierarchical' => false, //it means we cannot have parent and sub pages
    	  'capability_type' => 'post', //will act like a normal post
    	  'rewrite' => false, //this is used for rewriting the permalinks
    	  'query_var' => false,
    	  'supports' => array( 'title',	'thumbnail'), //the editing regions that will support
    
        )
      );
    
     /*******************************
       SLIDESHOW CUSTOM META
    ********************************/
    
    add_action('admin_init','slideshow_meta_init');
    
    function slideshow_meta_init()
    {
    
    	// add a meta box for each of the wordpress page types: posts and pages
    	add_meta_box('slideshow_all_meta', 'Silder Item Settings', 'slideshow_meta_setup', 'slideshow', 'normal', 'high');
    
    	// add a callback function to save any data a user enters in
    	add_action('save_post','slideshow_meta_save');
    }
    
    function slideshow_meta_setup()
    {
    	global $post;
    
    	// using an underscore, prevents the meta variable
    	// from showing up in the custom fields section
    	$meta = get_post_meta($post->ID,'_slideshow_meta',TRUE);
    
    	echo '<div class="my_meta_control">
    
    	<p style="margin:6px 0 8px;">Set the caption text and the link of the slider item. The image should be set as <strong>Featured Image</strong> of the item. For proper display use images  940px X 370px.</p>
    	<br/>
    
    	<label>Slider Item Caption Text</label>
    
    	<p style="margin:6px 0 8px;">
    		<textarea name="_slideshow_meta[caption]" rows="3" cols="40">';?><?php if(!empty($meta['caption'])) echo $meta['caption']; ?><?php echo '</textarea>
    	</p>
    
    	<label>Linking to (optional) <small>enter URL</small></label>
    
    	<p style="margin:6px 0 8px;">
    		<textarea name="_slideshow_meta[linkto]" rows="2" cols="40">';?><?php if(!empty($meta['linkto'])) echo $meta['linkto']; ?><?php echo '</textarea>
    	</p>
    
    </div>';
    
    	// create a custom nonce for submit verification later
    	echo '<input type="hidden" name="slideshow_meta_noncename" value="' . wp_create_nonce(__FILE__) . '" />';
    }
    
    function slideshow_meta_save($post_id)
    {
    	// authentication checks
    
    	// make sure data came from our meta box
    	if (!wp_verify_nonce($_POST['slideshow_meta_noncename'],__FILE__)) return $post_id;
    
    	// check user permissions
    	if ($_POST['post_type'] == 'slideshow')
    	{
    		if (!current_user_can('edit_page', $post_id)) return $post_id;
    	}
    	else
    	{
    		if (!current_user_can('edit_post', $post_id)) return $post_id;
    	}
    
    	// authentication passed, save data
    
    	// var types
    	// single: _my_meta[var]
    	// array: _my_meta[var][]
    	// grouped array: _my_meta[var_group][0][var_1], _my_meta[var_group][0][var_2]
    
    	$current_data = get_post_meta($post_id, '_slideshow_meta', TRUE);	
    
    	$new_data = $_POST['_slideshow_meta'];
    
    	slideshow_meta_clean($new_data);
    
    	if ($current_data)
    	{
    		if (is_null($new_data)) delete_post_meta($post_id,'_slideshow_meta');
    		else update_post_meta($post_id,'_slideshow_meta',$new_data);
    	}
    	elseif (!is_null($new_data))
    	{
    		add_post_meta($post_id,'_slideshow_meta',$new_data,TRUE);
    	}
    
    	return $post_id;
    }
    
    function slideshow_meta_clean(&$arr)
    {
    	if (is_array($arr))
    	{
    		foreach ($arr as $i => $v)
    		{
    			if (is_array($arr[$i]))
    			{
    				slideshow_meta_clean($arr[$i]);
    
    				if (!count($arr[$i]))
    				{
    					unset($arr[$i]);
    				}
    			}
    			else
    			{
    				if (trim($arr[$i]) == '')
    				{
    					unset($arr[$i]);
    				}
    			}
    		}
    
    		if (!count($arr))
    		{
    			$arr = NULL;
    		}
    	}
    }
    
     function edit_slideshow_columns($slideshow_columns) {
    	$columns = array(
    		"cb" => "<input type=\"checkbox\" />",
    		"title" => _x('Slider Item Title', 'column name' ),
    		"caption" => __('Caption Text' ),
    		"link" => __('Link'),
    		"thumbnail" => __('Thumbnail')
    	);
    
    	return $columns;
    }
    add_filter('manage_edit-slideshow_columns', 'edit_slideshow_columns');
    
    function manage_slideshow_columns($column) {
    	global $post;
    	$slideshow_meta = get_post_meta($post->ID,'_slideshow_meta',TRUE);
    	if ($post->post_type == "slideshow") {
    		switch($column){
    			case 'thumbnail':
    				echo the_post_thumbnail('thumbnail');
    				break;
    			case 'caption':
    				echo $slideshow_meta['caption'];
    				break;
    			case 'link':
    				echo '<a href="'.$slideshow_meta['linkto'].'">'.$slideshow_meta['linkto'].'</a>';
    				break;
    		}
    	}
    }
    add_action('manage_posts_custom_column', 'manage_slideshow_columns', 10, 2);

    I have tried to add a second menu option for slider 2 and 3, but they just rename the menu created above.

    And finally, on my home.php I have

    <!-- BEGIN SLIDER -->
    <?php if(get_option('journal_slider')=='yes'){
    	$slideshowloop = new WP_Query( array( 'post_type' => 'slideshow', 'order' => 'ASC' ) ); ?>
    	<div id="slider">
    	<?php
    			if($slideshowloop -> have_posts()){
    			while ( $slideshowloop->have_posts() ) : $slideshowloop->the_post();
    			$slideshow_meta = get_post_meta($post->ID,'_slideshow_meta',TRUE);
    			?>
    			<a href="<?php echo $slideshow_meta['linkto'];?>">
    			<?php //the_post_thumbnail('slider-thumbnail',array("title" => ''.$slideshow_meta['caption'].''));?>
    			<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_image_path($post->ID); ?>&h=370&w=940&zc=1" alt="<?php the_title(); ?>" title="<?php echo $slideshow_meta['caption'];?>">
    			</a>
    			<?php
    			endwhile;
    			}else{?>
    				<div style="border:1px solid #ddd; background:#000; opacity:0.5;text-align:center; padding:150px 100px 0; height:219px; font-size:14px; ">				<span style="opacity:1;color:#fff;text-shadow:none;">This is the slider. In order to have items here you need to create them in Admin > Slider Items section, on the left side menu. For proper display use images 940px x 370px.</span>
    				</div>
    			<?php }?>
    
    	  </div>
    	  <div style="width:940px; margin:0 auto 30px; background:url(<?php bloginfo('template_directory'); ?>/images/bk_shadow_slider.png) 0 -35px no-repeat; height:15px;"></div>
    	   <!-- END SLIDER -->
    
    	    <!-- SLIDER SETTINGS -->
    	   <script type="text/javascript">
    			$(window).load(function() {
    				$('#slider').nivoSlider({
    					effect:'<?php if(get_option('journal_slider_effect')==''): echo 'random';
    						  else: echo get_option('journal_slider_effect');
    						  endif;?>',
    					slices:<?php if(get_option('journal_slider_slices')==''): echo '15';
    						  else: echo get_option('journal_slider_slices');
    						  endif;?>,
    					animSpeed:<?php if(get_option('journal_slider_animation_speed')==''): echo '500';
    						  else: echo get_option('journal_slider_animation_speed');
    						  endif;?>,
    					pauseTime:<?php if(get_option('journal_slider_pause_time')==''): echo '3000';
    						  else: echo get_option('journal_slider_pause_time');
    						  endif;?>,
    					startSlide:0, //Set starting Slide (0 index)
    					directionNav:true, //Next & Prev
    					directionNavHide:true, //Only show on hover
    					controlNav:true, //1,2,3...
    					controlNavThumbs:false, //Use thumbnails for Control Nav
    					controlNavThumbsFromRel:false, //Use image rel for thumbs
    					controlNavThumbsSearch: '.jpg', //Replace this with...
    					controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
    					keyboardNav:true, //Use left & right arrows
    					pauseOnHover:true, //Stop animation while hovering
    					manualAdvance:false, //Force manual transitions
    					captionOpacity:<?php if(get_option('journal_slider_caption_opacity')==''): echo '0.8';
    						  else: echo get_option('journal_slider_caption_opacity');
    						  endif;?>, //Universal caption opacity
    					beforeChange: function(){},
    					afterChange: function(){},
    					slideshowEnd: function(){} //Triggers after all slides have been shown
    				});
    			});
    			</script>
    	<?php }else{?>
    <?php }else{?>

    Yet again presumably I will need to do a couple more of these?

    Any help would be most grateful

    Cheers

Topic Closed

This topic has been closed to new replies.

About this Topic

  • RSS feed for this topic
  • Started 2 years ago by thomas williamson
  • This topic is not resolved
  • WordPress version: 3.2.1