WordPress Customization to achieve minimalist, user friendly and fast response site!

WordPress Limit Post Excerpt By Characters Without Truncation
Customizing Arrow for Newer Older Entries
Auto Resizing Posts Pages Image by Max Width Height
Customizing Breadcrumb NavXT WordPress Theme
Optimizing Robots.txt for Better SEO

WordPress Limit Post Excerpt By Characters Without Truncation

Ayumilove.net homepage post excerpt had some makeover to reduce text bloat. Post excerpt is a snippet of your post first few sentences. The excerpt is Twitter-styled by limiting it to 240 characters. Below is the code I used in my theme functions.php which might be useful for your WordPress-based site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// [AYUMILOVE_START] Twitter Style Post Excerpt
function get_twitter_style_excerpt(){
$excerpt = get_the_content();
$excerpt = preg_replace(" (\[.*?\])",'',$excerpt);
$excerpt = strip_shortcodes($excerpt);
$excerpt = strip_tags($excerpt);
$excerpt = substr($excerpt, 0, 240);
$excerpt = substr($excerpt, 0, strripos($excerpt, " "));
$excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));
$excerpt = $excerpt . '...';
return $excerpt;
}
add_filter('the_excerpt', 'get_twitter_style_excerpt');
// [AYUMILOVE_END] Twitter Style Post Excerpt

Customizing Excerpt Notes
1. The code above does not truncate last word if meets max characters. Example:
1a. Original Statement = The quick brown fox jumps over the lazy dog.
1b. Truncated Statement = The quick brown fox jumps ove …
1c. Truncation fix = The quick brown fox jumps …
2. Change character length 240 to the length you are comfortable for your excerpt.
3. If the excerpt is not styled with css, add the paragraph tags < p >
4. Implementing this code into Theme functions.php avoids installing plugin.

Customizing Arrow for Newer Older Entries

Instead of using mini triangle .gif pictures to highlight the direction of your newer and older entries, you could use the HTML arrows to do it. Below is an example of adding arrows to your main index.php and your post.php

Add these code beside the Newer/Older Entries
If your Newer Entries Link are on the left, place the “Larr” (left arrow) on the left side of “Newer Entries”.
If your Older Entries Link are on the right, place the “Rarr” (Right arrow) on the right side of “Older Entries”.

1
2

<span class="meta-nav">&larr;</span>
<span class="meta-nav">&rarr;</span>

Main Index Template (index.php)

1
2
3
4
5
6
7
8
9

<div id="pagenavi">
	<?php if(function_exists('wp_pagenavi')) : ?>
		<?php wp_pagenavi() ?>
	<?php else : ?>
		<span class="newer"><?php previous_posts_link(__('<span class="meta-nav">&larr;</span> Newer Entries', 'inove')); ?></span>
		<span class="older"><?php next_posts_link(__('Older Entries <span class="meta-nav">&rarr;</span>', 'inove')); ?></span>
	<?php endif; ?>
	<div class="fixed"></div>
</div>

Image.php
Previously my image section does not have the next and previous arrows, visitors would be going back and forth from the main post and clicking the thumbnails. To avoid this hassle, I have implemented a next and previous link below each image. If there is only 1 image, the next/previous link will not be shown!

1
2

<div class="alignleft"><?php previous_image_link( false, '&larr; Previous Image' ); ?></div>
 <div class="alignright"><?php next_image_link( false, 'Next Image &rarr;' ); ?></div>

Archive.php and Index.php
In the older theme, it uses a triangle arrow image .gif and this is replaced with a html character arrow. Place these within the pagenavi division (div)

1
2
3
4
5
6
7
8
9

<div id="pagenavi">
	<?php if(function_exists('wp_pagenavi')) : ?>
		<?php wp_pagenavi() ?>
	<?php else : ?>
		<span class="newer"><?php previous_posts_link(__('<span class="meta-nav">&larr;</span> Newer Entries', 'inove')); ?></span>
		<span class="older"><?php next_posts_link(__('Older Entries <span class="meta-nav">&rarr;</span>', 'inove')); ?></span>
	<?php endif; ?>
	<div class="fixed"></div>
