ওয়ার্ড প্রেস টিপ্স-১

সেপ্টেম্বর ৫, ২০০৯8 টি মন্তব্য

“ওয়ার্ড প্রেস টিপ্স” এ ধারাবাহিক ভাবে ওয়ার্ড প্রেস বিষয়ক ছোট ছোট তথ্য দেওয়ার চেস্টা করবো।
নোটঃ কিছু কিছু টিপ্স এডভান্সড লেভেলের হতে পারে যা প্রফেশনাল ওয়ার্ড প্রেস বেসড ওয়েব ডেভেলপারদের জন্য কাজে দিবে আশা করি।

একঃ কাস্টম হেডার ফাইল বা header.php ফাইল কোন পাতায় যুক্ত করাঃ
সাধারণত আমরা এমন ভাবে থীম বানায় যে সাইট যেন হেডার, বডি, ফুটার এই ভাবে থাকে। আর এই চিন্তা থেকেই ওয়ার্ড প্রেস থীম এর কোর ফাইল হিসাবে header.php , footer.php ফাইল দুইটা থাকে। আর header.php ফাইল যুক্ত করার জন্য index.php, category.php ইত্যাদি ফাইলে আমরা ওয়ার্ড প্রেসের একটা টেমপ্লেট ফাংশন লিখিঃ

< ?php get_header(); ?>

যা header.php ফাইলটা লোড করে
এবং একই ভাবে footer.php ফাইলে যুক্ত করার জন্য লিখি এই রকমঃ

< ?php get_footer(); ?>

যা footer.php ফাইলটা লোড করে
আর এই কারণে দেখা যায় সব পেজে হেডার আর ফুটার অংশ একই থাকে। এখন যদি এমন হয় কোন কাস্টম টেমপ্লেট পাতায়(এটা যদি কেউ না বুঝেন তাহলে পরের টিপ্স মানে ‘দুই’ দেখুন আগে) যদি হেডার বা ফুটার আলাদা দেখাতে চায় তাহলে দুইটা উপায় আছে এক header.php ফাইলে নিচের মতো কন্ডিশন যুক্ত করতে হবেঃ

if(is_page(page id here)){
//write your specific code for the specific page id :D
}

কিন্তু যদি এতো ঝামেলায় না যেতে চায় তাহলে অন্য উপায় আছে তাই এই রকম।
header.php টা কপি করে header-myheader.php এই রকম নামের ফরম্যাটে সেইভ করবেন। এখানে আপনি আপনার ইচ্চা মতো myheader এই টুকু দিবেন। যেমন ধরুন আপনি গ্যালাই একটা আলাদা পাতা তৈরি করছেন। তাহলে ঐ পাতায় জন্য আলাদা হেডার ফাইলের নাম দিতে পারেন header-gallery.php । এরপর এই নতুন ফাইলে আপনি ইচ্ছা মতো সম্পাদনা করুন বুঝে বুঝে যা শুধু গ্যালারী পাতার হেডার হিসাবে দেখাবে। ভাবছেন এটা কিভাবে থীমে যুক্ত করবো ? হুম এই ভাবে… যদি আপনার হেডার ফাইলের নাম header-myheader.php এটা হয়

< ?php get_header('myheader'); ?>

ফুটার এর জন্যও ব্যাপারটা একই রকম।

দুইঃ নিশ্চয় মনে আছে ‘এক’ উল্লেখ করেছি কিভাবে ওয়ার্ড প্রেসে কাস্টম পেজ এর টেমপ্লেট যুক্ত করা যায়। আপনি যখন ওয়ার্ড প্রেস থেকে নতুন পাতা(new page , not new post ) তৈরি করেন দেখবেন ডান দিকে একটা অপশন আছে Attributes এবং তার ভেতর Templates . এখানে সব সময় Default template সিলেক্ট অবস্থায় থাকে। যদি আপনার থীমে কাস্টম টেমপ্লেট ফাইলে থাকে তাহকে লিস্টে থাকবে। ধরুন page.php ফাইলটা রিনেম করে নাম দিলেন myfile.php আর এই ফাইলে নিজের মতো করে কিছু কোড দিলেন। এখন ফাইলের ভেতর শুরুতে লিখে দিন

 < ?php
