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

Advertisements

64 thoughts on “Arthemia Post Slider

  1. A person necessarily assist to make significantly posts
    I’d state. This is the first time I frequented your web page and to this point? I amazed with the analysis you made to make this particular post extraordinary. Magnificent activity!

  2. Whats up very nice blog!! Spent an interesting few
    minutes looking about. I’m glad to seek out a lot of useful info right here in the post, we need work out more techniques in this regard, thank you for sharing. . . . . .

  3. Hi! I’ve been reading your web site for some time now and finally got the courage to go ahead and give you a hi from Leeds. Just wanted to mention keep up the good job!

  4. Thank you, I’ve recently been searching for information approximately this subject for a while and yours is the best I have came upon till now. But, what in regards to the bottom line? Are you certain in regards to the supply?

  5. Wonderful blog! I found it while searching on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?

    I’ve been trying for a while but I never seem to get there! Thanks

  6. I don’t know whether it’s just me or if perhaps everybody else
    experiencing problems with your blog. It appears as if some of the content in your content are running
    off the screen. Can somebody else please provide feedback and let me know if this is happening to them as well?

    This might be a issue with my browser because
    I’ve had this happen previously. Thanks

  7. My partner and I stumbled over here from a different page and thought I might as
    well check things out. I like what I see so now i am following you.

    Look forward to checking out your web page for a second time.

  8. i am following your blog regularly and got great information. i really like the tips you have given. thanks a lot for sharing. will be referring a lot of friends about this.

  9. I just want to tell you that I am very new to blogging and actually loved your web site. More than likely I’m going to bookmark your website . You definitely come with outstanding articles and reviews. Bless you for sharing your website.

  10. Cool blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would really
    make my blog jump out. Please let me know where you got your
    design. Cheers

  11. I blog often and I truly appreciate your content.

    Your article has truly peaked my interest.
    I am going to take a note of your blog and keep checking for new information about once a week.
    I opted in for your RSS feed as well.

  12. I’m really enjoying the design and layout of your website. It’s a very easy on the eyes which
    makes it much more pleasant for me to come here and visit more often.
    Did you hire out a designer to create your theme? Outstanding work!

  13. Hi there! This is kind of off topic but I need some advice from an established
    blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about creating my
    own but I’m not sure where to begin. Do you have any points or suggestions? Thank you

  14. i can only compliment you for the good job you have been doing in this blog, congratulations and keep it coming.

  15. hello there and thank you for your information – I’ve definitely picked up something new from right here. I did however expertise some technical points using this site, since I experienced to reload the site a lot of times previous to I could get it to load properly. I had been wondering if your web hosting is OK? Not that I am complaining, but sluggish loading instances times will sometimes affect your placement in google and could damage your high quality score if ads and marketing with Adwords. Well I’m adding this RSS to my email and can
    look out for a lot more of your respective
    fascinating content. Ensure that you update this again soon.

  16. I was very pleased to seek out this web-site.I wanted to thanks in your time for this glorious read!! I undoubtedly enjoying each little bit of it and I have you bookmarked to check out new stuff you weblog post.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s