Bootstrap Templates Bundle

Tuesday, September 17, 2013

How to show paragraph, image and HTML tags in wordpress excerpt

This tutorial will be very helpful for Newspaper theme, Blog theme, Magazine theme etc. Sometimes it is necessary to show images, paragraph in home page excerpt  from a wordpress post. Normally wordpress excerpt not show any paragraph, images and other HTML tags. But if you use this below code it will help you to show all types of HTML tags from a post in excerpt.

/******************************************************************************
* @Author: Boutros AbiChedid
* @Date:   June 20, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Preserves HTML formating to the automatically generated Excerpt.
* Also Code modifies the default excerpt_length and excerpt_more filters.
* @Tested: Up to WordPress version 3.1.3
*******************************************************************************/
function custom_wp_trim_excerpt($text) {
$raw_excerpt = $text;
if ( '' == $text ) {
    //Retrieve the post content.
    $text = get_the_content('');
    //Delete all shortcode tags from the content.
    $text = strip_shortcodes( $text );
    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]>', $text);
   
    $allowed_tags = ''; /*** MODIFY THIS. Add the allowed HTML tags separated by a comma.***/
    $text = strip_tags($text, $allowed_tags);
   
    $excerpt_word_count = 55; /*** MODIFY THIS. change the excerpt word count to any integer you like.***/
    $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);
   
    $excerpt_end = '[...]'; /*** MODIFY THIS. change the excerpt endind to something else.***/
    $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end);
   
    $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
        array_pop($words);
        $text = implode(' ', $words);
        $text = $text . $excerpt_more;
    } else {
        $text = implode(' ', $words);
    }
}
return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');



Changing/modification requirement according to you need:
Change-1: In the above code  where it shows "MODIFY THIS. Add the allowed HTML tags separated by a comma."
Change the code  $allowed_tags = '';

//Separate tags by commas. Add or Remove tags as you wish.
$allowed_tags = '<p>,<a>,<em>,<strong>,<img>';

It will helps you to show paragraph, link, strng, img tag of HTML from post content to post excerpt.

Change-2:
Where it shows  /*** MODIFY THIS. change the excerpt word count to any integer you like.***/

If you like to change the automatically generated excerpt length fromthe default 55 words
//Replace line 25 of the MAIN_CODE with this:
$excerpt_word_count = 65; /* Choose any number you like. */

If you want to modify the excerpt length based on one category

//Replace line 25 of the MAIN_CODE with this:
if (in_category(4)) {  //For posts belonging to category ID 4
   $excerpt_word_count = 65; //return 65-word length excerpt.
} else {
    $excerpt_word_count = 40; //for all others, return 45 words.
}

If you want to modify the excerpt length based on multiple categories

//Replace line 25 of the MAIN_CODE with this:

if(in_category(array(4,40))) {  //For posts belonging to category IDs 4 and 40

    $excerpt_word_count = 65; //return 65 words for the excerpt.

} else {

     $excerpt_word_count = 40; //for all others, return 40 words.

}


Change-3: In the above code  where it shows
/*** MODIFY THIS. change the excerpt endind to something else.***/

By default WordPress outputs an un-linked “[...]” at the end of each excerpt, which is not useful for Accessibility and SEO purposes. If you want to modify the excerpt more string with a link,  replace it with this:

//Replace line 28 of the MAIN_CODE with this:
$excerpt_end = ' <a href="'. get_permalink($post->ID) . '">' . '&raquo; Continue Reading.' . '</a>';

If you want to add the post title to your link in the excerpt,

//Replace line 28 of the MAIN_CODE with this:
$excerpt_end = ' &#8230;<br /><a href="'. get_permalink($post->ID) . '">' . '&raquo; Continue Reading: '. get_the_title() . '</a>';

All changes done. For you Here i add a sample code below that I've added to my
wordpress themes.
function custom_wp_trim_excerpt($text) {
$raw_excerpt = $text;
if ( '' == $text ) {
    $text = get_the_content('');
    $text = strip_shortcodes( $text );
    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]&gt;', $text);
   
    /***Add the allowed HTML tags separated by a comma.***/
    $allowed_tags = '<p>,<a>,<em>,<strong>,<img>';
    $text = strip_tags($text, $allowed_tags);
   
    /***Change the excerpt word count.***/
    $excerpt_word_count = 60;
    $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);
   
    /*** Change the excerpt ending.***/
    $excerpt_end = ' <a href="'. get_permalink($post->ID) . '">' . '&raquo; Continue Reading.' . '</a>';
    $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end);
   
    $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
        array_pop($words);
        $text = implode(' ', $words);
        $text = $text . $excerpt_more;
    } else {
        $text = implode(' ', $words);
    }
}
return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');


Sunday, September 15, 2013

AdSense Code for TESTING

Here I give sample AdSense code for testing. 
Red Color will be changed by your own. 
Also you can use Google AdSense Generator for crating code by your own publication ID 
<script type="text/javascript"><!--
    google_ad_client = "ca-pub-5130888087776673";  
	/* HorizontalLeaderboard */  
    google_ad_slot = "5926145549"; 
    google_ad_width = 728;
    google_ad_height =  90; 
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>