/*
Template Name: My Template
*/
?>

এখানে My Template বা যা নাম(এখানে ফাইল নেম আর টেমপ্লেট নেম একই হতে এমন নয়) দিবেন টেমপ্লেটের সেইটাই নতুন পাতা তৈরি বা সম্পাদনা করতে গেলে ডান দিকে Attributes এ Template লিস্টে দেখাবে।

নোটঃ অনেক সময় দেখা যায় একটা কাস্টম পেজ আগে কাজ করতো কিন্তু হঠাৎ করে আর কাজ করছে না এবং কারণও বুঝতে পারছেন না। আপনি সঠিক ভাবেই Template লিস্ট থেকে সিলেক্ট করেছেন সেক্ষেত্রে টেমপ্লেট ফাইলটাতে টেমপ্লেট নাম পরিবর্তন করে নতুন কিছু দিন।

পরের দিন নতুন কিছু…

ট্যাগ:

ক্যাটাগরী: Tips and Tricks, wordpress

A poor or faster way to add wptinybn support to wp TinyMCEComments plugin

September 2, 20091 Comment

3 300x172 A poor or faster way to add wptinybn support to wp TinyMCEComments pluginOk let me at first tell why this post ?
I have a wp plugin named wptinybn which enables users to write in unicode bangla for different types of bengali keyboard in wp visual editor which is based on tinymce. Actually my wp plugin is based on my tinymce plugin tinybn. That means besides the wptinybn the tinybn plugin is a standalone tinymce plugin. So it should work with everywhere with tinymce. ok.. I am 25% done :)

There is another wp plugin named TinyMCEComments which enables wp users to write comments through tinymce editor. I am 50% done. Cool na ?

One of my reader asked me how to add the tinybn support to TinyMCEComments. I just check that plugin’s code and I have that plugin installed in my own blog too though not enabled! Yes my answer is yes … that means it’s possible. It can be done in different ways. As a quick thinking I am giving a poor or faster (whatever u think) way to do that. I am 75% done… wait a bit man.

Download the wptinybn and TinyMCEComments plugin and install them. (if u want not to install wptinybn to do that then it’s ok, I mean no dependency). Check wptinybn(unzip first!) folder and you should find a folder in it named “banglafkb”.Copy this and paste in wp-includes/js/tinymce/plugins folders in your blog wp installation. Done ? ok now …

hmm now you have to be more brave to edit the TinyMCEComments plugin… not much in deed. Open file tinyMCEComments.php and find the word “pls”. Stop to it’s first occurance the word will be like $pls and it’s a array and here parts of code is like

$pls = array('separator','bold','italic','underline','strikethrough','justifyleft','justifycenter','justifyright','justifyfull','bullist','numlist','outdent','indent','cut','copy','paste','undo','redo','link','unlink','cleanup','help','code','hr','removeformat','sub','sup','forecolor','backcolor','charmap','visualaid','blockquote','spellchecker','fullscreen');

now place // before this line and it will be like bellow

//$pls = array('separator','bold','italic','underline','strikethrough','justifyleft','justifycenter','justifyright','justifyfull','bullist','numlist','outdent','indent','cut','copy','paste','undo','redo','link','unlink','cleanup','help','code','hr','removeformat','sub','sup','forecolor','backcolor','charmap','visualaid','blockquote','spellchecker','fullscreen');

we just kept the old code .
now in new line put this bellow code

$pls = array('separator','bold','italic','underline','strikethrough','justifyleft','justifycenter','justifyright','justifyfull','bullist','numlist','outdent','indent','cut','copy','paste','undo','redo','link','unlink','cleanup','help','code','hr','removeformat','sub','sup','forecolor','backcolor','charmap','visualaid','blockquote','spellchecker','fullscreen','banglafkb');

If you check the above code what I have added new here ? just that ,’banglafkb’

I am 90% done. Now to to your admin panel activate tinymcecomments plugin then from menu Settings go to it’s(that plugin’s) setting page and check (if you done above copy pase and code editing) ‘banglafkb’ is in the button list and in the available plugin list. Just click both banglafkb to add from button list and plugin list. For button list click seperator before banglafkb that will be make a | seperator in editor. Now save this new option and check your comment form.

