একটা ঘটনা দিয়ে শুরু করি, কারণ এটা আমরা মাসে অন্তত দুইবার দেখি। ক্লায়েন্ট বলল হেডারে ফোন নাম্বারটা বদলাতে হবে। ডেভেলপার cPanel-এর ফাইল ম্যানেজার খুলে থিমের header.php এডিট করে দিলেন। কাজ শেষ, বিল পাস। তিন সপ্তাহ পর থিম আপডেট এলো, ক্লায়েন্ট ড্যাশবোর্ডের নীল বোতামে ক্লিক করলেন — আর হেডারের নাম্বার আবার আগেরটা। শুধু নাম্বার নয়, ওই ফাইলে করা গত ছয় মাসের সব কাজ একসাথে মুছে গেল।
থিম কাস্টমাইজেশন মানে শুধু রং আর ফন্ট বদলানো নয়। এর আসল প্রশ্ন হলো — আপনার পরিবর্তনটা কোথায় রাখলে সেটা আপডেটের পরেও টিকে থাকবে, ক্যাশের নিচে হারিয়ে যাবে না, আর ছয় মাস পর অন্য একজন ডেভেলপার এসে খুঁজে পাবেন। এই লেখায় ঠিক সেটাই ধাপে ধাপে দেখাব, প্রতিটা ধাপে কীভাবে যাচাই করবেন সেটাসহ।
প্রথম কাজ: থিমটা ক্লাসিক না ব্লক থিম, সেটা নিশ্চিত হোন
২০২৬ সালে ওয়ার্ডপ্রেসে দুটো আলাদা দুনিয়া চলছে, আর দুটোর কাস্টমাইজেশন পদ্ধতি সম্পূর্ণ আলাদা। থিম ফোল্ডারের রুটে theme.json ফাইল আছে কি না দেখুন। থাকলে সেটা ব্লক থিম (Twenty Twenty-Five, Ollie, Frost জাতীয়) — এখানে আপনার প্রধান কন্ট্রোল প্যানেল ওই JSON ফাইলটাই। না থাকলে ক্লাসিক থিম (Astra, GeneratePress, Hello Elementor, বেশিরভাগ কেনা থিম) — এখানে হুক, ফিল্টার আর টেমপ্লেট ফাইল দিয়ে কাজ।
আরও সহজ পরীক্ষা: অ্যাডমিন প্যানেলে Appearance মেনুতে যদি 'Editor' থাকে, ব্লক থিম। যদি 'Customize' থাকে, ক্লাসিক। ভুল দুনিয়ার টিউটোরিয়াল ফলো করলে ঘণ্টার পর ঘণ্টা নষ্ট হবে — তাই এই যাচাইটা আগে করে নিন।
চাইল্ড থিম: যেভাবে বানালে আসলে কাজ করে
চাইল্ড থিম বানানো সহজ, কিন্তু ভুলটাও সহজ। wp-content/themes/ এর ভেতর নতুন ফোল্ডার, ধরুন astra-child। ভেতরে দুটো ফাইল — style.css আর functions.php। style.css এর একদম উপরে কমেন্ট হেডার, যেখানে Template: লাইনটা প্যারেন্ট থিমের ফোল্ডারের নাম হুবহু, অক্ষরে অক্ষরে মিলতে হবে। এখানেই সবচেয়ে বেশি লোকে আটকায়: আপনার Windows-এ XAMPP-এ Astra লিখলেও চলে যাবে, কিন্তু লাইভ Linux সার্ভারে গিয়ে সাদা স্ক্রিন — কারণ ফোল্ডারের নাম আসলে astra, ছোট হাতের।
functions.php এ প্যারেন্ট আর চাইল্ডের CSS এনকিউ করুন। কিন্তু সাবধান — আধুনিক অনেক থিম (Astra, GeneratePress, Kadence) নিজেরাই তাদের স্টাইলশিট লোড করে। সেখানে আবার get_template_directory_uri() . '/style.css' এনকিউ করলে একই ফাইল দুবার ডাউনলোড হবে। প্যারেন্টের functions.php খুলে দেখে নিন কী নামে এনকিউ করা আছে, তারপর সেটাকেই ডিপেনডেন্সি হিসেবে ব্যবহার করুন।
- চাইল্ড CSS:
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), filemtime(get_stylesheet_directory() . '/style.css')) filemtime()ভার্সন হিসেবে দিলে ফাইল বদলানোর সাথে সাথে URL বদলায় — ব্রাউজার আর LiteSpeed ক্যাশ দুটোই নতুন ফাইল টানে- ফাইল না থাকলে
filemtime()warning দেয়, তাইfile_exists()দিয়ে মুড়ে দিন get_stylesheet_directory()= চাইল্ড থিম,get_template_directory()= প্যারেন্ট থিম — এই দুটো গুলিয়ে ফেলা খুব সাধারণ ভুল
চাইল্ড থিম অ্যাক্টিভ করলে মেনু লোকেশন আর উইজেট এরিয়া রিসেট হয়ে যেতে পারে, কারণ ওগুলো থিম-নির্দিষ্ট অপশনে জমা থাকে। অ্যাক্টিভ করার আগে প্রতিটা মেনু আর উইজেট এরিয়ার স্ক্রিনশট নিয়ে রাখুন — পাঁচ মিনিটের কাজ, এক ঘণ্টা বাঁচাবে।
যাচাই করুন: চাইল্ড থিম আসলেই লোড হচ্ছে তো?
অ্যাক্টিভ করার পর অনুমান করবেন না, দেখে নিন। সাইটে গিয়ে View Source চাপুন, তারপর themes/astra-child/style.css খুঁজুন। থাকলে, এবং তার শেষে একটা ?ver=1768... টাইমস্ট্যাম্প থাকলে, বুঝবেন এনকিউ ঠিক আছে। আরও ভালো উপায় — Query Monitor প্লাগিন ইনস্টল করুন (ফ্রি, ডেভেলপমেন্টের সবচেয়ে দরকারি টুল)। এর Styles আর Scripts প্যানেলে ঠিক কোন ফাইল, কোন হ্যান্ডেল নামে, কোন ডিপেনডেন্সি নিয়ে লোড হচ্ছে সব দেখা যায়।
কোন টেমপ্লেট ফাইলটা আসলে চলছে
ওয়ার্ডপ্রেস টেমপ্লেট হায়ারার্কি অনুযায়ী ফাইল বাছে — সিঙ্গেল প্রোডাক্ট পেজের জন্য সে single-product.php খোঁজে, না পেলে single.php, তাও না পেলে index.php। আপনি যদি ভুল ফাইল কপি করে চাইল্ডে বসান, কিছুই ঘটবে না, আর আপনি ঘণ্টাখানেক ধরে ক্যাশ ক্লিয়ার করতে থাকবেন। Query Monitor-এর Template প্যানেলে যেকোনো পেজে গিয়ে দেখুন — সে সরাসরি বলে দেবে ঠিক কোন ফাইলটা রেন্ডার করছে এবং হায়ারার্কির কোন ধাপগুলো চেষ্টা করেছিল। শুধু ওই ফাইলটাই চাইল্ড থিমে কপি করুন, পুরো থিম নয়।
WooCommerce-এর ক্ষেত্রে নিয়মটা আলাদা: প্লাগিনের templates/ ফোল্ডার থেকে ফাইল কপি করে চাইল্ড থিমে woocommerce/ নামের ফোল্ডারের ভেতর একই পাথ রেখে বসাতে হয়। যেমন woocommerce/templates/cart/cart.php যাবে astra-child/woocommerce/cart/cart.php তে। প্রতিটা টেমপ্লেটের উপরে একটা @version কমেন্ট থাকে। WooCommerce আপডেট হলে ওই ভার্সন পুরোনো হয়ে যায় — WooCommerce → Status → Templates পেজে গেলে আউটডেটেড ওভাররাইডগুলো লাল রঙে দেখাবে। এটা প্রতিটা Woo আপডেটের পর চেক করার অভ্যাস করুন, নাহলে একদিন চেকআউট পেজ ভেঙে বসবে।
ফাইল কপি করার আগে ভাবুন — হুক দিয়ে হয় কি না
টেমপ্লেট ওভাররাইড একটা দায়। প্রতিটা কপি করা ফাইল ভবিষ্যতে আপনাকে ম্যানুয়ালি সিঙ্ক করতে হবে। বেশিরভাগ ক্ষেত্রেই দরকার নেই — অ্যাকশন আর ফিল্টার হুক দিয়ে কাজ সেরে ফেলা যায়। প্রোডাক্ট টাইটেলের নিচে একটা ডেলিভারি নোটিশ বসাতে চান? add_action('woocommerce_single_product_summary', 'my_notice', 25) — কোনো ফাইল কপি করতে হলো না, আপডেটেও টিকে থাকবে।
wp_body_open— বডি ট্যাগের ঠিক পরে কিছু বসাতে (ট্র্যাকিং কোড, নোটিফিকেশন বার)the_contentফিল্টার — পোস্টের কনটেন্টের আগে বা পরে কিছু যোগ করতেwoocommerce_before_shop_loop— শপ পেজের লিস্টের উপরে কিছু দেখাতেbody_classফিল্টার — কন্ডিশনাল CSS টার্গেট করার জন্য নিজের ক্লাস যোগ করতে
একটা গুরুত্বপূর্ণ ফাঁদ: প্যারেন্ট থিম বা প্লাগিনের কোনো অ্যাকশন সরাতে remove_action() ব্যবহার করেন অনেকে, কিন্তু কলব্যাকটা যদি ক্লাসের মেথড হয় তাহলে হুবহু ওই অবজেক্ট ইনস্ট্যান্সটাই লাগবে — শুধু ক্লাসের নাম দিলে কাজ করবে না, আর কোনো এররও দেখাবে না। আর remove_action() অবশ্যই মূল add_action() চলার পরে চালাতে হবে, তাই সাধারণত init বা wp_loaded হুকের ভেতরে বসাতে হয়।
ব্লক থিমে theme.json ই আপনার কন্ট্রোল প্যানেল
ব্লক থিমে CSS লেখার আগে theme.json দেখুন। এটা দুই ভাগে বিভক্ত: settings (এডিটরে ইউজার কী কী করতে পারবে) আর styles (ডিফল্ট চেহারা)। এখানে একটা কালার প্যালেট ডিফাইন করলে ওয়ার্ডপ্রেস স্বয়ংক্রিয়ভাবে --wp--preset--color--primary জাতীয় CSS ভেরিয়েবল বানিয়ে দেয়, যেগুলো আপনি আপনার নিজের CSS-এও ব্যবহার করতে পারেন। এতে এডিটরের চেহারা আর ফ্রন্টএন্ডের চেহারা এক থাকে — যেটা আলাদা CSS লিখলে কখনোই থাকে না।
সবচেয়ে বড় ফাঁদটা এখানেই: চাইল্ড থিমের theme.json প্যারেন্টের সাথে মার্জ হয়, কিন্তু অ্যারে-টাইপ ভ্যালু (যেমন কালার প্যালেট বা ফন্ট ফ্যামিলি লিস্ট) মার্জ হয় না — পুরোপুরি রিপ্লেস হয়। মানে আপনি যদি শুধু একটা নতুন রং যোগ করতে চান, তাহলেও পুরো প্যালেটটা আবার লিখতে হবে, নাহলে প্যারেন্টের বাকি রংগুলো উধাও হয়ে যাবে এবং ক্লায়েন্টের পুরোনো পেজে রং ভেঙে পড়বে।
settings.appearanceTools: true দিলে একলাইনে padding, margin, border, line-height সহ অনেকগুলো কন্ট্রোল এডিটরে চালু হয়ে যায়। ক্লায়েন্টকে সাইট হস্তান্তর করার আগে ভাবুন — সব কন্ট্রোল খুলে দেওয়া মানে ডিজাইন ভাঙার সব স্বাধীনতাও দিয়ে দেওয়া।বাংলা ফন্ট: এখানেই সবচেয়ে বেশি সাইট ধীর হয়
বাংলা সাইটে Hind Siliguri বা Noto Sans Bengali প্রায় অবধারিত। কিন্তু Google Fonts থেকে সরাসরি লোড করলে দুটো সমস্যা: প্রথমত ব্যবহারকারীর ব্রাউজারকে একটা তৃতীয় পক্ষের সার্ভারে DNS + TLS + ডাউনলোড করতে হয়, যেটা মোবাইল নেটওয়ার্কে ৩০০-৬০০ মিলিসেকেন্ড খেয়ে ফেলে। দ্বিতীয়ত ইউরোপীয় ক্লায়েন্টের জন্য এটা GDPR ঝামেলাও বটে।
সমাধান — ফন্ট সেলফ-হোস্ট করুন। woff2 ফাইলটা থিমের assets/fonts/ এ রাখুন, @font-face এ font-display: swap দিন, আর HTML-এর <head> এ ফন্ট ফাইলটা preload করুন। অঙ্কটা মাথায় রাখুন: বাংলা গ্লিফ সেট বড়, একটা weight-এর woff2 সাধারণত ১০০-১৮০ KB (ল্যাটিন যেখানে ২০-৩০ KB)। চারটা weight লোড করলেই ৫০০ KB+ চলে যাবে — গ্রামীণ ৩-৪ Mbps কানেকশনে সেটা কয়েক সেকেন্ড। দুটোর বেশি weight নেবেন না: একটা রেগুলার (৪০০), একটা সেমিবোল্ড (৬০০)। ব্লক থিমে ফন্টটা theme.json এর fontFamilies → fontFace এ ডিফাইন করলে এডিটরেও ঠিকভাবে দেখাবে।
যাচাই: DevTools খুলে Network ট্যাবে Font ফিল্টার করুন, রিলোড দিন। ঠিক কয়টা ফন্ট ফাইল নামছে আর কোথা থেকে নামছে সেটা পরিষ্কার দেখবেন। কনসোলে document.fonts.check('16px "Hind Siliguri"') চালিয়ে true পেলে ফন্টটা আসলেই লোড হয়েছে।
আপনার CSS কেন কাজ করছে না
পেজ বিল্ডার, বিশেষ করে Elementor, খুব উঁচু স্পেসিফিসিটির সিলেক্টর তৈরি করে। ফলে আপনার .my-heading { color: red } চুপচাপ হেরে যায়, আর হতাশ হয়ে সবাই !important বসিয়ে দেয়। ছয় মাস পর ফাইলটা !important এর জঙ্গল হয়ে যায় এবং কেউ কিছু বদলাতে পারে না। এর বদলে DevTools-এর Elements → Styles প্যানেলে দেখুন কোন নিয়মটা আসলে জিতছে — কাটা দাগ দেওয়া প্রপার্টিগুলোই বলে দেবে কে ওভাররাইড করছে। তারপর ঠিক ততটুকু স্পেসিফিসিটি মিলিয়ে নিজের সিলেক্টর লিখুন।
পরিবর্তন দেখতে পাচ্ছেন না? ক্যাশের স্তরগুলো ধরে ধরে নামুন
বাংলাদেশের বেশিরভাগ শেয়ার্ড হোস্টিং এখন LiteSpeed-এ চলে, আর তার উপর অনেকে Cloudflare বসায়। ফলে আপনার CSS পরিবর্তন ব্যবহারকারীর কাছে পৌঁছানোর আগে তিন-চারটা ক্যাশ পেরোতে হয়। ক্রম মেনে পরিষ্কার করুন — উল্টো ক্রমে করলে আবার পুরোনো জিনিস ক্যাশ হয়ে যাবে।
- সার্ভার-সাইড পেজ ক্যাশ (LiteSpeed Cache → Purge All, বা WP Rocket)
- CDN (Cloudflare → Caching → Purge Everything)
- PHP OPcache — শুধু
functions.phpবদলে কিছু না ঘটলে এটা সন্দেহ করুন; হোস্ট প্যানেল থেকে রিসেট বা PHP ভার্সন টগল - ব্রাউজার — DevTools খোলা রেখে রিলোড বাটনে রাইট ক্লিক → Empty Cache and Hard Reload
- আর
wp-config.phpএdefine('SCRIPT_DEBUG', true)দিলে ওয়ার্ডপ্রেস মিনিফাই করা ফাইলের বদলে আসল ফাইল সার্ভ করবে, ডিবাগ করা সহজ হবে
নিরাপদে কাজ করার নিয়ম
লাইভ সাইটে সরাসরি থিম বদলাবেন না — এটা কোনো পরামর্শ নয়, এটা নিয়ম। হোস্টিং প্যানেলে একটা স্টেজিং সাবডোমেইন বানিয়ে নিন (staging.example.com), সেখানে কাজ করুন, ক্লায়েন্টকে দেখান, তারপর সিঙ্ক করুন। চাইল্ড থিমের ফোল্ডারটা Git-এ রাখুন (ডাটাবেস নয়, শুধু ফোল্ডার), তাহলে যেকোনো পরিবর্তন ফিরিয়ে নেওয়া যাবে। আর থিম অ্যাক্টিভ করার আগে WP-CLI দিয়ে wp db export backup.sql — তিন সেকেন্ডের কাজ।
সাধারণ প্রশ্ন
Additional CSS বক্সে লিখলে সমস্যা কী? অল্প কয়েক লাইনের জন্য ঠিক আছে। কিন্তু ওটা ডাটাবেসে জমা হয়, Git-এ যায় না, এবং সাইট মাইগ্রেট করলে হারানোর ঝুঁকি থাকে। ৩০ লাইন ছাড়িয়ে গেলে চাইল্ড থিমের style.css এ সরিয়ে নিন।
পেজ বিল্ডার ব্যবহার করলে কি চাইল্ড থিম লাগবে? Elementor বা Bricks দিয়ে ডিজাইন করলেও functions.php এ কোড, হুক আর কাস্টম CSS রাখার জন্য চাইল্ড থিম দরকার। Hello Elementor-এর মতো থিমের ক্ষেত্রেও আলাদা চাইল্ড রাখাই নিরাপদ।
প্যারেন্ট থিম আপডেট দিলে কি চাইল্ডের কিছু ভাঙবে? সাধারণত না। তবে আপনি যদি টেমপ্লেট ফাইল ওভাররাইড করে থাকেন এবং প্যারেন্ট ওই ফাইলের গঠন বদলায়, তখন ভাঙবে। এজন্যই ওভাররাইড যত কম, তত ভালো — হুক দিয়ে যা করা যায় তা হুক দিয়েই করুন।
রেডিমেড টেমপ্লেট কিনে কাস্টমাইজ করা কি ঠিক? একদম। শূন্য থেকে ডিজাইন করার চেয়ে একটা পরিচ্ছন্ন টেমপ্লেট নিয়ে ব্র্যান্ডের রং, ফন্ট আর কনটেন্ট বসানো অনেক দ্রুত ও সাশ্রয়ী — শুধু কাজটা চাইল্ড থিমে করুন, মূল ফাইলে নয়।
স্ট্যাক অ্যালিক্স-এর টেমপ্লেট স্টোরে বাংলাদেশি ব্যবসার জন্য তৈরি রেডি ওয়ার্ডপ্রেস কিট পাওয়া যায়, আর কাস্টমাইজেশন বা পারফরম্যান্স ঠিক করার কাজেও আমাদের টিম সাহায্য করতে পারে। আটকে গেলে নক দিন।