Extreme Modification For Arthemia, Part #2

This is the second part of the Arthemia modification. At the previous post, i already publish how to modify the header section (headline, featured and social network icons).

At this time, i will tell you how to:

  • Add custom font icons
  • Add tabs JQuery
  • Modify widget styling
  • Modify latest posts
  • Create latest comments

Step #2

At this step you have to modify several files such as index.php, arthemia.js, style.css and adding a new files.

At this step, you have prepare the new latest posts looping at the main page (index.php) and also the latest comments. To do it, open a file named index.php and replace all codes with this one:

<?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 left">
	
		<div id="tabber">
			<ul class="tabs clearfloat" id="tabsnav">
				<li class="active"><a href="#tab-1" class="menu-internal"><i class="icon-pencil"></i>Latest Posts</a></li>
				<li class=""><a href="#tab-2" class="menu-internal"><i class="icon-comments-alt"></i>Recent Discussions</a></li>
			</ul>
			<div id="tab-1" style="display: block;">
				<?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,
						)); ?>
				<div id="paged-list">	
					<?php if (have_posts()) : ?>
					<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>	
							
						<?php global $ar_ID; global $post; $ar_ID[] = $post->ID; ?>
					<div class="onecolumn clearfloat one-<?php the_ID(); ?> ">
						<div class="onemeta">
							<?php
								colabs_image('width=150&height=150&play=true');
							?>
							<p><?php the_title(); ?></p>
							<div class="extra onedate"><?php the_time('F j, Y');?></div>
							<div class="extra onecat"><?php the_category(','); ?></div>
						</div>

					<p class="textinfo"><?php echo substr(get_the_excerpt(), 0,200); echo '...'; ?></p>
					
					<div class="meta-helper">
						<div class="url-more"><a href="<?php the_permalink() ?>">Read More</a></div>
					</div><!-- meta-helper -->

					</div>
							<?php endwhile; ?>
					<div id="navigation">
					<?php colabs_pagination(); ?></div>

					<?php endif; ?>

				</div><!--/#paged-list-->
				<?php $wp_query = null; $wp_query = $temp;?>
				<?php remove_filter('post_limits', 'my_post_limit'); ?>
			</div>
			
			<div id="tab-2" style="display: none;">
				<?php $comments = get_comments('status=approve&number=10'); ?>
				<ul class="comm-content">
				<?php foreach ($comments as $comment) { ?>
					<li class="clearfloat"><?php
						$title = get_the_title($comment->post_ID);
						echo '<div class="comm-img">' . get_avatar( $comment, '60' ) . '</div>';
						echo '<div class="comm-wrap">';
						echo '<div class="comm-name">' . strip_tags($comment->comment_author) . '</div>';
						echo '<div class="comm-excerpt">' . wp_html_excerpt( $comment->comment_content ) . '</div>'; ?>
							<div class="comm-title">
								on <a href="<?php echo get_permalink($comment->post_ID); ?>" rel="external nofollow" title="<?php echo $title; ?>"> <?php echo $title; ?> </a>, <?php comment_date('F j, Y'); ?>
							</div>
						</div>
					</li>
				<?php }  ?>
			</div>
		
		</div><!-- tabs wrap -->
	</div><!--/#bottom-left-->
	
	
	<div id="sidebar" class="right">
		<?php get_sidebar(); ?>
	</div><!--/#bottom-->

<?php get_footer(); ?>

Once you did it, the latest comments and the new layout of the latest posts has been made. But, the Tabber feature and the styling is not available yet.

Here are some description about the codes:

<div id="tabber">
<div id="tab-1" style="display: block;">
<div id="tab-2" style="display: none;">

Don’t remove or change those codes since we are going to use it at the JQuery file. Those codes will be the tab navigation UI.

<p class="textinfo"><?php echo substr(get_the_excerpt(), 0,200); echo '...'; ?></p>

This code is used to displaying a custom excerpt length without have to declare it at the functions.php file.

get_permalink

We have to use get permalink if we want to use a PHP echo. If you use the default the_permalink, for sure that you will get nothing.

By doing this, your work for the HTML and PHP already done. What left is the JavaScript and the CSS.

Open and edit a file named arthemia.js and find out this code: (you can find out this file via FTP at directory: wp-content → themes → arthemia → includes → js)

})(jQuery);

Put this code above that code:

jQuery('#tabs > div').hide(); // hide all child divs
  jQuery('#tabs div:first').show(); // show first child dive
  jQuery('#tabsnav li:first').addClass('active');

  jQuery('.menu-internal').click(function(){
   jQuery('#tabsnav li').removeClass('active');
   var currentTab = jQuery(this).attr('href');
   jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active');
   jQuery('#tabs > div').hide();
   jQuery(currentTab).show();
   return false;
  });
  // Create a bookmarkable tab link
  hash = window.location.hash;
  elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash
  if (elements.length === 0) { // if there aren't any, then
   jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
  } else { elements.click(); } // else, open the tab in the hash

