0

Picking up random elements from DOM using jQuery

tumblr_n1zv0cTukw1tubinno1_1280

Selecting a group of DOM elements is super duper easy these days using CSS selectors, or a particular element via their ID. But what about picking up a random element from these group of elements? In this article I am going to show you how to do it by extending jQuery

Let’s consider that we have the following markup. Now we will pick a random button and change it’s value

<div class="container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>

Let’s extend jQuery and add a random() function to it

$.fn.random = function() {
    return this.eq(Math.floor(Math.random() * this.length));
}

Now we can pick up a random button and change it’s value quite easily.

$(".container button").random().html("Click Me");

That was easy, eh? Hope you’ll like it.

1

Delegating Events Instead of Direct Binding in DOM

tumblr_n1rr53o21A1tubinno1_1280

When it comes to attaching event listeners, be it a particular element in the DOM, or a group of elements via CSS selectors, most of us bind the event listener directly to the elements. Direct binding is fine when you’re doing for a PARTICULAR element, but it may create problems for a group of elements if you’re not taking extra care while event binding. To understand the issue, let’s have a look at the following code block (Here’s a live example)

 
<!-- index.html -->
<div class="container" style="margin-bottom:50px;"></div>
<input type="button" value="Add More Buttons"  id="addmore" />

And we added the following javascript (depends on jQuery)

 
;(function($){
    $(document).ready(function(){
      $("#addmore").on("click",function(){
        
        var l = $(".container button").length+1;
        $("<button/>").html("Click Me "+l).appendTo($(".container"));
        $(".container button").on("click",function(){
          alert("Clicked");
        });
        
      });
    });
})(jQuery);

Now if you add more and more buttons, you can see that it repeatedly attaching events. See the effect in the following animation

dom-1

To avoid these repeated bindings, you can modify your code like this and detach all the event listeners which were attached previously to these buttons.

$(".container button").off("click");
$(".container button").on("click",function(){
  alert("Clicked");
});

This is boring, lengthy and sometime risky because you have to manually detach events everytime a new DOM element which satisfies your CSS selector rule adds in the container. And if you forgot to do that, chances are higher to break something somewhere.

Now, to save from this pain, jQuery had introduced event delegation which doesn’t bind the event listener to the dom elements but it delegates the event from their parent. This way, you will never have to worry about detaching previous attached event listeners anymore. Let’s have a look at our final code block, and here is a live example too

;(function($){
    $(document).ready(function(){
       
      //event delegation
      $(".container").on("click","button",function(){
          alert("Clicked");
      });
      
      $("#addmore").on("click",function(){
        
        var l = $(".container button").length+1;
        $("<button/>").html("Click Me "+l).appendTo($(".container"));
        
      });
    });
})(jQuery);

In the above example see how we have delegated the click event to every “button” in the container div. Once the delegation is done, it doesn’t matter whenever a new dom element (in this case, a “button”) inserts in the container. It will always capture the “click” event because the parent div “.container” will delegate that event to it properly. All you have to do is select a parent element, and then delegate the event to childrens (via CSS selector) belonging to it. It’s the same .on() method, just takes an extra parameter in the middle which represents the CSS selector to which the event will be delegated.

//event delegation
$(".container").on("click","button",function(){
  alert("Clicked");
});

By using event delegation in jQuery for a group of DOM elements, you can avoid risks, keep your code cleaner and save yourself from some overkill every time. Hope you’ve liked this article :)

1

How to enable some useful text formatting options in TinyMCE in WordPress

tumblr_na06t4fnlI1tubinno1_1280

Most of the time default TinyMCE editor in WordPress is pretty adequate for everyday text formatting. However, there are a lot of extra formatting options which are hidden out of the box. Enabling these options will give you extra formatting features that will be useful for many of us. In this article, I will show you how to enable these hidden formatting options in TinyMCE. Just add the following code block in your theme’s functions.php file

function tinymce_enable_more_buttons($buttons)
{
    $buttons[1] = 'fontselect';
    $buttons[2] = 'fontsizeselect';
    $buttons[3] = 'styleselect';
    return $buttons;
}

add_filter("mce_buttons_3", "tinymce_enable_more_buttons");

Now you can see these extra options in the editor as shown in the animation below.

format

Hope you liked this article.

3

Find n number of posts randomly from a group of categories in WordPress

tumblr_n2hutxfrNr1tubinno1_1280