</div>

Single.php (Single Post)
Added next/previous link within a single post, so visitors avoid having to return to the main home page to read other post in ascending/descending manner.

1
2
3
4
5
6
7

<div class="content">
<?php the_content(); ?>
<!-- Ayumilove Added Next Previous HTML Arrow -->
 <div class="alignleft"><span class="newer"><?php next_post_link('%link','&larr; Newer Entry'); ?></span></div>
 <div class="alignright"><span class="older"><?php previous_post_link('%link','Older Entry &rarr;'); ?></span></div>
<div class="fixed"></div>
</div>

Check this WC3 Character Table for more different html arrows.

Auto Resizing Posts Pages Image by Max Width Height in WordPress

Here is a mini update that I have applied on my blog to resize image according to their max-width in posts and pages. This is done through CSS, no PHP editing required! Add these 2 lines of code into your style.css

Add the 2 lines of code into your div content

1
2
3
4

.post .content img {
max-width: 720px;
height:auto;
}

Max-width
This represents the max width of your content page. My blog content is 720 pixels in width.

Height
Set height to auto. Whenever your images are over the max width, it will resize proportionally according to max-width, otherwise, not it will not resize.

Sample of High Resolution Wallpaper
To see how it works in action, click thumbnails in SNSD Girls Generation Goobne Wallpaper Calendar 2011

Other Updates (8.1)
Removing .gif
Repositioning search engine
Removing twitter and feeds

Customizing Breadcrumb NavXT WordPress Theme

I found the way on how to fix Inove BreadCrumb links!
Download, extract and activate Breadcrumb NavXT from your WordPress Dashboard.
Replace inove wordpress breadcrumb with navxt codes inside single.php (Single Post)

Add these Breadcrumb NavXT codes…

1
2
3

<div class="breadcrumbs">
<? php if(function_exists('bcn_display')) {    bcn_display();}?>
</div>

below these 3 lines:

1
2
3

<?php get_header(); ?>
<?php $options = get_option('inove_options'); ?>
<?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

Comment out Inove Breadcrumb codes below:

1
2
3
4
5
6
7

	<div id="postpath">
		<a title="<?php _e('Go to homepage', 'inove'); ?>"
                 href="<?php echo get_settings('home'); ?>/">
                 <?php _e('Home', 'inove'); ?></a>
		 &gt; <?php the_category(', '); ?>
		 &gt; <?php the_title(); ?>
	</div>

Your final output should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php get_header(); ?>
<?php $options = get_option('inove_options'); ?>
<?php if (have_posts()) : the_post(); update_post_caches($posts); ?>
 
<div class="breadcrumbs">
<? php if(function_exists('bcn_display')) {    bcn_display();}?>
</div>
 
<?php /* commented-out-inove-breadcrumb
	<div id="postpath">
		<a title="<?php _e('Go to homepage', 'inove'); ?>"
                 href="<?php echo get_settings('home'); ?>/">
                 <?php _e('Home', 'inove'); ?></a>
		 &gt; <?php the_category(', '); ?>
		 &gt; <?php the_title(); ?>
	</div>
commented-out-inove-breadcrumb */ ?>

Optimizing Robots.txt for Better SEO

Previously my robots.txt was a mess with nuisance errors. I clean it up and added a few adjustment based on some popular websites there. Some said that it would be better to have it simple as possible. Check it out as it’s only 2 lines of code. (Update 7.1)

1
2

User-agent: *
Disallow:

Updates 7.2
Apart from that, I have submitted my blog using Google Webmaster Tool, so I can check out some stats there. However, you will need to verify that you are the owner of the website. Google provides a few alternatives that you can use to verify. Once verified, you can check for Google Bot Crawl Access Errors and what they have crawled on your page!

Updates 7.3
Added index.php into /wp-content/uploads to prevent users from accessing all of your contents that you scheduled for different days, or contents that you have in private posts. It’s optional. :)

1

<?php /* Welcome to Ayumilove Official Website! */ ?>