Arthemia Post Slider

Another good day!

Again, this time i will show you some extreme modification to make your Arthemia theme by ColorLabs & Company more powerful dan of course more pretty.

What we will do right now is to add some slider into front page of this theme. To make your imagination working, please watch this video:

16-Apr-13 11-55-18 AM from shinjing on Vimeo.

Ok, this modification should be simple if you ever learn a little bit about HTML (so you don’t have to be an expert 🙂 ). First, download this JQuery bundle from here, then here the list of files you have to prepare:

• index.php
  
• theme-js.php
• style.css

Ok, so it will be just 3 files affected for this modification, and before you do this modification make sure if you already have a backup files (since this modification affecting file index.php, any failure you made will make your site down).

Part 1

I decided to divide this tutorial into several chapter to make it easier to understand. Ok, this first part will explain you how to modify the index.php. Make sure if you edit this file via FTP (you can redo if you make a mistake), and if you never work with this stuff or never explore the Arthemia theme folder, you can go to directory: root → wp-content → themes → arthemia-premium

Once you get in that folder, you will find a file named index.php, open that file and you should found this code:

<?php get_header(); ?>
	
	 <?php
		//Get value from Admin Panel
		$cp_categories = get_categories('hide_empty=0');
        $status1 = get_option( "colabs_preventHeadline" );
        if ( $status1 != "No" ) {
            $ar_headline = get_option( "colabs_headline" );
            $ar_featured = get_option( "colabs_featured" );
        }
        ?>

	<div id="bottom" class="clearfloat">
		
	<div class="wrapper <?php if(get_option('colabs_layout_settings')=='two-col-right'){echo 'right';}else{?>left<?php }?>">

	<?php if(!is_paged()) { ?>	

	<div id="front-list">	
	
	<?php $latest_query = new WP_Query(array(
			'category__not_in' => array($ar_headline,$ar_featured),
			'showposts' => 1,
			)); ?>
	
	<?php while ($latest_query->have_posts()) : $latest_query->the_post(); ?>		
    <?php global $ar_ID; global $post; $ar_ID[] = $post->ID; ?>
     
	<div class="clearfloat">
	<h3 class="cat_title"><?php the_category(', '); ?> &raquo;</h3>
	<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <?php colabs_post_meta(); ?>
    <?php
		$latest_thumb=get_option('colabs_latest_post_thumb');
		if($latest_thumb!='No'){
		$width = get_option ( "colabs_thumbWidth_LatestPost" );
		$height = get_option ( "colabs_thumbHeight_LatestPost" );
		if ( $width == 0 ) { $width = 150; }
		if ( $height == 0 ) { $height = 150; }
        colabs_pp('width='.$width.'&height='.$height.'&size=medium-thumb&play=true&wrapper_class=left&link=img');
		}
	?>
		
	<?php the_content(__('Read the full story &raquo;','colabsthemes')); ?>
	</div>

		
      	<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>

	</div><!--/#front-list-->

	<?php } ?>

    <?php add_filter('post_limits', 'my_post_limit'); ?>
	
    <?php 
		global $myOffset;
		$myOffset = 1;
		$temp = $wp_query;
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
		$wp_query= null;
		$wp_query = new WP_Query();
		$wp_query->query(array(
                'paged' => $paged,
				'offset' => $myOffset,
				'category__not_in' => array($ar_headline,$ar_featured),
                'post__not_in' => get_option( 'sticky_posts' ),
                'ignore_sticky_posts' => 1,
				)); ?>

	<?php $column = get_option ( "colabs_status_Column" );
		if ( $column != "one" ) { ?>	

	<div id="paged-list">	
	
		<?php if (have_posts()) : ?>
		<?php $i = 1; ?>

		<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>	
        <?php global $ar_ID; global $post; $ar_ID[] = $post->ID; ?>
        
	<?php if( $odd = $i%2 ) { echo '<div class="clearfloat">'; } ?>
    
	<div class="tanbox <?php if( $odd = $i%2 ) { echo 'left'; } else { echo 'right'; } ?>">
        <h3 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <?php 
        colabs_post_meta();
        
        $width = get_option ( "colabs_thumbWidth_Column" );
		$height = get_option ( "colabs_thumbHeight_Column" );
		if ( $width == 0 ) { $width = 80; }
		if ( $height == 0 ) { $height = 80; }
        colabs_pp('width='.$width.'&height='.$height.'&size=small-thumb&play=true&wrapper_class=left&link=img');
    ?>

After you found that code, edit it become:

<?php get_header(); ?>
	
	 <?php
		//Get value from Admin Panel
		$cp_categories = get_categories('hide_empty=0');
        $status1 = get_option( "colabs_preventHeadline" );
        if ( $status1 != "No" ) {
            $ar_headline = get_option( "colabs_headline" );
            $ar_featured = get_option( "colabs_featured" );
        }
        ?>

	<div id="bottom" class="clearfloat">
		
	<div class="wrapper <?php if(get_option('colabs_layout_settings')=='two-col-right'){echo 'right';}else{?>left<?php }?>">
    <?php add_filter('post_limits', 'my_post_limit'); ?>
	
    <?php 
		global $myOffset;
		$temp = $wp_query;
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
		$wp_query= null;
		$wp_query = new WP_Query();
		$wp_query->query(array(
                'paged' => $paged,
				'category__not_in' => array($ar_headline,$ar_featured),
                'post__not_in' => get_option( 'sticky_posts' ),
                'ignore_sticky_posts' => 1,
				)); ?>

	<?php $column = get_option ( "colabs_status_Column" );
		if ( $column != "one" ) { ?>	

	<div id="paged-list">	
	
		<?php if (have_posts()) : ?>
		<?php $i = 1; ?>

		<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>	
        <?php global $ar_ID; global $post; $ar_ID[] = $post->ID; ?>
        
	<?php if( $odd = $i%2 ) { echo '<div class="clearfloat">'; } ?>
    
	<div class="tanbox <?php if( $odd = $i%2 ) { echo 'left'; } else { echo 'right'; } ?>">
        <h3 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <?php 
        colabs_post_meta();
    ?>

	<ul class='gallery-slide'>
	<?php
$attachments = get_children(array('post_parent' => $post->ID,
						'post_status' => 'inherit',
						'post_type' => 'attachment',
						'post_mime_type' => 'image',
						'order' => 'ASC',
						'orderby' => 'menu_order ID'));

foreach($attachments as $att_id => $attachment) {
	$full_img_url = wp_get_attachment_url($attachment->ID);
        $split_pos = strpos($full_img_url, 'wp-content');
        $split_len = (strlen($full_img_url) - $split_pos);
        $abs_img_url = substr($full_img_url, $split_pos, $split_len);
        $full_info = @getimagesize(ABSPATH.$abs_img_url);
        ?>
		
		<li>
			<a href="<?php echo $full_img_url; ?>" title="<?php echo $attachment->post_title; ?>" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/functions/timthumb.php?src=<?php echo $full_img_url; ?>&w=273&h=150&a=t" /></a>
		</li>	
		
<?php
}
?>
</ul>

Ok, your modification on this file already done. And i will explain some code i use on this modification. At the modification above, the code i made is to call every images attached to the post (attached images means the images you upload, not external link, video thumbnail, or an image added via gallery).

The code is like this one (you can reuse this code if you want):

<?php
$attachments = get_children(array('post_parent' => $post->ID,
						'post_status' => 'inherit',
						'post_type' => 'attachment',
						'post_mime_type' => 'image',
						'order' => 'ASC',
						'orderby' => 'menu_order ID'));

foreach($attachments as $att_id => $attachment) {
	$full_img_url = wp_get_attachment_url($attachment->ID);
        $split_pos = strpos($full_img_url, 'wp-content');
        $split_len = (strlen($full_img_url) - $split_pos);
        $abs_img_url = substr($full_img_url, $split_pos, $split_len);
        $full_info = @getimagesize(ABSPATH.$abs_img_url);
        ?>
        <div class="WallSizesHolder">
		<div class="WallSizesThumbHolder">
			<a href="<?php echo $full_img_url; ?>" title="<?php echo $attachment->post_title; ?>" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/thumb.php?src=<?php echo $full_img_url; ?>&w=92&h=69&zc=1" /></a>
		</div>
		<p><?php echo $full_info[0].'x'.$full_info[1]; ?></p>
	</div>
<?php
}
?>

The code above is calling for timthumb file which is very important on Arthemia theme to render/produce the thumbnail.

<?php bloginfo('stylesheet_directory'); ?>/thumb.php

That code is telling the functions about where is the timthumb file located. The blog info will tell the functions about yours site url, then you can type the location (please check the modification code above for details).

Part 2

Next Part is configuring the code behind the slider, make sure if you already download the JQuery files from link at the top of this article.

After download those files, you can upload it into directory: root → wp-content → themes → arthemia-premium → includes → js → test (this test folder is not exist, then create it).

After upload the file into folder test, go back into folder includes then open a file named theme-js.php, edit the file and you will find a code like this one:

 if (is_home()) {

	       wp_enqueue_script( 'jquery.jcarousel.pack', trailingslashit( get_template_directory_uri() ) .'includes/js/jquery.jcarousel.pack.js', array( 'jquery' ) );
	       wp_enqueue_script( 'js-menu', trailingslashit( get_template_directory_uri() ) .'includes/js/js-menu.js', array( 'jquery', 'jquery.jcarousel.pack' ) );

Edit that code become:

 if (is_home()) {

	       wp_enqueue_script( 'jquery.jcarousel.pack', trailingslashit( get_template_directory_uri() ) .'includes/js/jquery.jcarousel.pack.js', array( 'jquery' ) );
	       wp_enqueue_script( 'js-menu', trailingslashit( get_template_directory_uri() ) .'includes/js/js-menu.js', array( 'jquery', 'jquery.jcarousel.pack' ) );
		   	wp_enqueue_script( 'jquery', trailingslashit( get_template_directory_uri() ) . 'includes/js/test/jquery.js', array('jquery') );
			wp_enqueue_script( 'scripts', trailingslashit( get_template_directory_uri() ) . 'includes/js/test/scripts.js', array('jquery') );
			wp_enqueue_script( 'plugin', trailingslashit( get_template_directory_uri() ) . 'includes/js/test/plugins.js', array('jquery') );

If you already reach this step, then you can open your site to check whether the modification is working or not (the modification right now might be not good enough, at the part 3 you will learn how to modify the its styling).

Part 3

This is the last part of this tutorial, if you do exactly the same as mentioned above then congratulations!

Ok, what you have to modify is a file named style.css. You can copy these code below and put it into the end of this file, simple isn’t it?

/* Gallery slides*/
.outer-gallery-slide {
    padding-bottom: 10px;
    border-bottom: 5px solid #DDD;
}

.gallery-slide li {
    float: left;
    list-style: none;
}

Done!

Miscellaneous

This part is the extra configuration about the slider, this slider JQuery is made by carouFredSel, give them a credit for making this great script.

If you notice, there is a file named script.js at the DropBox folder (JQuery files). This file is controlling all behavior that the slider have, to add some features into the slider, you can check out this url