When you are developing a theme, or maybe writing a plugin, it is often required to display related posts in single posts page. These related posts are fetched by various criteria. Sometimes they are fetched from the same categories a post belongs to, or by tags. Sometimes they are set by the author of the posts.

In this article I am going to show you how to fetch the categories of a particular post, and then fetch some random posts from these categories. It’s not as tough as you’re thinking.

Fetch the categories of a post
You can quickly fetch the categories assigned to a particular post using get_the_category() function. Let’s have a look at the following code block

$post_id = 1234;
$categories = array();
$_categories = get_the_category($post_id);
foreach ($_categories as $_cat) {
    $categories[] = $_cat->term_id;
}

Now you have the array of category ids which are assigned to a particular post with post id “1234″.

Fetch posts from these same categories
Now we are going to fetch some posts from these categories fetched in step 1. We will use kinda less documented category__in and post__not_in parameters with get_posts() function. We will make sure that the post “1234″ doesn’t come in the list of random posts. Because it will be silly to display that same post as a relative.

$args = array(
        'orderby' => 'rand', //important to fetch random posts
        'post_type' => 'post',
        'numberposts' => 3,
        'post__not_in' => array($post_id), //exclude the same post
        'category__in' => $categories,
        'post_status'=>'publish'
    ); 
$related_posts = get_posts($args);

Now you have an array of 3 related posts, which are related to the post “1234″ by belonging in the same categories. Their properties are described in details here in this Codex Article

That was easy, wasn’t it? Hopefully you will find it useful in your next WordPress theme project. Good night.

1

Passing data from PHP to the enqueued scripts in WordPress

tumblr_nau9zqjZay1tubinno1_1280

Enqueueing scripts, while being as one of the most common tasks for WordPress theme and plugin developers, has a very nice companion feature that can be used to pass data to it. These data will then be available in the native scope of those scripts. In this short article, I am going to show you how to to this

Remember the first parameter of wp_enqueue_script() function? It’s called ‘handle’, and works as a reference point. We need this handle to send some data to it with the help of wp_localize_script() function. Let’s have a look at the following example.

add_action("wp_enqueue_scripts","my_scripts_loader");
 
function my_scripts_loader(){
    $data = array("home"=>site_url());

    wp_enqueue_script("myscript","path/to/my/script.js");
    wp_localize_script( "myscript", "blog", $data );

}

wp_localize_script() takes the handle of the script file, a variable name and an array. Finally, wp_localize_script converts that array into a JSON object and makes available in the local scope of that javascript file via that variable name. So, from the example above you can write the following code in your script.js and it will show you your blog URL, which was actually passed to it using wp_localize_script function

alert(blog.home);

This feature is pretty handy for developing themes and plugins, to pass data from your PHP scripts to the external javascript files. Hope you’ve enjoyed this article.

1

How to enqueue javascript files properly in the WordPress admin panel

You’d probably have answered the question already, won’t you? We all know that the correct answer is to do that we have to write a function that hooks the “admin_enqueue_scripts” and inside that function we will have to load the script via wp_enqueue_scripts() function. That’s the correct answer, but when it comes to the best practices, it fails. Because when you’re loading a javascript file blindly in all pages, it can be messy and it also may conflict with other scripts which are already loaded in that page. Besides that, why load an extra script everywhere when you actually need it in a specific page, or two perhaps.

The correct, or “precise” way to enqueue a javascript file in the WordPress admin panel is to check first which page you’re on. And when you’re on that specific page where this javascript file is actually required, load it. So how you’re gonna check which page you’re on in the admin panel? The enqueue hook passes a parameter that tells you about this. Let’s have a look at the following example

add_action("admin_enqueue_scripts","admin_scripts_loader");

function admin_scripts_loader(){
    wp_enqueue_script("myscript","path/to/my/script.js");
}

There is nothing wrong with the enqueueing system above. However, the only problem is that it will load your script in every admin page, you need it or not. So let’s write a better version of that admin_scripts_loader function.

function admin_scripts_loader($hook){
    if(in_array($hook,array("post-new.php","post.php","edit.php"))) {
        //specifically load this javascript in post editor pages
        wp_enqueue_script("myscript", "path/to/my/script.js");
    }
}

Now the code is more accurately loading your javascript file only in the post editor pages. This $hook variable gives you the name of the PHP file that you’re on. So it’s quite easy for you to figure out where you should load it.

