How to convert HTML menu to wordpress Menu

When you need to convert HTML menu to wordpress menu, this tutorial will be very helpful for you.

At first I show you the code for sample HTML menu code:

<div id="nav">
<nav class="jquery-menu clearfix">
<ul class="menu">
<li class="current active"><a href="index.html">Home</a></li>
<li class="parent"><a href="menu.html">Menu</a>
<ul>
<li><a href="menu.html">Breakfast</a></li>
<li><a href="menu.html">Lunch</a></li>

<li><a href="menu.html">Dinner</a></li>
<li><a href="menu.html">Desserts</a></li>
<li><a href="menu.html">Drinks</a></li>
</ul>
</li>
<li><a href="typography.html" >Typography</a></li>
<li><a href="blog.html">Blog</a></li>

<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>

CSS code for above HTML code is :

#nav
{
padding: 0 5px;
height: 40px;
/*float: right;*/
position: absolute;
top: 0;
right: 20px;
font-family: Helvetica, arial, sans-serif;

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-border-bottom-left-radius: 4px;
-border-bottom-right-radius: 4px;
}

#nav ul
{
z-index: 20;
}

#nav li 
{
list-style: none;
float: left;
position: relative;
margin: 0;
padding: 5px 0 40px;
}

#nav a
{
float: left;
padding: 7px 15px 11px;
min-height: 12px; /* min-height will allow an item to occupy multiple lines */
line-height: 100%;
text-decoration: none;
font-size: 1.1em;
text-shadow: 0 1px 0 #fff;
font-style: normal;

color: #241506;
}

#nav li.parent > a
{
background: url(../images/nav.png) no-repeat 50% -58px;
}

#nav li.active
{
background: url(../images/nav.png) no-repeat 50% 41px;
}

/* Second level
------------------------------------------ */

#nav li ul
{
position: absolute;
top: 40px;
left: -5px;
display: none;
padding: 10px 0 5px !important; /* Important so the slide functions don't overwrite it */

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

#nav li li
{
margin: 0;
border: 0;
padding: 0 5px;
}

#nav li li a
{
width: 140px;
display: block;
float: none;
padding: 10px;
}

#nav li li.parent > a
{
background: url(../images/nav.png) no-repeat 100% -122px;
}

/* Third level
------------------------------------------ */

#nav ul ul ul
{
top: 0;
left: 100%;
padding: 5px !important;
margin: -5px 0 0 0px;

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Now, need to convert this HTML menu to wordpress menu:
Step-1:               At first copy paste the below code to your functions.php file

    if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
    array(
     'menu_1' => 'Menu 1',      
               
    )
    );
    }

Step-2:                  Now change the above red color code  <div id="nav">  by <div id="cssmenu">

Step-3:                 Change the blue color HTML code by

<?php wp_nav_menu( array( 'theme_location' => 'menu_1' ) ); ?>

Step-4:                 As we change the <div id="nav">  by <div id="cssmenu">, so we need to change the all  css code       #nav by   #cssmenu


below sample changed: 

#cssmenu
{
padding: 0 5px;
height: 40px;
/*float: right;*/
position: absolute;
top: 0;
right: 20px;
font-family: Helvetica, arial, sans-serif;

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-border-bottom-left-radius: 4px;
-border-bottom-right-radius: 4px;
}

#cssmenu ul
{
z-index: 20;
}

#cssmenu li 
{
list-style: none;
float: left;
position: relative;
margin: 0;
padding: 5px 0 40px;
}

#cssmenu a
{
float: left;
padding: 7px 15px 11px;
min-height: 12px; /* min-height will allow an item to occupy multiple lines */
line-height: 100%;
text-decoration: none;
font-size: 1.1em;
text-shadow: 0 1px 0 #fff;
font-style: normal;

color: #241506;
}

#cssmenu li.parent > a
{
background: url(../images/nav.png) no-repeat 50% -58px;
}

#cssmenu li.active
{
background: url(../images/nav.png) no-repeat 50% 41px;
}

/* Second level
------------------------------------------ */

