12
Comments

joomla native drop down menu

• Adding joomla native modal to frontend
• Using wordpress native thickbox
• জুমলাতে নেটিভ টুলটিপ এর ব্যবহার
• Home made tab and slider module for joomla1.5

Ok then let’s move for how we can use the main menu module as ‘top to bottom‘ drop down menu like the joomla admin panel top menu. we will work on default template of joomla1.5

Adding javascript file

Create a new folder named js in default template like this templates\rhuk_milkyway\js

Now copy two js files from admin default template from this location administrator\templates\khepri\js or you can just copy the js folder from admin default template khepri to front end default template rukh_milkway. That’s it. Btw, pls check you copied at least two files named menu.js and index.js. Now add the follow two lines in index.php file of default template before </head> tag like bellow

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/menu.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/index.js"></script>
</head>

Adding CSS or style code

Open template.css file from your default template css folder i.e., templates\rhuk_milkyway\css and put this bellow css code at last or somewhere.

#menu, #menu ul, #menu li { margin: 0; padding: 0; border: 0 none; }
#menu       { position:relative; z-index: 100;}
#menu li    { float:left;  position:relative; list-style: none; display: inline;}
#menu li a  { display:block; white-space: nowrap;  }
#menu li li { /*width: 100%;*/ clear: both;  /*FF 1.0.7 needs this */  }
#menu li ul { visibility: hidden; position:absolute; }
#menu li li ul {  top: 0; left: 0; }
#menu li.hover ul               {  visibility: visible; }
#menu li.hover ul li ul 		  {  visibility: hidden;  }
#menu li.hover li.hover ul      {  visibility: visible;  left: 100%; }
/* ---- Menu layout -------------------------- */
#menu li {
	border-left: 1px solid #fff;
	border-right: 1px solid #d8d8d8;
}
#menu li li { border: 0;}
#menu ul    { border: 0.1em solid #ccc; background: #f6f6f6 url(../images/bg-menu.gif) repeat-y left;}
#menu ul li.node { background: transparent url(../images/j_arrow.png) no-repeat right 50%; }
#menu ul li.separator { background: #DDE1E6 url(../images/bg-menu.gif);  height: 1px;  }
#menu a, #menu div {
	padding: 0.35em 1em 0.35em;
	margin: 0 1px 0 1px;
	color: #333333;
	line-height: 1.6em; vertical-align: middle;
	font-size: 11px; font-weight: bold; text-decoration: none;
	cursor: default;
	background-repeat: no-repeat; background-position: left 50%
}
#menu li.disabled a { color: gray; }
#menu ul a {
	font-size: 11px;
	font-weight: normal;
	padding-left: 25px;
	padding-right: 20px;
	line-height: 1.2em;
}
/* 1 level - hover */
#menu li.hover a {  background-color: #E7EDDF; border-left: 1px solid #6D9D2E;  border-right:1px solid #6D9D2E; margin: 0; }
/* 2 level - normal */
#menu li.hover li a { background-color: transparent; border: 0 none;   margin: 2px;  }
/* 2 level - hover */
#menu li.hover li.hover a { background-color: #E7EDDF; border: 1px solid #6D9D2E;  margin: 1px;   }
/* 3 level - normal */
#menu li.hover li.hover li a { background-color: transparent; border: 0 none;   margin: 2px;  }
/* 3 level - hover */
#menu li.hover li.hover li a:hover { background-color: #E7EDDF; border: 1px solid #6D9D2E;  margin: 1px;  }
/* submenu styling */
#submenu {
	list-style: none;
	padding: 0;
	margin: 0;
}
#submenu li {
	float: left;
	padding: 0;
	margin: 0;
}
#submenu li a,
#submenu span.nolink {
	cursor: pointer;
	padding: 0px 15px;
	border-right: 1px solid #ccc;
	font-weight: bold;
	color: #0B55C4;
	line-height: 12px;
	height: 12px;
}
#submenu span.nolink {
	color: #999;
}
#submenu a.active,
#submenu span.nolink.active {
	color: #000;
	text-decoration: underline;
}

I collected this css code from admin template khepri template css file. So we are still using the native resources

Configure Menu module

If you are using default template then the topmenu is published in user3 position . So go to module manager and find tehe module for top menu published in user3 position and set configuration like bellow screenshots.

Menu module configuration

Changing template code to accomodate for our new style top menu

In your rukh_milkway default template open the index.php file fine a line near this html code <div id=”tabarea”> . Sorry I can not give line number exactly now as I changed my default template many times Here is the code used in defailt templte and I make the comment except the module include line.

<!--div id="tabarea">
	<div id="tabarea_l">
		<div id="tabarea_r">
			<div id="tabmenu">
			<table cellpadding="0" cellspacing="0" class="pill">
				<tr>
					<td class="pill_l">&nbsp;</td>
					<td class="pill_m">
					<div id="pillmenu"-->
						<jdoc:include type="modules" name="user3" />
					<!--/div>
					</td>
					<td class="pill_r">&nbsp;</td>
				</tr>
				</table>
			</div>
		</div>
	</div>
</div-->

You can use a simple line for the replacement of the above codes and fix your css as u need like this

<div class="topmenu">
   <jdoc:include type="modules" name="user3" />
</div>

Hei, we are about to done

Changing a core file of main menu module

Yes I am not happy any more at this point as we going to change a line in a core file but what to say … if we want to do something great we can do a little hack to core and shout like “hei ! I don’t care to hack core if I need ”
I am sorry I just forgot that we can ovverride the view part of any module and will do this now. Just check if there is any folder in your template named “html”, if not then create one. now created a folder in it named “mod_mainmenu” and then copy modules\mod_mainmenu\tmpl\default.php and modules\mod_mainmenu\tmpl\index.html file from this location and paste in the new created folder mod_mainmenu ie, template\{yourtempalte folder}\html\mod_mainmenu

