পর্ব–০৯: কাস্টম থিম বিল্ডিং বেসিক | Custom Theme Building Basics

🎯 এই পর্বে যা জানবে:

থিম (Theme) কী এবং কিভাবে কাজ করে
WordPress Theme ফোল্ডার স্ট্রাকচার
HTML টেমপ্লেটকে WordPress Theme-এ রূপান্তর
প্রধান ফাইলসমূহ: style.css, index.php, header.php, footer.php
Template Hierarchy সম্পর্কে ধারণা

🧩 WordPress Theme কী?

Theme হলো তোমার ওয়েবসাইটের “লুক & ফিল” কন্ট্রোলার 🎨
এটি নির্ধারণ করে —
ওয়েবসাইটের ডিজাইন, লেআউট, ফন্ট, কালার এবং কনটেন্ট কীভাবে প্রদর্শিত হবে।

👉 সহজভাবে:
WordPress = Engine
Theme = Body Design

📍 পথ:
👉 Dashboard → Appearance → Themes

🗂️ Theme Folder Structure

একটি থিম মূলত কয়েকটি PHP, CSS ও JS ফাইল নিয়ে গঠিত।
প্রতিটি ফাইলের নির্দিষ্ট কাজ আছে।

📁 উদাহরণ:

mytheme/
│
├── style.css
├── index.php
├── header.php
├── footer.php
├── functions.php
├── sidebar.php
├── page.php
├── single.php
└── screenshot.png

📜 style.css (থিমের পরিচয়পত্র)

প্রত্যেক থিমে একটি style.css ফাইল থাকে,
যার মধ্যে থিমের মেটাডেটা ও স্টাইল কোড থাকে।

📄 উদাহরণ:

/*
Theme Name: My First Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom theme converted from HTML
Version: 1.0
License: GPLv2 or later
Text Domain: mytheme
*/

👉 এই ইনফরমেশন WordPress Dashboard → Appearance → Themes এ দেখা যাবে।

🧠 Template Hierarchy কী?

Template Hierarchy হলো WordPress-এর রুলবুক,
যা নির্ধারণ করে কোন পেজে কোন ফাইল লোড হবে।

📘 উদাহরণ:

পেজ টাইপ	ব্যবহৃত টেমপ্লেট ফাইল
হোম পেজ	`home.php` → `index.php`
সিঙ্গেল পোস্ট	`single.php`
পেজ	`page.php`
ক্যাটাগরি পেজ	`category.php`
404 পেজ	`404.php`

🔹 WordPress এই ফাইলগুলোর অগ্রাধিকার অনুযায়ী রেন্ডার করে।

🧩 HTML থেকে WordPress Theme বানানোর ধাপ

১️⃣ HTML Template তৈরি করো

যেকোনো Static HTML Template নাও।
(যেমন: index.html, about.html, contact.html ইত্যাদি)

২️⃣ Theme Folder তৈরি করো

wp-content/themes/ এর ভিতরে নতুন ফোল্ডার তৈরি করো
👉 নাম দাও mytheme

৩️⃣ style.css যোগ করো

উপরের উদাহরণ অনুযায়ী থিম ইনফো লিখো।

৪️⃣ HTML কোড ভাগ করো

একটি HTML টেমপ্লেট সাধারণত এরকম হয় 👇

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <header>Header Area</header>
    <main>Content Area</main>
    <footer>Footer Area</footer>
  </body>
</html>

এটাকে নিচের মতো ভাগ করো:

অংশ	WordPress ফাইল
`<head>...</head>`	`header.php`
`<footer>...</footer>`	`footer.php`
`<main>...</main>`	`index.php`

৫️⃣ কোড কনভার্ট করো

`header.php`:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <title><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
  <p><?php bloginfo('description'); ?></p>
</header>

`footer.php`:

<footer>
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

`index.php`:

<?php get_header(); ?>
<main>
  <?php
    if ( have_posts() ) :
      while ( have_posts() ) : the_post();
        the_title('<h2>', '</h2>');
        the_content();
      endwhile;
    else :
      echo '<p>No posts found.</p>';
    endif;
  ?>
</main>
<?php get_footer(); ?>

✅ এবার Dashboard → Appearance → Themes এ গিয়ে
তোমার নতুন “My First Theme” দেখা যাবে!

🧰 দরকারি ফাংশনসমূহ

ফাংশন	কাজ
`get_header()`	header.php ফাইল কল করে
`get_footer()`	footer.php ফাইল কল করে
`get_sidebar()`	sidebar.php ফাইল কল করে
`bloginfo()`	সাইট ইনফরমেশন রিটার্ন করে
`wp_head()`	প্লাগইন/স্ক্রিপ্ট হুক করে
`wp_footer()`	স্ক্রিপ্ট ক্লোজিং অংশে হুক করে

💡 টিপস:

✅ সবসময় wp_head() ও wp_footer() ব্যবহার করো
✅ functions.php ফাইলে তোমার স্ক্রিপ্ট ও CSS enqueue করো
✅ ডিবাগ মোডে থিম টেস্ট করো (wp-config.php → WP_DEBUG = true)