Angry one me ? You have done every thing properly but nothing new in the editor and u don’t see any change in the preview editor int the plugin options page. Don’t worry. The plugin keeps the setting in cache for 10 days. So to get the changes within one sec just open the tinyMCEComments.php file and pls check from top few liens code

there is a line like
$mcecomment_expiresOffset = 3600 * 24 * 10; // Cache for 10 days in browser cache
make this line comment I mean like
//$mcecomment_expiresOffset = 3600 * 24 * 10; // Cache for 10 days in browser cache
and now put a new line bellow it like
$mcecomment_expiresOffset = 1; // Cache for 1 sec in browser cache

now save this file and check the option’s page’s preview editor.

I think I am 100% done now. mu ha ha.

Oh I forgot to say currently I am working on a joomla plugin to make the dates in bangla for front end for articles, actually it will work with com_content …hope to release this on the eid-durga puja vacation.

Again here is some screenshot(one is above) of this post’s summary.MCEComments Options ‹ Let’s start again… — WordPress_1251930556673MCEComments Options ‹ Let’s start again… — WordPress_1251930589424MCEComments Options ‹ Let’s start again… — WordPress_1251930628482

Tags: , , ,

Category: wordpress, wordpress plugin

tinybn for jce as a joomla plugin

August 8, 20094 Comments

Dear Friends,

I know there is no update on tinybn for many days and it has so many bugs but I am not gone yet ! heh heh. I think who are very familiar with joomla and it’s content editor tinymce, are also familiar with jce(joomla content editor), a joomla conent editor based on tinymce with lots of feature. You can get jce here. Please check their donwload section to download the jce component and jce plugin/mambot(editor).

hmm, please don’t get sleep … I just made a plugin for jce to use my tinybn plugin directly in jce. No manuall install needed , I mean editing files to work with default tinymce.
So , here is the download file of tinybn for jce.

zip tinybn for jce as a joomla plugin  tinybn for jce based on tinymce3.x (16.1 KiB, 324 hits)



How to install:
1. Install jce component (that will help you to modify or control jce editor and install new plugin and much more)
2. Install jce plugin
3. Now install tinybn plugin for jce. Go to Administrator-> Components-> JCE Administrations-> Install (see screenshot bellow)
4. Now browser the downloaded zip file and install it.

tinybn for jce as a joomla plugin

that’s it.
Install finish :) . Ok now go to article manager and try to open/write any new article. I think you are intelligent enough to make your editor default to jce or even disabled tinymce from plugins. If jce is your current editor and you have install the tinybn for jce according to instruction then you should see like bellow. Select keyboard and type in diff bengali layout.

tinybn for jce as a joomla plugin

mu ha ha…waiting for your feedback.

Tags: , , , ,

Category: Java script, Joomla, Joomla Extention

Adding no follow for links in wp comments

July 23, 20099 Comments

Don't Follow MeOne of my senior brother just asked me, how to add no follow rel for comments in wordpress. May be there is plugin for this. Look to my code :)
How to use:
1.Open the functions.php file in ur current theme and put these code within php tags.

What it will do:
1. Will add ‘no follow’ as rel in url , if comment contains any url.
2. Will ad ‘external’ as rel in url , if comment contains any url.
3. Will add target=”_blank” in comment author’s url so that their web url open’s in new window/new tab as in browser settings
4. Will add target=”_blank” to url, if comment contains any url
5. Wp adds ‘no follow’, ‘external’ rel in comment author’s url by default. So we don’t need to add this :P

Tips:
1.If possible upgrade to wp2.8.2

      function nofollow($text) {
	        $text = preg_replace('/<a /i','<a rel="nofollow external" ',$text);
	        $text = preg_replace('/<a /i','<a target="_blank" ',$text);
	        return $text;
    }
    function targetblank($text){
    		$text = preg_replace('/<a /i','<a target="_blank" ',$text);
	        return $text;
    }

    add_filter('comment_text', 'nofollow');
    add_filter('get_comment_author_link','targetblank');

any question ask me :)
p.s.: post image is just for fun :P