// new tabber  
 jQuery(document).ready(function() {
  jQuery('#tabber > div').hide(); // hide all child divs
  jQuery('#tabber div:first').show(); // show first child div
  jQuery('#tabsnav li:first').addClass('active');

  jQuery('.menu-internal').click(function(){
   jQuery('#tabsnav li').removeClass('active');
   var currentTab = jQuery(this).attr('href');
   jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active');
   jQuery('#tabber > div').hide();
   jQuery(currentTab).show();
   return false;
  });

  // Create a bookmarkable tab link
  hash = window.location.hash;
  elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash in the URL
  if (elements.length === 0) { // if there aren't any, then
   jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
  } else { elements.click(); } // else, open the tab in the hash

 });

By that code, your tabber will working fine but it will have several errors since the CSS codes are not yet configured.

Put this code at the style.css file:

/* index */
.onecolumn img {border-radius: 100px;}
.onemeta p {margin-top: 15px; border-top: 1px dashed rgba(81, 114, 129,0.4); padding: 10px 0px; border-bottom: 1px dashed rgba(81, 114, 129,0.4); font-size: 12.5px; line-height: 18px;}
#paged-list .clearfloat {border-bottom: 1px dashed rgba(175, 193, 204,0.4); padding: 20px 0px 15px 0px;}
.onemeta .extra {padding: 10px 0px; }
.onemeta {text-align: center;}
.onemeta {width: 30%; }
.onemeta {float: left;}
.onecolumn .textinfo {line-height: 20px; float: left; width: 60%; margin-left: 30px;}
.onecolumn {position: relative;}
.meta-helper {position: absolute; bottom: 0px; right: 0px; margin: 0px 0px 25px 0px;}
.url-more a {color: #000 !important; text-decoration: none; border: 2px solid #000; padding: 10px;}
.url-more a:hover {padding: 12px; border: none; background: #000; color: #fff !important;}

/* comment lists */
#tab-2 {background: #fff; width: 99.1%;}
.comm-content {padding: 15px 10px 10px 10px;}
.comm-img {float: left; margin-right: 10px;}
.comm-content li {margin-bottom: 10px; font-size: 13px; border-bottom: 1px dashed rgba(81, 114, 129,0.4); padding-bottom: 10px;}
.comm-name {font-weight: bold; margin-bottom: 10px; text-transform: uppercase;}
.comm-excerpt {line-height: 20px; margin-bottom: 10px;}
.comm-wrap {width: 500px; float: left;}

/* custom tab front */
#tabber #tabsnav a {color: #000;}
#tabber #tabsnav a:hover {text-decoration: none;}
#tabber #tabsnav li {text-align: left; float: left; font-size: 16px; padding: 10px;}
#tabber #tabsnav {position: relative; left: 270px; margin: 0px 0px 15px 0px;}
#tabsnav li.active {background: #000;}
#tabsnav li.active a {color: #fff !important;}
i.icon-pencil, i.icon-comments-alt {margin-right: 5px;}

With this codes, your modification for the tabber is working 100%.

At the CSS code, i used several codes for to call the custom font icon for the tabber. I will explain about this later.

Next, i will share about how to add the custom font icon. This font icon can be downloaded for free from icomoon.io. There is no license for the font, so you can use it commercially. You can use any icons as you want, but at this modification i have a selected font icon that you can use. You can download it from this URL.

Download the pack and extract it into your PC. Then upload them via FTP to directory: wp-content → themes → arthemia → fonts. Extract the font files only inside the fonts folder. Once you made it, you have to call the fonts at the style.css file by adding this code:


/********* font *************/
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?8bdxn4');
src:url('fonts/icomoon.eot?#iefix8bdxn4') format('embedded-opentype'),
url('fonts/icomoon.woff?8bdxn4') format('woff'),
url('fonts/icomoon.ttf?8bdxn4') format('truetype'),
url('fonts/icomoon.svg?8bdxn4#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-pencil:before {
content: "\e609";
}
.icon-comments-alt:before {
content: "\e60a";
}
.icon-flickr:before {
content: "\e600";
}
.icon-vimeo:before {
content: "\e601";
}
.icon-twitter:before {
content: "\e602";
}
.icon-facebook:before {
content: "\e603";
}
.icon-googleplus:before {
content: "\e604";
}
.icon-pinterest:before {
content: "\e605";
}
.icon-tumblr:before {
content: "\e606";
}
.icon-linkedin:before {
content: "\e607";
}
.icon-instagram:before {
content: "\e608";
}

Right now, all font icons declared before will be displayed perfectly. But, there is some issues when your site accessed using Google Chrome. Some of the font icons cannot be read. To fix it, add this code at a file named style.css:

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}
 
@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

This patch will work only for Google Chrome. And please note if this font icon will work only for modern browser, an older browser will not work (such as old Internet Explorer 8 below).

The last thing on this part is to modify the widgets layout. Add this code to style.css:

/* sidebar */
.sidebar-background {padding: 0px;}
#sidebar-top h3 {background: #000 !important; font-size: 18px !important; padding: 10px !important; text-transform: uppercase;}

/* widget */
.spoiler p {line-height: 20px;}

And that’s it for this second step. I will have the third step, so keep checking my blog!

Advertisements

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