and now
open file modules\mod_mainmenu\tmpl\template\{yourtempalte folder}\html\mod_mainmenu\default.php and look for near line 36 and change this line to

	if (($node->name() == 'li') && isset($node->ul)) {
		$node->addAttribute('class', 'node parent');
	}

Pls notice that I added an extra class name ‘node’ in 2nd line. that what we need exactly to use the core css file and js.

Here is another screenshot of the top menu that we just made.

joomla native drop down menu2

0
Comments

Hei! it’s bengali unicode text, This post is wrriten for amaderprojukti forum.
অনেক দিন বাংলায় ব্লগ বা টিপ্স কিছু লেখা হয় না। আজকের বিষয় আমার অনেক গুলো গার্লফ্রেন্ড এর ভেতর অন্যতম “জুমলা”। যদিও আজকের লেখাটা জুমলার একটি গোপন সুন্দর দিক নিয়ে আর তা হলো জুমলা ১.৫ এর নেটিভ টুলটিপ।
প্রথম একটি ছবি দেখায়ঃ

এডমিন প্যানেলে কোন কিছু কনফিগারেশনে ঢুকলে বা অনেক সময় কোন লিঙ্কএ মাউস হোভার করলে উপরের মতো টুলটিপ দেখায়। একই রকম টুপটিপ চাইলে আমরা ফ্রন্ট এন্ড এ ব্যবহার করতে পারি আর তার জন্য এক্টিভ টেমপ্লেটে দরকার সামান্য পরিবর্তন, সেই পরিবর্তন কিভাবে করা যায় তা নিয়েই আজকের আলোচনা। পরের ছবিটি ফ্রন্ট এন্ড এর।

কিভাবে ফ্রন্ট এন্ডে টুলটিপ ফিচার যুক্ত করবেনঃ
টুলটিপ ফিচার যুক্ত করার জন্য আপনাকে প্রথম টেমপ্লেটের ইন্ডেক্স ফাইল(index.php) এ একটি লাইন যুক্ত করতে হবে। যদি আপনি ডিফল্ট টেমপ্লেট ব্যবহার করেন তাহলে rhuk_milkyway হচ্ছে আপনার টেমপ্লেট এর নাম, এর ভেতর index.php ফাইলটি ওপেন করুন কোন এডিটরে, এখন হেড ট্যাগ() এর আগে

</head>

নিচের লাইনটি বসিয়ে দিনঃ

<?php
JHTML::_('behavior.tooltip');
?>

উপরের কোড টুকু যা করবে তা হলো কিছু জাভা স্ক্রিপ্ট এর কোড তৈরি করে দেবে যা আপনাকে টুলটিপ যুক্ত করতে সাহায্য করবে।

<script type="text/javascript">
    window.addEvent('domready', function(){
       var JTooltips = new Tips($$('.hasTip'),
       { maxTitleChars: 50, fixed: false});
    });
</script>

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

আমি <span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " class="hasTip">আমাদের প্রযুক্তি</span> ফোরামে এখন একটি টিউটোরিয়াল লিখছি।

এখানে প্রথমে

<span>আমাদের প্রযুক্তি</span>[/quote]
এরপর স্প্যান ট্যাগে এ টাইটেলে আমি বিশেষ ভাবে কিছু লিখেছি, এই টাইটেল ফ্রন্ট এন্ডে থাকবে না যা আসলে টুলটিপে পরিবর্তিত হবে। এখন খেয়াল করুন আমি ব্যবহার করেছি ::   এই রকম একটা সেপারেটর। এখানে :: এর আগের অংশ হবে টাইটেল আর ::  এর পরের অংশ হবে বর্ণনা।
[code='html']<span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " >আমাদের প্রযুক্তি</span>[/quote]
তারপর
[code='html']<span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " class="hasTip">আমাদের প্রযুক্তি</span>[/quote]
এখন যা করেছি স্প্যান ট্যাগে বসিয়ে দিয়েছি একটা ক্লাস নামে "hasTip",
তাহলে পুরা লাইন হবে নিচের মতোঃ
[code ='html']
আমি <span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " class="hasTip">আমাদের প্রযুক্তি</span> ফোরামে এখন একটি টিউটোরিয়াল লিখছি।

এখন যদি আপনি আর্টিকেলটা ফ্রন্ট এন্ডে দেখেন তাহলে নিচের ছবির মতো দেখাবে যদি "আমাদের প্রযুক্তি" লেখার উপর মাউস ধরেন।

সব কিছু ঠিক ঠাক মতো হবার জন্য আপনাকে আরো একটা জিনিস চেক করতে হবে আর তা হলো টেমপ্লেট এর template.css ফাইলে এ নিচের মতো করে css কোড যদি না থাকে তাহলে বসিয়ে দিতে হবে।

/* Tooltips */
.tool-tip {
   float: left;
   background: #ffc;
	border: 1px solid #D4D5AA;
   padding: 5px;
   max-width: 200px;
}
.tool-title {
   padding: 0;
   margin: 0;
   font-size: 100%;
   font-weight: bold;
   margin-top: -15px;
   padding-top: 15px;
   padding-bottom: 5px;
   background: url(../images/selector-arrow.png) no-repeat;
}
.tool-text {
   font-size: 100%;
   margin: 0;
}

আর templates\system\images এই লোকেশন থেকে selector-arrow.png এই নামের ফাইলটা কপি করে আপনার টেমপ্লেট এর ইমেজ(templates\rhuk_milkyway\images) ফোল্ডারে পেস্ট করতে হবে। চাইলে কাস্টম টেমপ্লেটে একই ভাবে টুলটিপ যুক্ত করা যাবে।