BTW, are you afraid of editing your functions.php ? Ok, no problem you can add the above piece of code using the bellow wp plugin.

zip Adding no follow for links in wp comments  Wp nofollow plugin for comment (997 bytes, 237 hits)


Duh, you are totally unhappy with this post, na ? You can to treat your commentors with “cake and cook”, ok no problem.Just forget my post and read this blog post …“The Single, Most Profound Way To Thank Your Commenters”.
Happy now ?

Tags: , ,

Category: Wordpress themes, wordpress, wordpress plugin

Tinybn for wordpress

July 22, 200914 Comments

Yah, I know my developed tinybn (an ekushey project ,  tinymce plugin to write bangla in tinymce editor) has so many bugs and even I will recommend not to use in any live :P . But we are crazy to write bangla in web in any condition… heh heh.. hmm I didn’t get time to update the scripts. Though updated them to make compatible for tinymce3.x. Yes, I am so lazy …I didn’t udpate the lastest version in ekushey :(

Even I made a plugin for wordpress to use this plugin in wordpress editor in Visual mode (that means tinymce is enabled :D ).hmm I didn’t release this too. Let me release this for every body. Please keep this mind that it has bugs, yes it has so many bugs but I will be happy if ppl use this and give me feedback so that I can update this when I am free.

Let me show how the tinybn plugin in wordpress will show [ Screenshot taken from my blog,wp2.8.2]
wptinybn 300x109 Tinybn for wordpress

How to use:
1. Download the zip given here for download and then unzip.
2. Copy the folder wp_tinybn_fixed to your wodpress plugin dir.
3.Activate the plugin
4. Try to write any new post/page in visual mode
Licence: GPL2
Download:

zip Tinybn for wordpress  Wp tinybn plugin 2.0 (20.6 KiB, 322 hits)


Any kind of negative and positive comment/feedback is welcome :)

update:
version 2.1 released
1. Fixed bug for js if the language mode is in bangla :P . That was my mistake to migrate the plugin from tinymce2.x compatible to 3.x. I forgot to change the language file setting for bangla language and I didn’t use this plugin while bangla is active in backend :( . Oh I have to fix same thing for jce version of tinybn.
2. Special thank to Hasan

Tags: , ,

Category: wordpress, wordpress plugin

My last 4/5 months project updates

July 20, 20098 Comments

It’s many days I didn’t write any thing here. I am not lost yet ! heh heh really I am not lost. Within last 4/5 months I did lots of projects. I said in many place that I started my professional career in jan 2008 and then it was hampered by so many things. I back to work again 4/5 months ago and now working as a full time freelancer at home. Yes I like to work with full freedom though working from home has some bad sides. Let me introduce you with some of my last 4/5 months projects. Hei ! I am really and here every thing is in brief.

ISLAM TRIBUNE_1248087112584Time.com clone (look and feel) using wordpress: Though time.com changes their layout frequently, I made a clone of it’s interface using wordpress, I mean the theme of wordpress. Here is snapshot of that. Oh yes, at first I made it red as time.com and then changed the red color to greenish. It’s for islamtribune.com.

BBC NEWS_1248108686378
BCC.co.uk clone using wordpress: I mentioned in another post that I made a theme for wordpress with same look and feel of bbc.co.uk. It’s front page is like bbc.co.uk and innner pages are like news.bbc.co.uk . sexy na ? heh heh.. wana see demo. check here. Here is screenshot.

secondbilly 300x234 My last 4/5 months project updatessecondbilly.com clone of mobile.de: A german site for furniture market. It’s using  joomla and market place component , though it’s customized too much. The main marketplace component is customized as needed and some custom modules are developed to give support to the component in front end. It’s in german language :) Visit the site from here(http://www.secondbilly.com/).

Will update mores in another post :)

Tags: , ,

Category: Joomla, Projects

How to use timthumb in WP MU

June 4, 20092 Comments