Hope you enjoyed it.

0

Fetch WordPress media files using BackboneJS

WordPress uses BackboneJS and Underscores in the admin panel. Though codex has a rich set of documentation on different WordPress topics, it lacks instructions of using these BackboneJS models in your code. So here’s a small snippet which shows you how to fetch an attachment from your WordPress blog using these models

First of all, you will have to enqueue media scripts via wp_enqueue_scripts or admin_enqueue_scripts hook. This will load all the necessary media js scripts needed for this task.

wp_enqueue_media();

And then, from your front end code you can access the attachments like this

Hope you liked it :)

5

ReduxFramework – a perfect example of how not to redesign your site!

This is not a rant. It’s a post from a fan who is sad, very sad.

I am a fan of Redux Framework and use it in all my themes. It’s easy to use and it has an excellent collection of controls which can make your life easier when you deal with option panels. However, the documentation SUCKS!!! It SUCKS big time. Not because it lacks necessary information, but because how it gives you the exact feeling of finding a needle in the haystack. If you go to their documentation, you will literally feel lost. Why not try to search the documentation of “color” control, or “text” perhaps”.

It was a lot easier to find the required information when they were using github wiki. But now, with the redesign, it’s very tough.  Their search doesn’t work as expected, gives you a lot of unnecessary information that you don’t need.

And oh, the funny thing is that in the WHOLE site, their github repository is not linked (as of the time of writing it). You simply can’t find a “DOWNLOAD” button, not even something that takes you to the original ReduxFramework repo! Heh, I submitted a ticket in their issue tracker and Dovy replied that he will take care of it. Maybe he is too busy to add a link in 3 months!

So go to ReduxFramework site, and scream “Where is the Mothe*fuck*ng  download/fork link?”. No one will hear your scream, boy, no one. They are too busy in making PAID extensions.

I love ReduxFramework. I don’t like how it gives a negative impression from the website. I really don’t like that.

 

2

কিভাবে ওয়ার্ডপ্রেসে নিজের থিমে রিডাক্স ফ্রেমওয়ার্ক যোগ করব?

Screen Shot 2014-07-16 at 10.14.36 PM
ওয়ার্ডপ্রেসের যতগুলো অ্যাডমিন প্যানেল বা অপশন ফ্রেমওয়ার্ক আছে তাদের মাঝে রিডাক্স অন্যতম। অনেকগুলো চমৎকার ফিচার, প্রচুর ফিল্ডের সমারোহ এবং সহজ ব্যবহারোপযোগিতার কারনে রিডাক্স খুব দ্রুতই ওয়ার্ডপ্রেস থিম ডেভেলপার দের দৃষ্টি আকর্ষন করতে সক্ষম হয়েছে। এছাড়াও রিডাক্সে ডেভেলপাররা ক্রমাগত এটাকে আপডেট করে চলেছেন, যার ফলে আমরা মাঝেমাঝেই পাচ্ছি নিত্য নতুন ফিচার। আজকের এই আর্টিকেলে আমি দেখাবো কিভাবে আমরা আমাদের থিমে এই রিডাক্স ফ্রেমওয়ার্ক দিয়ে তৈরী অপশন প্যানেল যোগ করব

১. এজন্য প্রথমেই https://github.com/ReduxFramework/ReduxFramework/ এখানে ডানদিকের নিচে গিয়ে “Download zip” বাটনে ক্লিক করে রিডাক্স ফ্রেমওয়ার্ক ডাউনলোড করে নিন

২. ডাউনলোড করা জিপ ফাইলটি আনজিপ/এক্সট্রাক্ট করলে redux-framework-master নামে একটা ফোল্ডার পাবেন। সেটা ওপেন করে একমাত্র ReduxCore এবং sample নামের ফোল্ডার দুটো রাখুন, আর class.redux-plugin.php, index.php, license.txt, redux-framework.php নামের ফাইলগুলো রেখে বাকি সবকিছু ডিলেট করে দিন। ডিলেট করার পরে redux-framework-master ফোল্ডার এর কনটেন্ট হবে নিচের মত

Screen Shot 2014-07-16 at 9.47.41 PM

৩. এবার আপনার থিমে libs নামে একটা ডিরেক্টরী তৈরী করে তার ভেতরে এই redux-framework-master ফোল্ডার পেস্ট করে দিন।

