Slider For Arthemia Theme By ColorLabs &Company

By default Arthemia just have one slider at featured section, this article will explain to you how to add another slider at headline section with help from plugin named wp-featured slider content.

To use that plugin, you will have to edit your header.php first. Find out this code at your header.php:

<?php include(TEMPLATEPATH . '/includes/headline.php'); ?>

Edit that code become:

<?//php include(TEMPLATEPATH . '/includes/headline.php'); ?>

By doing this the original code is not deleted but hidden in case you want to switch to your original theme looks.

After doing that you can start using the slider, but there are lot of settings which is not too important to use and also you have to find the exact number for width and height for the slider. Because of that you will need to edit/modify the plugin by hiding several feature that will not be used.

Before

Before uploading the plugin, extract it and edit file named content-slider.php, then find out this code:

1. #featured_slider {
   float: left;
   margin: 10px 0px;
   position: relative;
   background-color: <?php $c_slider_bg = get_option('feat_bg'); if(!empty($c_slider_bg)) {echo $c_slider_bg;} else {echo "FFF";}?>;
   border: 1px solid <?php $c_slider_border = get_option('feat_border'); if(!empty($c_slider_border)) {echo $c_slider_border;} else {echo "CCC";}?>;
   width: <?php $c_slider_width = get_option('feat_width'); if(!empty($c_slider_width)) {echo $c_slider_width;} else {echo "860";}>px;
   }

   Edit that code become:

   #featured_slider {
   float: left;
   margin: 10px 0px;
   position: relative;
   /*background-color: <?php $c_slider_bg = get_option('feat_bg'); if(!empty($c_slider_bg)) {echo $c_slider_bg;} else {echo "FFF";}?>;
   border: 1px solid #<?php $c_slider_border = get_option('feat_border'); if(!empty($c_slider_border)) {echo $c_slider_border;} else {echo "CCC";}?>;
   width: <?php $c_slider_width = get_option('feat_width'); if(!empty($c_slider_width)) {echo $c_slider_width;} else {echo "860";}?>px;*/
   }

2. #featured_slider ul, #featured_slider ul li {
   list-style: none !important;
   border: none !important;
   float: left;
   margin: 10px;
   width: <?php $c_slider_width = get_option('feat_width'); if(!empty($c_slider_width)) {echo $c_slider_width;} else {echo "860";}?>px;
   height: <?php $c_slider_height = get_option('feat_height'); if(!empty($c_slider_height)) {echo $c_slider_height;} else {echo "210";}?>px;
   }

   Edit that code become:

   #featured_slider ul, #featured_slider ul li {
   list-style: none !important;
   border: none !important;
   float: left;
   margin: 0px;
   width: 540px;
   height: auto;
   }

3. #featured_slider .img_right {
   float: left;
   width: <?php $c_slider_img_width = get_option('img_width'); if(!empty($c_slider_img_width)) {echo $c_slider_img_width;} else {echo "320";}?>px;
   height: <?php $c_slider_img_height = get_option('img_height'); if(!empty($c_slider_img_height)) {echo $c_slider_img_height;} else {echo "200";}?>px;
   margin-left: 20px;
   }

   Edit that code become:

   #featured_slider .img_right {
   float: left;
   margin-left: 0px;
   }

4. #featured_slider .img_right img {
   width: <?php $c_slider_img_width = get_option('img_width'); if(!empty($c_slider_img_width)) {echo $c_slider_img_width;} else {echo "320";}?>px;
   height: <?php $c_slider_img_height = get_option('img_height'); if(!empty($c_slider_img_height)) {echo $c_slider_img_height;} else {echo "200";}?>px;
   }

   Edit that code become:

   #featured_slider .img_right img {}

5. #featured_slider .content_left {
   float: left;
   color: #<?php $c_slider_text_color = get_option('text_color'); if(!empty($c_slider_text_color)) {echo $c_slider_text_color;} else {echo "333";}?>;
   width: <?php $c_slider_text_width = get_option('text_width'); if(!empty($c_slider_text_width)) {echo $c_slider_text_width;} else {echo "450";}?>px;
   }

   Edit that code become:

   #featured_slider .content_left {
   color: #ffffff;
   width: 540px;
   height: auto;
   }

6. #featured_slider .content_left p {
   line-height: 22px !important;
   color: #<?php $c_slider_text_color = get_option('text_color'); if(!empty($c_slider_text_color)) {echo $c_slider_text_color;} else {echo "333";}?>;
   }
   

   Edit that code become:

   #featured_slider .content_left p {
   line-height: 22px !important;
   color: #ffffff;
   }
   

7. .<?php echo $c_slider_class;?> {
   font-size: 10px;
   float: right;
   clear: both;
   position: relative;
   top: -10px;
   background-color: #<?php $c_slider_border = get_option('feat_border'); if(!empty($c_slider_border)) {echo $c_slider_border;} else {echo "CCC";}?>;
   padding: 3px 3px;
   line-height: 10px !important;
   }

   Edit that code become:

   .<?php echo $c_slider_class;?> {
   font-size: 10px;
   float: right;
   clear: both;
   position: relative;
   top: -10px;
   /*background-color: #<?php $c_slider_border = get_option('feat_border'); if(!empty($c_slider_border)) {echo $c_slider_border;} else {echo "CCC";}?>;*/
   padding: 3px 3px;
   line-height: 10px !important;
   }

8. <li><div><h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><?php echo c_slider_cut_text(get_the_content(), $c_slider_limit, $c_slider_points);?></div><div><a href="<?php the_permalink();?>"><img src="<?php echo $c_slider_thumb;?>" /></a></div></li>

   Made that code become:

   <li>
   <div>
   <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>
   <?php
   $style = get_option ( "colabs_styleHead" );
   if ( $style != "wide" ) { $width = 200; $height = 225; $size = 'headline-thumb-home'; }
   else { $width = 550; $height = 230; $size = 'headline-thumb-wide'; }
   colabs_pp('width='.$width.'&amp;height='.$height.'&amp;size='.$size.'&amp;play=true&amp;wrapper_class=left&amp;link=img');
   ?>
   <?php echo c_slider_cut_text(get_the_content(), $c_slider_limit, $c_slider_points);?>
   <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><br />
   <?php _e('Read the full story &amp;raquo;','colabsthemes');?>
   </a>
   </div>
   </li>
   

9. <div></div>
   <div></div>
   

   Edit that code become:

   <!--
   <div></div>
   <div></div>
   -->

After

After did this several things then pack the plugin folder to zip file and install the plugin to your WordPress.

To use this plugin (add post/page to slider), when creating a post/page look up for featured content slider option. Check the option to add your post/page to slider.