I think to show the first image as thumb in wp front page or blog layout is very common for any theme. But to use it in wordpress mu version is not direct or need to do some hack or modify the normall process of adding timthub. Normally we upload images from wp media manager and use those in posts. In normal wordpress the upload dir is wp-content/uploads and files and images are uploaded to that directory. In wordpress mu version files are uploaded by user basis folder and for this wp-content/blogs.dir/userid is the uploaded dir for any image. here user id is named as folder name for each user. then wp-content/blogs.dir/userid/files. But when u browse the site the image link format is like http://yoursitename/files/year/month/image name but format is reshaped by the wp mu htacces which real physical path is like wp-content/blogs.dir/userid/files/year/month/image name.
…continue reading How to use timthumb in WP MU

Tags:

Category: Wordpress themes, wordpress, wordpress plugin

Problem in IE for simple_video_flash_player (Joomla module)

April 12, 20091 Comment

I think JW Player(flash player) by longtailvideo.com is well known to u all. There are so many extension for joomla, wordpress, drupal and other cms using this tool. Simple_video_flash_player is a joomla module to show flash and other videos. Today I used it with one of project. But after checking in ie6 I was tempered becuase it was showing a js error in ie and the modules config file I meant he xml file has not param to show module class suffix which is very important to style module using css. I searched google and got so many solution. Here is my code that helped to solve this issue in ie6.
…continue reading Problem in IE for simple_video_flash_player (Joomla module)

Tags:

Category: Joomla, Joomla Extention

Page title and pathway problem for rsgallery2

April 1, 2009Leave a Comment

I always like to share web related silly problems that I face in my works.
If u are a joomla fan and u like to make a image gallery in joomla then rsgallery2 can be ur better(to me it’s best) choise. But one thing that I faced in joomla1.5(don’t know about the condition in joomla1.x series) about rsgallery2 is it’s title and pathway problem when it’s just connected as component from menu I mean just when u go to rsgallery2 as from menu as a component it doesn’t show any breadcrumb(pathway) and pagetitle

I searched google and joomla forum for this but didn’t get much help actually. BTW, at this time the rsgallery2 site is down for maintenance. So I gave a try to fix this as I always do.

At first let me clear about the problem. When first time u will go to rsgallery2 as component, in this condition no gallery is selected and no items in any gallery ie, no gallery id or current gallery is as no gallery id

Not clear yet, check the code in com_rsgallery2\templates\meta\display.class.php and in function showRSPathWay()…To get it clearly u have to check this function dear

see this
if ( $gallery->id == $currentGallery && empty($item) )

this is true when just go to rsgallery2 because no items and both the gallery id is null and currentgallery id is null and
as it’s true the code is executed as $pathway->addItem($gallery->name );
but as gallery id is null then it’s doesn’t show any gallery name… isn’t it a bug huh ? that means pathway fails to show any thing for this condition and same problem in
function metadata() which shows the pagetitle for rsgallery2 and meta information.

Here is the code that I edited for those two functions