৪. এবার আপনার থিমের functions.php ফাইলে নিচের কোড টুকু যোগ করুন

if(!class_exists("ReduxFrameworkPlugin")){
    require_once(get_template_directory()."/libs/redux-framework-master/redux-framework.php");
    require_once(get_template_directory()."/libs/redux-framework-master/sample/sample-config.php");
}

৫. এবার আপনার থিম অ্যাক্টিভেট করে ওয়ার্ডপ্রেস এর অ্যাডমিন প্যানেলে আসলেই বামপাশে দেখবেন “Sample Options” নামে একটা মেনু চলে এসেছে, যা আসলে রিডাক্সের স্যাম্পল ফাইল টির আউটপুট।

Screen Shot 2014-07-16 at 9.58.57 PM

ব্যাস, আমাদের থিমে রিডাক্স ফ্রেমওয়ার্ক যোগ করা শেষ। একদম সহজ, তাই না? এখন আপনি sample-config.php ফাইলটি স্টাডি করে দেখতে পারেন কিভাবে বিভিন্ন ধরনের ফিল্ড যোগ করা হয়েছে। লাইন নম্বর ২৩৯ থেকে এই সেকশন এবং ফিল্ড গুলোর ডেফিনিশন শুরু হয়েছে। এখন একটা বিষয় খুবই জরুরী, আর সেটা হল এই যে আমাদের থিমের ইউজার রা রিডাক্সের সাহায্যে বিভিন্ন ডেটা ইনপুট দিবে – আমরা সেগুলো থিমে ব্যবহার করব কিভাবে। এর জন্য আমাদের দেখতে হবে ১৫৩৫ নম্বর লাইনে (বর্তমান আপডেট অনুযায়ী) এই লাইনটি আছে

'opt_name'          => 'redux_demo', 

এখানে আপনি আপনার পছন্দ মতো ভ্যারিয়েবলের নাম লিখতে পারবেন। যেমন আপনার থিমের নাম যদি হয় FlyHigh তাহলে আপনি লিখতে পারেন

'opt_name'          => 'flyhigh',

এটা করা হয়ে গেলে আপনার থিমের ফাইলে সবার উপরে এই লাইনটি লিখবেন

global $flyhigh;

এর পর থেকে রিডাক্সের যেকোন ফিল্ডের ডেটা আপনি অ্যাক্সেস করতে পারবেন $flyhigh['fieldid'] এইভাবে। ফিল্ডের আইডি কিভাবে লিখতে হয় এটা জানতে হলে আপনি স্যাম্পল কনফিগ ফাইলে অনেক উদাহরণ পাবেন, যেমন ধরুন একটা ফিল্ডের ডেফিনিশন হল

array(
    'id'        =>  'my_text_field',
    'type'      =>  'text',
    'desc'      =>  'Add some awesome text here',
    'default'   =>  'Oh WOW!',
    'title'     =>  'My Awesome Text'

),

উপরের উদাহরণে ফিল্ডের আইডি হল my_text_field। আরেকটা জিনিশ, সেটা হল যে “Sample Options” নামের মেনুর নাম পরিবর্তন করতে চাইলে নিচের লাইনটি খুঁজে বের করে আপনার পছন্দ মত মেনু নাম দিন

'menu_title'        => __('Sample Options', 'redux-framework-demo'),

এই স্যাম্পল ফাইলটি আপনার জানার সুবিধার্থে রিডাক্স টিম করে দিয়েছে। এই ফাইলে পরিবর্তন না করে বরং একই ফোল্ডারে দেখবেন barebones-config.php নামে আরেকটা ফাইল রয়েছে, যেটাতে শুধু যেটুকু দরকার সেটুকুই কোড আছে। আপনি সেই ফাইলটি আপনার থিমের কোথাও কপি করে নিয়ে আপনার থিমের জন্য নিজের মত করে অ্যাডমিন প্যানেল বানাতে পারবেন।

আশাকরি আর্টিকেলটি আপনাদের ভালো লেগেছে। তারপরেও মন্তব্যে জানালে খুশি হব :)

2

গাল্প দিয়ে এক মিনিটে ওয়েব সার্ভার তৈরী করা