#cssmenu li ul
{
position: absolute;
top: 40px;
left: -5px;
display: none;
padding: 10px 0 5px !important; /* Important so the slide functions don't overwrite it */

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

#cssmenu li li
{
margin: 0;
border: 0;
padding: 0 5px;
}

#cssmenu li li a
{
width: 140px;
display: block;
float: none;
padding: 10px;
}

#cssmenu li li.parent > a
{
background: url(../images/nav.png) no-repeat 100% -122px;
}

/* Third level
------------------------------------------ */

#cssmenu ul ul ul
{
top: 0;
left: 100%;
padding: 5px !important;
margin: -5px 0 0 0px;

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

}

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(']]>', ']]&gt;', $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');

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

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");

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/

Adding Google Custom Search Engine (CSE) on your website

Most of the website use search option on their website. Visitor can search and get anything easily by search option. It is better to add a custom search engine by Google on to website. Here I show you how to add Google Custom Search Engine (CSE) on your website. At first check two website for sample

http://deshtimes24.com/
http://banglanews24.com/

Deshtimes24 is developed by me. Now I'm telling how to add this custom search engine.

 <script language="javascript" type="text/javascript" src="http://bestcareerbd.com/Clients/cse-search-box.js"></script>
<script language="javascript" type="text/javascript" src="http://www.google.com/jsapi"></script>

Add this code between  <head> tag  and also put the below code where you want to show the search option. Also download cse-search-box.js file by visiting  http://bestcareerbd.com/Clients/cse-search-box.js

 <form class="srch_submit" action="http://www.google.com.bd/cse" id="cse-search-box" target="_blank">
            <input type="hidden" name="cx" value="000558933243491534581:qmhvj6dv8n4" />
            <input type="hidden" name="ie" value="utf-8" />
            <div class="btnSearch" id="btnSearch">
              <input id="q" name="q" class="q bangla_font" style="" type="text" maxlength="100" value="Search..." />
                <input id="sa" name="sa" style="" type="submit" value="" />
            </div>           
</form>
  Red color code inside <form> tag will be changed by your own

Search engine unique ID: 000558933243491534581:qmhvj6dv8n4

To get this unique id visit https://www.google.com/cse/manage/create and create an account for your website.

CSS code for this. Add below code into your css file'

#btnSearch{float:right;overflow:hidden;margin-top:0px;}

#q{font-size:13px;height:28px;width:160px;border:0;background-image:url(http://bestcareerbd.com/Clients/search_box_button.jpg);padding:0;margin:0;float:left;padding:0 10px;color:#666;}

#sa{font-family:SolaimanLipi;color:#D60000;border:none;cursor:pointer;height:28px;width:30px;border:0;background-image:url(http://bestcareerbd.com/Clients/search_button.jpg);padding:0;cursor:pointer;margin:0;float:left;}

How to show category name by category id in wordpress

Here is will show you some way to get category name and link from category ID

/// Category link  from category Name

<?php
    // Get the ID of a given category
    $category_id = get_cat_ID( 'Category Name' );

    // Get the URL of this category
    $category_link = get_category_link( $category_id );
?>

<!-- Print a link to this category -->
<a href="<?php echo esc_url( $category_link ); ?>" title="Category Name">Category Name</a>


WordPress – Get Category Link By Category Id

<?php
echo get_category_link( "category_id_here" );
?>

WordPress – Get Category name By Category Id

<?php echo get_the_category_by_id(10); ?>

Yellow color color code some shows a error "Catchable fatal error: Object of class stdClass could not be converted to string in ..."

if showing Catchable fatal error:  then use bellow for category name 

<?php
$cat=1;
$yourcat = get_category($cat);
if ($yourcat) {
echo '<h2>' . $yourcat->name . '</h2>';
}
?>

How to show Bangla Date in a website

At first create a file suppose bangladate.php, then open it by a text editor, suppose: Notepad++
Then paste this below code and save


<?php
function bn_date($str)
 {
     $en = array(1,2,3,4,5,6,7,8,9,0);
    $bn = array('১','২','৩','৪','৫','৬','৭','৮','৯','০');
    $str = str_replace($en, $bn, $str);
    $en = array( 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' );
    $en_short = array( 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' );
    $bn = array( 'জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ', 'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'অগাস্ট', 'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর', 'ডিসেম্বর' );
    $str = str_replace( $en, $bn, $str );
    $str = str_replace( $en_short, $bn, $str );
    $en = array('Saturday','Sunday','Monday','Tuesday','Wednesday','Thursday','Friday');
     $en_short = array('Sat','Sun','Mon','Tue','Wed','Thu','Fri');
     $bn_short = array('শনি', 'রবি','সোম','মঙ্গল','বুধ','বৃহঃ','শুক্র');
     $bn = array('শনিবার','রবিবার','সোমবার','মঙ্গলবার','বুধবার','বৃহস্পতিবার','শুক্রবার');
     $str = str_replace( $en, $bn, $str );
     $str = str_replace( $en_short, $bn_short, $str );
     $en = array( 'am', 'pm' );
    $bn = array( 'পূর্বাহ্ন', 'অপরাহ্ন' );
    $str = str_replace( $en, $bn, $str );
     return $str;
 }
//Change below codes according to your requirement .
//__________________________________________
echo bn_date(date('l, d M Y, h:i a'));
//__________________________________________
?>


Now, paste the below code , where you want to show

 <?php
include_once"/wp-content/themes/deshtimes/bndate.php"; ?>

red color will be your file url/link.

Result:   বৃহস্পতিবার, ০2 ফেব্রুয়ারী ২০১৩, ০৭:৩৯ অপরাহ্ন

you can change the pattern by 

echo bn_date(date('l, d M Y, h:i a'));

l=Day in full text
D=Day in short text
Y=Year
M=Month in full text
d=Day in Numeric format
h=Hour in Numeric
i=Minute in Numeric
a=Time in text like "AM and PM , in bangla 
'পূর্বাহ্ন', 'অপরাহ্ন'

"