/**     * shows proper Joomla path     */	function showRSPathWay() {		global $mainframe, $mosConfig_live_site, $Itemid, $option;		// if rsg2 isn't the component being displayed, don't show pathway		if( $option != 'com_rsgallery2' )			return;		$gallery = rsgInstance::getGallery();		$currentGallery = $gallery->id;		$item = rsgInstance::getItem();		$galleries = array();		$galleries[] = $gallery;		while ( $gallery->parent != 0) {			$gallery = $gallery->parent();			$galleries[] = $gallery;		}		$galleries = array_reverse($galleries);		if( defined( 'J15B_EXEC' ) ){			// J1.0 method			foreach( $galleries as $gallery ) {				if ( $gallery->id == $currentGallery &amp;&amp; empty($item) ) {					$mainframe->appendPathWay($gallery->name);				} else {					$mainframe->appendPathWay('<a href="' . JRoute::_('index.php?option=com_rsgallery2&amp;Itemid='.$Itemid.'&amp;gid=' . $gallery->id) . '">' . $gallery->name . '</a>');				}			}			if (!empty($item)) {				$mainframe->appendPathWay( $item->title );			}		}		else{			// J1.5 method			$pathway =&amp; $mainframe->getPathway();			/*Edit by manchumahara*/			$document	=&amp; JFactory::getDocument();			$params = &amp;$mainframe->getParams();			$menus	= &amp;JSite::getMenu();			$menu	= $menus->getActive();			$pagetitle = '';			if (is_object( $menu )) {				$menu_params = new JParameter( $menu->params );				if (!$menu_params->get( 'page_title')) {					$pagetitle = JText::_('MRSGALLERYTITLE');  //loading it from language file				}				else $pagetitle =$menu_params->get( 'page_title');			} else {					$pagetitle = JText::_('MRSGALLERYTITLE');  //loading it from language file			}			//$pagetitle = $mainframe->getPageTitle();			foreach( $galleries as $gallery ) {				if ( $gallery->id == $currentGallery &amp;&amp; empty($item) ) {					if($gallery->id== 0){						//gallery id zero and no items ie, if menu is link to component directly						$pathway->addItem($pagetitle);					}					else {						//gallery id not zero,ie gid id ok but no items in this gallery						$pathway->addItem($gallery->name );					}				} else {					$link = 'index.php?option=com_rsgallery2&amp;gid=' . $gallery->id;					$pathway->addItem( $gallery->name, $link );				}			}			/*Edit by manchumahara*/			/*Edit by manchumahara*/			if (!empty($item)) {				$mainframe->appendPathWay($item->title );				//$mainframe->appendPathWay( $title );			}			else {$mainframe->appendPathWay($pagetitle);}			/*Edit by manchumahara*/		}	}	/**	 * insert meta data into head	 */	function metadata(){		global $mainframe, $option;		// if rsg2 isn't the component being displayed, don not append meta data		if( $option != 'com_rsgallery2' )			return;		/*Edit by manchumahara*/		$document	=&amp; JFactory::getDocument();		$params = &amp;$mainframe->getParams();		$menus	= &amp;JSite::getMenu();		$menu	= $menus->getActive();		$pagetitle = '';		if (is_object( $menu )) {			$menu_params = new JParameter( $menu->params );			if (!$menu_params->get( 'page_title')) {				$pagetitle = JText::_('MRSGALLERYTITLE');  //loading it from language file			}			else $pagetitle =$menu_params->get( 'page_title');		} else {				$pagetitle = JText::_('MRSGALLERYTITLE');  //loading it from language file		}		/*Edit by manchumahara*/		$title = $this->gallery->get('name');		$description = htmlspecialchars(strip_tags($this->gallery->get('description')), ENT_QUOTES );		$item = rsgInstance::getItem();		if ($item != null){			$title .= ' - ' . $item->title;			$description .= ' -  ' . htmlspecialchars(strip_tags($item->descr), ENT_QUOTES );		}		/*Edit by manchumahara*/		if($title == ''){ $title = $pagetitle;}		/*Edit by manchumahara*/		$mainframe->setPageTitle( ' '. $title );		$mainframe->appendMetaTag( 'description',  $description );	}

BTW, as if there is nothig set as pagetitle from menu then I showed it from language file and for this I made an entry in language file as like this. Open en-GB.ini file and put this line at the end
MRSGALLERYTITLE = RSGallery2

Tags:

Category: Joomla

How to make menu like news.bbc.co.uk

March 18, 2009Leave a Comment

bbc 300x296 How to make menu like news.bbc.co.ukNow a days I am a great fan of wordpress. Recently I have done some projects on wordpress and getting expert day by day :P heh heh.

This post about how can we make menu in wordpress like news.bbc.co.uk. Now a days some clients want clone sites. They don’t think about all the functionality but the look and feel clone :) .
So to clone the menu like news.bbc.co.uk we what we need:
1. wp function wp_list_categories(args)
2. CSS to give look and feel like news.bbc.co.uk

Before we start let’s check what we are going to do:
here is the image that we are going to make or the menu that we are doing to make using wp_list_categories function and css. Look this menu is 2 level deep. To keep the theme clean u can make a function in functions.php file like bellow and just call the function in theme where u want to place the menu.
Look here we are using echo= 0 as want to just return the output from this function. and depth =2 as we want to make two level hirarachy… check others params that I have used. To know details about the template tag wp_list_categories pls check this page in wp codex.

Now what we need is to apply the css to style the menu like news.bbc.co.uk… one thing to keep in mind. When u will browse through the category I mean u click the any category from the menu and posts will be shown using category.php template then active category will get an extra class automatic which is helpfull to highlight using css but if u browse any single.