আগামী পর্বে এটার আরো এডভান্সড ফিচার নিয়ে আলোচনা করবো।

6
Comments

I think my post title is not clear and it’s really not possible to tell every thing in just a simple post title . Ok, I am taking about:
1. WordPress
2. Category menu in wordpress using wp_list_categories()

If you make a wordpress menu using category listing in wordpress then the html code will be like this

WordPress menu as category list(click image to see full)

In the above picture , you see same thing twice , firt one
1. when we are not in any category page(category archive page)
2. when we are in a category archive page , the active category list gets a extra class name “current-cat”
So my post is about when we are browsing any single post how can we mark the the category as “current-cat” that post belongs to so that the active category list can be styled using css.

So to do that I got a plugin (please check here) but i am not happy as the plugin put active class for anchor tag… Please check the plugin code.

function show_active_category($text) {
	global $post;
	if( is_single() ) {
		$categories = wp_get_post_categories($post->ID);
		foreach( $categories as $catid ) {
			$cat = get_category($catid);
			if(preg_match('#>' . $cat->name . '</a>#', $text)) {
				$text = str_replace('>' . $cat->name . '</a>', ' class="active_category">' . $cat->name . '</a>', $text);
			}
		}
	}
	return $text;
}
add_filter('wp_list_categories', 'show_active_category');

and here is my version