Screen Shot 2014-07-04 at 5.58.23 PM
গাল্প মূলত নোডজেএস এর উপরে বানানো একটি টাস্ক অটোমেশন টুল, যেটা দিয়ে আপনারা অনেক সহজেই বিভিন্ন বোরিং এবং একঘেয়ে কাজ অটোমেট করে ফেলতে পারবেন। এটা দিয়ে একদিকে যেমন অনেক সময় বাঁচানো যায় আরেকদিকে প্রজেক্টের টাস্ক গুলো অটোমেট করার মাধ্যমে অনেক স্মার্ট ভাবে ম্যানেজ করা যায়। গাল্প আসার আগে বেশির ভাগ লোকজন গ্রান্ট দিয়ে টাস্ক অটোমেশনের কাজ সারতো। কিন্তু গ্রান্ট এর লার্নিং কার্ভ অনেক স্টিপ, অর্থাৎ আয়ত্ত্ব করতে বেশ ভালো সময় লাগে। অন্যদিকে গাল্প একেবারেই ছোট্ট এবং শেখাও খুব সহজ, পাশাপাশি গাল্প অনেক ফাস্ট। তো চলুন আজকে আমরা দেখি কিভাবে আমরা গাল্পের সাহায্যে একটা ওয়েব সার্ভার তৈরী করে আমাদের স্ট্যাটিক কনটেন্ট সার্ভ করতে পারি। এটা স্ট্যাটিক সাইট ডেভেলপমেন্টের সময় খুব কাজে লাগে, আলাদা ভাবে ভার্চুয়াল হোস্ট তৈরী করার সময় টুকুও বাঁচানো যায়।

প্রথমে একটি আলাদা ফোল্ডার তৈরী করুন অথবা আপনার প্রজেক্টের ফোল্ডারে আসুন, এবার নিচের মত করে টার্মিনালে কমান্ড লিখুন অথবা package.json নামে একটি ফাইল তৈরী করুন যার কনটেন্ট হবে {}

Screen Shot 2014-07-04 at 5.37.03 PM

আপনার যদি নোডজেএস ইনস্টল না করা থাকে তাহলে http://nodejs.org/ এখানে গিয়ে নোডজেএস নামিয়ে ইনস্টল করে ফেলুন।

Screen Shot 2014-07-04 at 5.39.46 PM

 

এবার টার্মিনালে কমান্ড দিন নিচের মত করে। ওয়েব সার্ভার তৈরীর জন্য আমাদের গাল্পের বেজ প্যাকেজ এবং gulp-connect নামক প্যাকেজটি লাগবে।

npm install gulp --save-dev 
npm install gulp-connect --save-dev 

কিছুক্ষনের মাঝেই দেখবেন যে গাল্প এবং গাল্প কানেক্ট ইনস্টল হয়ে গেছে।

Screen Shot 2014-07-04 at 5.44.20 PM

এবার এই ফোল্ডারেই একটা নতুন ফাইল তৈরী করুন gulpfile.js যার কনটেন্ট হবে নিচের মত, পোর্ট নাম্বারের জায়গায় আপনার পছন্দ মত পোর্ট নাম্বার দিতে পারেন।

var gulp = require("gulp"),
    connect = require("gulp-connect");

gulp.task("server",function(){
    connect.server({
        port:8081
    });
});

gulp.task("default",["server"]);

এবার একটা index.html ফাইল তৈরী করুন, নিচের মত – অথবা আপনার যা ইচ্ছা তাই লিখুন

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

এবার টার্মিনালে কমান্ড দিন gulp, কমান্ড দেয়া হলে আপনার ব্রাউজারে ব্রাউজ করুন http:/localhost:8081 ( অথবা gulpfile.js এ যেই পোর্ট নম্বর দিয়েছিলেন, সেটা)

Screen Shot 2014-07-04 at 5.51.38 PM

ব্রাউজারে আপনার ইনডেক্স ফাইলটি (index.html) চলে এসেছে। অনেক সহজ, তাই না?

ওহ এখানে উল্লেখ্য যে আপনি প্রজেক্টে যদি গিট ( git ) ব্যবহার করেন, তাহলে এই নোডজেএস এর ফাইলগুলো গিটইগনোর (.gitignore) ফাইলের মাধ্যমে গিটে কমিট বা পুশ হওয়া থেকে বিরত রাখতে পারেন। এজন্য আপনার ফোল্ডারে/প্রজেক্ট-রুটে একটা ফাইল তৈরী করুন .gitignore নামে যার কনটেন্ট হবে নিচের মত

node_modules
gulpfile.js
package.json

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