How to show HTML and PHP code on a site?

Sometimes in tutorial blog or in some other cases it's needed to show html/php  code onto website.

Suppose you want to show  <?php echo wp_ruby_1(); ?> then you can use the below codes

system1:   <pre>&lt?php echo wp_ruby_1(); ?&gt </pre>
or
system2:   <?php highlight_string('<?php echo wp_ruby_2(); ?>'); ?>


System 1 can be used for both HTML/PHP but system 2 can be used for only php code

Thursday, September 12, 2013

How to enable keyboard shortcuts for WordPress

To enable keyboard shortcuts for WordPress
Administration > Users > Your Profile and Check the Keyboard shortcuts Check box to enable it.

For comment moderation use the these shortcuts

Press A to approve the selected comment.
Press S to mark as spam comment.
Press D to Delete the selected comment
Press Z to restore the trashed comment.
Keyboard Shortcuts for WordPress Rich Text Editor:

You can use many keyboard shortcuts while creating a new post with WordPress Rich text editor. Write faster without using mouse using these WordPress Editor shortcut keys. Use Ctrl +Letter for Windows and Linux and Command + Letter for  Macintosh.


Alt + Shift + letter Shortcuts:

Alt+Shift+ N      -  Check Spelling

Alt+Shift+ E      -  Switches to HTML mode

Alt+Shift+ P      -  Insert Page Break tag

Alt+Shift+ M     –  Insert Image

Alt+Shift+ H      -  Help

Text Decoration:

Alt+Shift+ B      -  Makes the selected text Bold

Alt+Shift+ I        -   Makes the selected text Italic

Alt+Shift+ D       –   Strike through outdated links and information.

Alt+Shift+ U      -   Makes an Unordered List

Alt+Shift+ O      -   Makes an Ordered List

Alt+Shift+ Q      -  Blockquote

Text Alignment:

Alt+Shift+ L        -  Align Text Left

Alt+Shift+ C       –  Align Text Center

Alt+Shift+ R       –  Align Text Right

Alt+Shift+ J       –   Justify Text

Linking:

Alt+Shift+ A       –  Insert or Edit Link

Alt+Shift+ S        -  Unlink or Remove Link

Alt +                        - Wider (Widens the Editor window)

Alt  -                        - Narrower(Shrinks the Editor window)

Alt 0                        - Default Width


Ctrl+Letter Shortcut Keys:

CTRL + U        - Underlines the selected Text

CTRL + B        -  Bold   (Alt+Shift+B also works)

CTRL + I         – Italic (Alt+Shift+I also works)

CTRL + 1        -  Heading 1

CTRL + 2        -  Heading 2

CTRL + 3        -  Heading 3

CTRL + 4        - Heading 4

CTRL + 5        -  Heading 5

CTRL + 6        -  Heading 6

CTRL + 9        -  Address

CTRL +Z         –  Undo

CTRL +Y        -  Redo

CTRL +A        -   Selects all the text

CTRL +C        -  Copies the Selected text

CTRL +X        -  Cuts the Selected text

CTRL +V       –  Pastes the copied text

How to add extra buttons to WordPress visual post editor

To make more user friendly of your wordpress theme, you can add extra buttons to WordPress visual post editor by adding some simple code into your functions.php file.

It's better to add this code just before the last line of your functions.php file and after adding this below code go to Posts > Add New. Then you see the the difference.

//Add Extra Buttons to WordPress Visual Post Editor

function enable_more_buttons($buttons) {
$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'backcolor';
$buttons[] = 'image';
$buttons[] = 'media';
$buttons[] = 'anchor';
$buttons[] = 'sub';
$buttons[] = 'sup';
$buttons[] = 'hr';
$buttons[] = 'wp_page';
$buttons[] = 'cut';
$buttons[] = 'copy';
$buttons[] = 'paste';
$buttons[] = 'newdocument';
$buttons[] = 'code';
$buttons[] = 'cleanup';
return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");



Tuesday, September 10, 2013

Add Cache-Control Headers in your root .htaccess file

By adding cache control header into your .htaccess file, it can be possible to speed up your website.
Here is the way  how to add Cache-Control Headers in your root .htaccess file

# 480 weeks
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

# 2 DAYS
<FilesMatch ".(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

# 2 HOURS
<FilesMatch ".(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>

Explanation: The first portion of the code will cache your .ico, .jpg, .png, .css, .js, .swf file for 480 days. You can change this 480 days by your one by changing red color portion
480weeks= 480*7*24*60*60=290304000


How to test website speed and perormance

There is some website/tools which will help you to test your website and performance. It is necessary to speed up your website. After testing your website speed you can take necessary steps to increase your website speed.

Website speed and performance testing website link:
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/insights
http://www.webpagetest.org/
http://www.serverspeed.com/



Wokiee React eCommerce Template