function show_active_category($text) {
global $post;
if( is_single() ) {
$categories = wp_get_post_categories($post->ID);
foreach( $categories as $cat )
{
//var_dump($cat);
if(preg_match('#
	<li class="cat-item cat-item-'.$cat.'">#', $text))
{
$text = str_replace('</li>
	<li class="cat-item cat-item-'.$cat.'">', '</li>
	<li class="cat-item cat-item-'.$cat.' current-cat">', $text);
}
}
}
return $text;
}
add_filter('wp_list_categories', 'show_active_category');

you can put the above your in your functions.php file and no need to install an extra plugin.

That’s it.

2
Comments

Today I will show how to play with wordpress permalink. If you are just working with a fresh wordpress installation then certainly you need to do some work with wordpress permalink structure. Just check in admin left menu Settings->Permalinks
Here is first look of your default permalink structure. Check your post and page url is like:


Post: http://sitename.com/?p=N, where N = post id
Page: http://sitename.com/?page_id=N, where N = page id
Category: http://sitename.com/?cat=N , where N = category id
Tag: http://sitename.com/?tag=TAG SLUG, pls check bellow what is slug
Author:http://sitename.com/?author=N, where N = author id

Now, let’s change the permalink structure to any custom format… here I am choosing the Month and name format and see screenshot bellow

Oh, check another thing before and after changing permalink structure,if you are in edit more of any post or page, check bellow the subject box
For default permalink: there is a option “Change permalinks”
For custom permalink: there is a option “Edit”
Check the screenshot bellow:

Please check here what we are editing or getting automatic after saving first time(or auto save) the post … is called slug for that article, we use article name alias for joomla same way. if seo enabled in joomla then that alias is used. Ok ,now check after changing permalink to any custom format what happened to all permalinks like posts, page, author, category, tags etc. Let’s check
Post and Page will get as the screenshot above (example http://localhost/blog/2010/01/playing-with-wordpress-permalinkslug-quick-seo/)

Category: http://localhost/blog/category/category slug/
Tag: http://localhost/blog/tag/tag slug/
Author: http://localhost/blog/author/author username(nick name) is here/

Check here for category,tag, author etc the bold part we are telling base like catgory base, tag base or author base. and the italic part is slug, Sometimes that base is also called slug for simplicity.

Making post link .html
If think you cheked some wordpress site has post link as .html … more like static and more friend for google .. I mean search engines. No worry, it’s just easy. Put a .html in the custom permalink format of your post.
Just write this in custom field
/%year%/%monthnum%/%postname%.html
and my current blog post url is now
http://localhost/blog/2010/01/playing-with-wordpress-permalinkslug-quick-seo.html
Making the url more short
I think now our url got too long and sometimes that is bad for serach engines. So while we write blog post we can keep the title long(not more than 160 may be… 160 length is good for search engines) but we will edit post or page slug as short as possible. That the trick … taking specially care as do for your girl friend or your baby.
Oh another way we can make the url short… let’s change the permalink again. Let change custom permalink as
/%postname%.html
and my post link is more short now
http://localhost/blog/playing-with-wordpress-permalinkslug-quick-seo.html
for news site we can use like this

/newid%post_id%/%postname%.html
now link is like

So I think we played too much with post permalink and now we know how to change the post permalink as we need. Isn’t it easy ?

Chaning page link to .html
There is no easy way to change page link .html like post from wordpress but we can do it via a plugin, acutally wordpress has that support to change permalink for page or others … so plugin authors can hack easily. To change page link like .html you can use this pluginCustom Page Extensions

Working with Category,Tag and Author base
Let’s play with category and tag base that is available in wp permalink.

So now tag link be like
http://localhost/blog/postbytag/tag slug
Category link
http://localhost/blog/topics/category slug

Hei we are not finished yet. How about removing category base from category permalink ?
let me explain if you don’t change category base that means default is “category” then
http://sitename.com/category/category slug
and for child cateogory
http://sitename.com/category/parent category slug/child category slug
and now what I want to do is like bellow

http://sitename.com/category slug
http://sitename.com/child category slug


Yes we can do that I mean remove category base using plugin. I like to use No category parents. I have tested in a client’s site and it’s working fine.

Yap we can change author slig(base actually) too ,,, not remove, just change default author base “author” to any custom word like “blogger”, “contributors” etc.

Old: http://www.sitename.com/author/manchupagla/
New: http://www.sitename.com/contributors/manchupagla/


For this so many wordpress plugins are available. But I like to use Author Slug, in codex check here. You can search codex for such plugins.

Heh heh talked too much today. I will recommend you to use another two plugins

• One for quick SEO ALL in one SEO
• For faster loading/caching WP Super Cache

Note: Check this post in bengali in amaderprojukti forum from here.

thank you for having patience to read this blog. Don’t forget to click share in social network and I like donation(check right col donation box )

1
Comments

Hello! 2010 is just knocking at door .Hope to write lots of blog with my day2day thinking, learning and the problems I face every day.

Let me clear about this blog post: I think, you know that in wordpress we can add new coasdl in posts listing area. Check the bellow image of my post edit panel/listing(http://(yoursitename)/wp-admin/edit.php)

If you check the plugin there is an extra col named GT Status. It’s here because I have installed the plugin GT-post-approval. Check this in wordpress plugin repository from here. Cool na ? Let me show another screenshot after enabling another nice plugin named “Simply Show IDs”. Check that plugin wordpress plugin repository from here. This plugin will add another extra col to show any post id so that we(at least normal blog user who doesn’t know how to pick post id) can pick post id easily. Actually this plugin does

“Simply shows the ID of Posts, Pages, Media, Links, Categories, Tags and Users in the admin tables for easy access. Very lightweight.”

Check there are two extra col now.. ignore the blug arrow and messed up id with text “Reject”. Let me now explain why this messed up…

Conflict between “GT-post-approval” and “Simply show ids”

Actually it’s not conflict but bug og gt-post-approval plugin(latest Version: 0.3 b0.3). let me show how it’s hooking the post edit extra col. check near line 113.

// If current user is admin or editor
		if(current_user_can('edit_others_posts')){
			// Add the GT Status column
			add_filter('manage_posts_columns', 'gt_column');
			// Set the global array with the structure post_ID => gt_status, ...
			add_filter('the_posts', 'gt_post2status');
			// For each post in edit.php add a button approve/reject
			add_filter('manage_posts_custom_column', 'gt_return_status');
			// Add a CSS to emphasize the button approve
			add_filter('admin_head', 'gt_emphasize_to_aprove');

here I will highlight this filter function

// For each post in edit.php add a button approve/reject
add_filter('manage_posts_custom_column', 'gt_return_status');

Before I advance please in wordpress codex about add_filter and manage_posts_custom_column(no complete codex page yet but see this page for all filter/hook functions)
add_filter usage is like

<?php add_filter( $tag, $function_to_add, $priority, $accepted_args ); ?>

check the last param $accepted_args. it’s definition is
(integer) (optional) The number of arguments the function(s) accept(s). In WordPress 1.5.1 and newer. hooked functions can take extra arguments that are set when the matching do_action() or apply_filters() call is run.
Default: 1

So using this filter add_filter(‘manage_posts_custom_column’, ‘gt_return_status’); gt approve passed only one argument. But the hook manage_posts_custom_column action takes two parameter , column name and post id. here is gt approve plugin’s gt-return_status function

// Print a button approve/reject for the current post
function gt_return_status(){
	global $id, $post_gt_aproved;
	// If current post is approved (see gt_post2status() function)
	if($post_gt_aproved[$id])
		echo "<a href='edit.php?gt_reject=$id&amp;$_SERVER[QUERY_STRING]' class='edit'>".__('Reject').'</a>';
		// Note: I use also the query string for an easy redirect in the gt_redirect_after_change() function
	else
		echo "<a href='edit.php?gt_approve=$id&amp;$_SERVER[QUERY_STRING]' class='edit gtaprove'>".__('Approve').'</a>';
}

that means it’s doesn’t handle with column name and this function is called each time an unknown column is triggered and messed up with other plugin which works with extra column …. grrr. The funny thing is that plugin I mean the function gt_return_status() handle the post id in tricky way…. Please don’t get me wrong.. that plugin works great and prefectly but I am just trying to improve it.

This is how i modified that plugin
changing hook so that it takes two parameter and also priority is set

// For each post in edit.php add a button approve/reject
add_filter('manage_posts_custom_column', 'gt_return_status',10, 2);
function gt_return_status($cname,$id){
	global $post_gt_aproved;
	if ($cname == 'gt_column'){
		// If current post is approved (see gt_post2status() function)
		if($post_gt_aproved[$id]){
			echo '<a href="edit.php?gt_reject='.$id.'&amp;'.$_SERVER['QUERY_STRING'].'" class="edit">'.__('Reject').'</a>';
			// Note: I use also the query string for an easy redirect in the gt_redirect_after_change() function
		}
		else{
			echo '<a href="edit.php?gt_approve='.$id.'&amp;'.$_SERVER['QUERY_STRING'].'" class="edit gtaprove">'.__('Approve').'</a>';
		}
	}
}

Here is my total modification about this plugin.

<?php
/*
Plugin Name: GT Post Approval 0.3 Beta
Plugin URI: http://www.gt-globalwarming-awareness2007.org/wordpress/gt-post-approval-for-gt-globalwarming-awareness2007-wordpress-plugin/
Description: Add Approve/Reject buttoms visible just for administrators and editors in <a href='edit.php'>edit > posts</a>. Go to <a href='options-general.php?page=gt-post-approval.php'>Options > Approval</a> to choose where display not approved posts
Version: 0.3 b0.3
Author: Francesco Terenzani
Author URI: http://www.terenzani.it/
*/
//
// Self extension
//
if(function_exists('is_tag'))
	add_filter('gt_areas', 'gt_self_extension');
function gt_self_extension($array){
	$array['is_tag'] = 'Tags archive';
	return $array;
}
//
// Installation
//
// On activation of the plugin launch the install_gt_post_approval function below
register_activation_hook(__FILE__, 'install_gt_post_approval');
// Change the wp_posts table
function install_gt_post_approval(){
	global $wpdb;
	// If gt_status column do not exist
	if($wpdb->get_var("SHOW COLUMNS FROM $wpdb->posts LIKE 'gt_status'") != 'gt_status'){
		// Step 1, add gt_status column and set every post as approved (value 1)
		$wpdb->query("ALTER TABLE $wpdb->posts ADD gt_status INT( 1 ) NOT NULL DEFAULT '1'");
		// Step 2, change the default value of gt_status. New posts have to be approved
		$wpdb->query("ALTER TABLE $wpdb->posts CHANGE gt_status gt_status INT( 1 ) NOT NULL DEFAULT '0'");
	}
	// Unhelpful optiomisation 
	add_option('gt_opt', 'empty', '', 'no');
	// Set default options
	$_POST['gt-form'] = true;
	$_POST['is_'] = array('is_author' => true, 'is_search' => true, 'is_single' => true);
	$_POST['gt-level'] = 10;
	gt_save_options();
}
//
// The_Loop
//
// Change the where clause from the wp_query class using the show_only_gt_approved function below
add_filter('posts_where', 'show_only_gt_approved');
// Show only GT Approved posts
// Disable the filter in admin area, in single page and in user defined areas
function show_only_gt_approved($where){
	if(is_admin() || is_page() || is_custom_defined() )
		return $where;
	return 'AND gt_status = 1 '.$where;
}
// Return true if we are in a user defined page of wordpress
// I feel this function very cool 
function is_custom_defined(){
	$callback = get_option('gt_opt_callback');
	if(is_array($callback)){
		do
			if(call_user_func(current($callback)))
				return true;
		while(next($callback));
	}
	return false;
}
//
// Optimisation
//
// Set the global array $post_gt_aproved with the structure: [post_ID] => gt_status
// I use it to know the gt_status without any other query
function gt_post2status($post_query_results){
	global $post_gt_aproved;
	$post_gt_aproved = array();
	for($i = 0, $j = count($post_query_results); $i < $j; $i++)
		$post_gt_aproved[$post_query_results[$i]->ID] = $post_query_results[$i]->gt_status;
	return $post_query_results;
}
//
// Administration
//
// Change the admin area wp-admin/edit.php if current user is admin or editor
if(is_admin()){
	add_filter('init', 'gt_admin_status');
	function gt_admin_status(){
		global $wpdb;
		// If current user is admin or editor
		if(current_user_can('edit_others_posts')){
			// Add the GT Status column
			add_filter('manage_posts_columns', 'gt_column');
			// Set the global array with the structure post_ID => gt_status, ...
			add_filter('the_posts', 'gt_post2status');
			// For each post in edit.php add a button approve/reject
			add_filter('manage_posts_custom_column', 'gt_return_status',10, 2);
			// Add a CSS to emphasize the button approve
			add_filter('admin_head', 'gt_emphasize_to_aprove');
			// On click of approve/reject change the status in the database (value 1 -> approved/0 -> rejected)
			if(isset($_GET['gt_reject']) && is_numeric($_GET['gt_reject'])){
				$wpdb->query("UPDATE $wpdb->posts SET gt_status = 0 WHERE ID = $_GET[gt_reject]");
				gt_redirect_after_change();
			}
			elseif(isset($_GET['gt_approve']) && is_numeric($_GET['gt_approve'])){
				$wpdb->query("UPDATE $wpdb->posts SET gt_status = 1 WHERE ID = $_GET[gt_approve]");
				gt_redirect_after_change();
			}
		}
		// Auto approve a post if current user level is greater then X
		add_filter('wp_insert_post', 'gt_auto_approve');
	}
}
// Add the GT Status column
function gt_column($array){
	$array['gt_column'] = _('Post Status');
	return $array;
}
// Action function arguments: column name, post ID.
// Print a button approve/reject for the current post
function gt_return_status($cname,$id){
	global $post_gt_aproved;
	if ($cname == 'gt_column'){
		// If current post is approved (see gt_post2status() function)
		if($post_gt_aproved[$id]){
			echo '<a href="edit.php?gt_reject='.$id.'&amp;'.$_SERVER['QUERY_STRING'].'" class="edit">'.__('Reject').'</a>';
			// Note: I use also the query string for an easy redirect in the gt_redirect_after_change() function
		}
		else{
			echo '<a href="edit.php?gt_approve='.$id.'&amp;'.$_SERVER['QUERY_STRING'].'" class="edit gtaprove">'.__('Approve').'</a>';
		}
	}
}
// Redirect after change GT Status
function gt_redirect_after_change(){
	header('Location: '.preg_replace("/gt_(?:reject|approve)=[0-9]+[&]?/", '', $_SERVER['REQUEST_URI']));
	exit();
}
// CSS for admin area
function gt_emphasize_to_aprove(){
?>
	<style type='text/css'>.gtaprove{background:#adf;font-weight:bold}</style>
<?php
}
// Auto approve a post if current user level is greater then X
function gt_auto_approve($post_id){
	global $wpdb;
	if($_POST['post_status'] == 'publish' && $_POST['prev_status'] != $_POST['post_status']){
		$level = get_option('gt_opt');
		$level = $level['gt-level'];
		if($level > 0)
			if(current_user_can("level_$level"))
				$wpdb->query("UPDATE $wpdb->posts SET gt_status = 1 WHERE ID = $post_id");
	}
}
//
// Options
//
function gt_add_options_page(){
	add_options_page('GT Post Approval', 'Approval', 10, 'gt-post-approval.php', 'gt_options_page');
}
add_filter('admin_menu','gt_add_options_page');
function gt_options_page(){
	// On submit save options
	gt_save_options();
	$options = get_option('gt_opt');
	// Options checked are here
	$checked =& $options['is_'];
	$registered_inputs = gt_get_registered_options();
?>
	<div class="wrap">
		<h2>GT Post Approval</h2>
		<form method='post' action='?<?php echo $_SERVER['QUERY_STRING']?>'>
		<fieldset class="options">
			<legend>Not approved posts are visible just in: </legend>
			<?php foreach($registered_inputs as $input_name => $description){
				$checked[$input_name] = ($checked[$input_name]) ? 'checked="checked"' : null;
				echo <<<CODE
					<p>
						<label for="is_[$input_name]">
							<input type='checkbox' id="is_[$input_name]" name="is_[$input_name]" $checked[$input_name] /> $description
						</label>
					</p>
CODE;
			} ?>
		</fieldset>
		<fieldset class="options">
			<legend>Auto approve posts if current user level is: </legend>
			<p><label for='gt-level'>Range 0-10:
				<input type="text" size='2' id='gt-level' name='gt-level' value='<?php echo $options['gt-level'] ?>' /></label>
				<br /><em>0 or empty value to reject every post by default.</em></p>
			<p class='submit'>
				<input type='submit' name='gt-form' value='Update Options &raquo;' />
				<input type='hidden' name='gt-form' value='1' />
			</p>
		</fieldset>
		</form>
	</div>
<?php
}
function gt_save_options(){
	if(isset($_POST['gt-form'])){
		$registered_callbacks = gt_get_registered_options();
		if(is_array($_POST['is_']))
			foreach($_POST['is_'] as $is_what => $on)
				if($on && $registered_callbacks[$is_what])
					// I will run this functions in is_custom_defined()
					$callback[] = $is_what;
		update_option( 'gt_opt_callback', $callback );
		update_option( 'gt_opt', array( 'is_' => $_POST['is_'], 'gt-level' => gt_get_option_level() ) );
	}
}
function gt_get_registered_options(){
	return apply_filters('gt_areas', array ('is_author' => 'Author\'s archive', 'is_search' => 'Search results', 'is_feed' => 'Feeds', 'is_date' => 'Post per data archive', 'is_single' => 'Single post page'));
}
function gt_get_option_level(){
	if( is_numeric( $_POST['gt-level']) ){
		if ( $_POST['gt-level'] > 10 )
			return 10;
		if ( $_POST['gt-level'] < 0 )
			return 0;
		return $_POST['gt-level'];
	}
	return 0;
}
?>

Here you will get a great discussion about managing custom column in post edit screen. have a look please.

Good news I am coming with my own plugin about this concept of custom column in diff edit screen like posts, pages, tags etc. I think my plugin will increase usability in those places.

0
Comments

Post and Page Excerpt Widgets is a nice plugin to show post/page excerpt as as widget in sidebar position. You can download it from wp code from here. One I thing I noticed about this plugin is it has a common bug that I faced many times while using query_posts. When I use this query_posts it’s break some conditional loop like is_home(), is_category() etc but there is another function get_posts in wordpress that does the same thing but don’t have similar problem. Once I discussed about this problem in one of my old posts. Please check that posts for better sense from here is_home-is_single-is_category-is-not-working-in-wp!.

Let me focus to this writing again
As Post and Page Excerpt Widgets is using the query_posts function for custom query it make’s problem for conditional tags. Let me show u solution and it’s like my that posts.
In you theme functions.php add a new function if not exists yet

 function php4_clone($object) {
  	if (version_compare(phpversion(), '5.0') < 0) {
   		return $object;
  	} else {
   		return @clone($object);
  	}
 }

Now open the plugin file page-and-post-excerpt-widgets.php and search for string “query_posts”. I think you should find matching in two places. Let’s take care of them now.
before that line query_posts(‘page_id=’.$page_ID);
add this line

$query_backup = php4_clone($GLOBALS['wp_query']);

and after the while look that means
after this line endwhile; add

$GLOBALS['wp_query'] = $query_backup;

Do same thing for both matching. That will save u for not breaking any conditional tags like is_home() etc in your theme. I think wordpress should include such seucurity in core query_posts function so that it does not break the default wordpress’s The Loop.

Sometimes I can not find that why wordpress conditional tag is not working in my theme and that makes me really crazy !

Guys if you find this post help full then please take care the large social bookmark icon bellow

50
Comments

Change Log:

Update 14, January, 2010

WOW, This extension has been approved by JED Team. Pls visit it and place you rating.

Update 8, June, 2010(Must see)

• Fixed a bug for php error, it was a typo error
• Transition parameter was missing for slider, it’s fixed now
• Download file is updated! Please reinstall or update the files only. Changes are in the mod_simplejoomlatabslider.xml, mod_simplejoomlatabslider.php and helper.php file

If you check joomla1.5.x backend(joomla1.x had same) in any component or module configuration the right col accordian slider is common. In some components u should see tab too.To make such tab and slider is just so easy !

I think you are thinking about my post title, why I used the words “home made”. Because I am going to show you how u can make such a tab/slider module for front end just using joomla own resource. Joomla gives some execillent api to make html grid, tab, slider etc within a moment. JPane is such an api to make tab and slider. Here you will get some code example about how to make tab using JPane.

jimport('joomla.html.pane');
//1st Parameter: Specify 'tabs' as appearance
//2nd Parameter: Starting with third tab as the default (zero based index)
//open one!
$pane = &JPane::getInstance('tabs', array('startOffset'=>2));
echo $pane->startPane( 'pane' );
echo $pane->startPanel( 'Example Panel 1', 'panel1' );
echo "This is panel1";
echo $pane->endPanel();
echo $pane->startPanel( 'Example Panel 2', 'panel2' );
echo "This is panel2";
echo $pane->endPanel();
echo $pane->startPanel( 'Example Panel 3', 'panel3' );
echo "This is panel3";
echo $pane->endPanel();
echo $pane->endPane();

note: I thinkf or editor problem sample code may be mseesed up but the download module is ok

If you check this line
$pane = &JPane::getInstance(‘tabs’, array(‘startOffset’= >2));
here first parameter is about making tab, If you want to make slider then use like this
$pane = &JPane::getInstance(‘sliders’, array(‘startOffset’= >2));
startOffset should be 0 for normal uses. For quick access just check the file \jtest\libraries\joomla\html\pane.php (windows style path here ) for the api.

One problem is, if you want to use this tab/slider in front end u need to copy some css code from backend css file and it’s in administrator\templates\khepri\css\general.css from line 231 to line 288 and here is teh css code bellow that I found there.

/* pane-sliders  */
.pane-sliders .title {
	margin: 0;
	padding: 2px;
	color: #666;
	cursor: pointer;
}
.pane-sliders .panel   { border: 1px solid #ccc; margin-bottom: 3px;}
.pane-sliders .panel h3 { background: #f6f6f6; color: #666}
.pane-sliders .content { background: #f6f6f6; }
.pane-sliders .adminlist     { border: 0 none; }
.pane-sliders .adminlist td  { border: 0 none; }
.jpane-toggler  span     { background: transparent url(../images/j_arrow.png) 5px 50% no-repeat; padding-left: 20px;}
.jpane-toggler-down span { background: transparent url(../images/j_arrow_down.png) 5px 50% no-repeat; padding-left: 20px;}
.jpane-toggler-down {  border-bottom: 1px solid #ccc; }
/* tabs */
dl.tabs {
	float: left;
	margin: 10px 0 -1px 0;
	z-index: 50;
}
dl.tabs dt {
	float: left;
	padding: 4px 10px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	margin-left: 3px;
	background: #f0f0f0;
	color: #666;
}
dl.tabs dt.open {
	background: #F9F9F9;
	border-bottom: 1px solid #F9F9F9;
	z-index: 100;
	color: #000;
}
div.current {
	clear: both;
	border: 1px solid #ccc;
	padding: 10px 10px;
}
div.current dd {
	padding: 0;
	margin: 0;
}

feeling boring ? heh heh.

I have made a tab/slidder module using Jpane and the above css code. It’s just and I named it “mod_simplejoomlatabslider”. If you are interested to check my module download from bellow and let me know. But pls keep in mind that, it’s just simple tab/slider module  

Download

Installation

• Download & install like any other joomla module
• Enabel this module to any module position
• Write module position name to load other modules as tab
• Publish other modules which u want to put in that above mentioned module position.

Check my screenshot of setting bellow:

thank guys

Oh here another screenshot of slider style of my module

1
Comments

let’s send ajax request in wordpress using wpnonce

Hei, I am not going to discuss what is wpnonce and why you should use this in your plugin or how important to use this to secure your plugin
But here I am going to discuss how you can use wpnonce in ajax request, I mean if your plugin handles ajax request.
Steps that we need to follow are:

One: Create wpnonce value.
Two: Send wpnonce value as an extra parameter with ajax requestion
Three: Check ajax referrer with the wpnonce value that was created in step one and sent in step two.

Ok, how to create a wpnonce value ?
we need to use wordpress function wp_create_nonce() . See wordpress codex here.
< ?php $my_wpnonce= wp_create_nonce (‘you-look-nice’); ?> // “you-look-nice” is just a string, u can use whatever u want. here $my_wpnonce will get a hash from wp_create_nonce. Oh that is not direct hash of “you-look-nice” but based on user id, time and that string. To know more about this function please check pluggable.php in wp-includes folder

Now send wpnonce value $my_wpnonce as an extra parameter while seding ajax req.

Now to process the ajax request in your script at first u need to include the wp-config.php or how u handle this.. no problem. Just use this line after this to check the ajax referrer.

< ?php check_ajax_referer(“you-look-nice”); ?> /// “you-look-nice” ya same string that u used making wpnoce….
If the nonce value is not same then the hacker will be just got fucked!
note: check codex here for the function check_ajax_referer.

That’s it man.

3
Comments

Let me clear first about what is Slick RSS

Slick RSS is a joomla module that Parse and Display RSS Feed News with DHTML Teaser Tooltip. For details pls visit this link.

ok , let me tell what I am going to do next. That module is great to show rss feed from another site and I want to use it as a news ticker and it can be named as rss news ticker. ok then let’s make it done.

I am going to use js library jQuery and it’s plugin BBCNewsTicker. Please download latest version of jquery and that plugin this the given link.

Now, install the module Slick RSS in your joomla site and publish in any module position. Now I am going to make little change in the module code so that it can be configured for newsticker.

open the file default.php from modules\mod_slick_rss\tmpl and check link near 39

<ul class="slick-rss-list<?php echo $params->get('moduleclass_sfx'); ?>" id="slick-rss-list< ?php echo $params->get('moduleclass_sfx'); ?>" style="margin-left:0px;padding-left:0px;">

here I am adding id to ul tag so that the jquery plugin can catch that and do newsticking

oh btw,$params->get(‘moduleclass_sfx’) that is the class sufix that u add to that module, it urgent to give module suffix here and don’t give same class sufix for another copy of same module in same page. In that the first module be working as newsticker as both more than one module’s ul tag is getting same id.

Next task is to add jquery and it’s plugin and do that newsticking…
I am putting them in index.php of the current active template. make folder named js in your current template folder if there is none and put the jquery file and it’s plugin in that folder . now put the these lines in your index.php template file

<script src="<?php echo $this->baseurl; ?>/templates/js/jquery-1.2.6.pack.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/js/newsticker.js"></script>
<script type="text/javascript">// < ![CDATA[
jQuery.noConflict();
jQuery(document).ready( function(){
var options = {newsList: "#slick-rss-list_rssnews", tickerRate: 80, loopDelay: 3000,	startDelay: 10, 		placeHolder1: "_"}
jQuery().newsTicker(options);
});
// ]]></script>

Look the above code I used the jquery file name jquery-1.2.6.pack.js and it’s plugin newsticker.js .So if u are using latest version of jquery or it’s news ticker plugin then put the file names carefull in the code…

another line check here

var options = {newsList: "#slick-rss-list_rssnews", tickerRate: 80, loopDelay: 3000,	startDelay: 10, 		placeHolder1: "_"}

here #slick-rss-list_rssnews # is jquery syntax to catch slick-rss-list_rssnews as id and _rssnews is the class suffix for the Slick RSS module that I put from admin panel in the module configuration. If you put any thing then the id will be like #slick-rss-list{class suffix here without 2nd bracket} in this format. I think you are clear.

Oh u may ask why I wrote that line jQuery.noConflict(); and jQuery in place of $ sign.. heh to avoid conflict with other js library. You can search jquery seach about this noConflict mode.

Another thing is put the above code in footer of yout index.php file so that the loading time of jquery and it’s plugin doesn’t make any problem for site loading. For first time before the site loaded completely(before the dom is ready) the rss feed will be shown as listed like

list1
list2
list2

so if u make the ul tag height as the the line height of list item from css then it will seems that before the dom ready first news is displayed. When the dom is ready jquery plugin will start to work

waiting for your feedback

wana see demo of my work ? ok check here .If this link doesn’t work in future then check main domain of that link as this is a demo site now

5
Comments

আমি ব্যক্তিগত ভাবে যা করি যখন জুমলার জন্য কোন নতুন টেমপ্লেট বানায় তখন ডিফল্ট টেমপ্লেট rhuk_milkyway কপি করে নতুন নাম দিয়ে অপ্রয়োজনীয় ছবি, সিএসএস কোড ইত্যাদি সব মুছে ফেলি। এরপর নিজের মতো করে কোড করি সব কিছু। একথা বলার কারণ এইটা যে আমরা যদি ডিফল্ট টেমপ্লেট ব্যবহার করি তাহলে একটা ফাইলে সামান্য কিছু কোড যুক্ত করেই পেজিনেশনের ডিজিটগুলো বাংলা করে ফেলতে পারি।

এখন দেখি কি করে করা যায়। যদি ভালো করে খেয়াল করেন তাহলে নিশ্চয় templates\rhuk_milkyway\html এই ডিরেক্টরীতে pagination.php নামে একটা ফাইল আছে। এই ফাইলটা প্রথমে utf-8 হিসাবে সংরক্ষণ(save) করুন। এরপর
ফাইলের একদম শেষে ?> এর আগে নিচের কোড কপি পেস্ট করুন।

//function to convert english digits to bangla digits
function convertEngtoBanglaDate($rdate){
	$latin = array('1','2','3','4','5','6','7','8','9','0');
	$bangla  = array('১','২','৩','৪','৫','৬','৭','৮','৯','০');
      	return str_replace($latin, $bangla, $rdate);
} //end convertEngtoBanglaDate

এখন যা করবো pagination_item_active() এবং pagination_item_inactive() ফাংশন দুইটি সামান্য মডিফাই করবো। মডিফাই করার পর যা হবে তা নিচে দিলামঃ

function pagination_item_active(&$item) {
	return "<a href=\"".$item->link."\" title=\"".$item->text."\">".convertEngtoBanglaDate($item->text)."</a>";
}
function pagination_item_inactive(&amp;$item) {
	return "<span>".convertEngtoBanglaDate($item->text)."</span>";
}

নিশ্চয় ভাবছেন এখনতো বাংলা ইংলিশ যে ল্যাঙ্গুয়েজই সেট করি না কেন এডমিন থেকে পেজিনেশনের ডিজিট সব সময় বাংলায় দেখাচ্ছে . হ্যাঁ ভয় পাবেন না। আমরা উপরোক্ত ফাংশন দুইটি আবার মডিফাই করবো।

function pagination_item_active(&$item) {
	$lang = JFactory::getLanguage();
 	if($lang->_lang == "bn-BD"){
 		return "<a href=\"".$item->link."\" title=\"".$item->text."\">".convertEngtoBanglaDate($item->text)."</a>";
 	}
 	else{
 		return "<a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a>";
 	}
}
function pagination_item_inactive(&amp;$item) {
	$lang = JFactory::getLanguage();
 	if($lang->_lang == "bn-BD"){
 		return "<span>".convertEngtoBanglaDate($item->text)."</span>";
 	}
 	else
 	{
 		return "<span>".$item->text."</span>";
 	}
}

এখন যদি আপনি ল্যাঙ্গুয়েজ এডমিন থেকে বাংলা সেট করেন শুধুমাত্র তাহলেই পেজিনেশনে বাংলা ডিজিট শো করবে। ধন্যবাদ।