function get_leftcatmenu(){
$excludecats = array();
$excludecats = array(1,2,3); //categories to exlclude
//or
//$includecats = array ();
//$includecats = array(1,2,3); //categories to include

/*
// same thing can be done using a simple plugin and saving the categories in option table , bellow code is for comma seperated cat list
$excludecats = explode(',', get_option('bbcnews_leftmenucid'));
$excludecats = implode( ",",$excludecats);
*/
/*
$includecats = explode(',', get_option('bbcnews_leftmenuscid'));
$includecats = implode( ",",$seccats);

//sample code to exclude
return wp_list_categories('orderby=name&amp;amp;amp;style=list&amp;amp;amp;hide_empty=0&amp;amp;amp;show_count=0&amp;amp;amp;title_li=&amp;amp;amp;exclude='.$excludecats.'&amp;amp;amp;hierarchical=true&amp;amp;amp;depth=2&amp;amp;amp;echo=0');

// sample code to inlclude
return wp_list_categories('orderby=id&amp;amp;amp;style=list&amp;amp;amp;hide_empty=0&amp;amp;amp;show_count=0&amp;amp;amp;title_li=&amp;amp;amp;include='.$includecats.'&amp;amp;amp;hierarchical=true&amp;amp;amp;depth=2&amp;amp;amp;echo=0');
*/
}

post we need the hightlight the category in the menu to which the single post belongs to. But to make this happen that adding an extra class to the menu to make active while browsing any single posts I have used a plugin :) named “Show Active Category (while browsing a post)“. Note if any post belongs to more one category then it will add extra active class to each category.

Uff….now check the css code that I used:
Note: this css code works fine in ff3 and ie6 and I have no interest with other browser at this moment.
Code to use in theme:

<ul class="catmenu">
<li class="<?php if (is_home()){ echo"> home"><a href="<?php echo get_option('home'); ?>">News Front Page</a></li>
</ul>

and code to add in style.css

ul.catmenu li{ background-color:#E5E5E5; margin-bottom:2px;}
ul.catmenu li a{ text-decoration:none;  line-height:19px;  font-size:11px; font-weight:bold;  padding:2px 0  2px 5px; color:#1F527B; vertical-align:middle; }
ul.catmenu li ul.children li a{ text-decoration:none; line-height:19px; font-family:9px; font-weight:normal; padding:2px 0  2px 5px; vertical-align:middle;}
ul.catmenu li:hover{ background-color:#D8D8D8;}
ul.catmenu li.current-cat{ background:#665F6E url(images/v3_square_rb.gif) repeat-y scroll right top;}
ul.catmenu li.current-cat:hover{ background-color:#665F6E;}
ul.catmenu li.current-cat a{ color:#FFFFFF;}
ul.catmenu li a:hover{ text-decoration:underline;}
ul.catmenu li ul.children{ background-color:#D3D3D3; display:none;}
ul.catmenu li ul.children li{ margin-bottom:0px;}
ul.catmenu li.current-cat-parent{ background:#665F6E;}
ul.catmenu li.current-cat-parent a{ color:#FFFFFF;}
ul.catmenu li.current-cat-parent ul li a,ul.catmenu li.current-cat ul li a{ color:#1F527B;}
ul.catmenu li.current-cat-parent ul li.current-cat{ background:#C0BFBF url(images/v3_square_rb.gif) repeat-y scroll right top;}
ul.catmenu li.current-cat ul.children,ul.catmenu li.current-cat-parent ul.children { display:block; background-color:#D3D3D3; }

ul.catmenu li.current-cat-parent ul li.current-cat a{ font-weight:bold; color:#1F527B;}

have not enogh time to discuss what the above css code do but it took me more than 1 hr to write the above css perfectly :( . If u are familiar with the abc of css then u will get the css code easily.

BTW, u need one image in the images folder and here is link for that image . Copy and paste the image in images folder. Pls keep in mind about the copy right of the image. Here the main thing that I wanted to highlight that how to make clone of any “look and feel” with own creativity that is what I actually did here.

Another screenshot:

How to make menu like news.bbc.co.uk

Tags:

Category: Wordpress themes, wordpress

feedback