WordPress Theme Development – Zero to Hero : Episode 08

আমরা এই পোস্টে নতুন কিছু কোড লিখব এবং আগের কোড গুলোতে কিছু নতুন কোড।

সরাসরি কোড গুলো এখান থেকে কপি করে নিন।

অনেকের কোড বুঝতে অসুবিধা হয়। ফলে আমি নিচে আমার টেলিগ্রাম এড্রেস দিয়েছি এতে করে লাইভ সমাধান করে নিতে পারবেন। আমরা যেহেতু হাতে কলমে শিখছি তাই এখানে প্রি-বিল্ড কোনো কিছুই থাকবে না। শূন্য থেকে সব হবে। ইতিমধ্যে আমরা ৮ টি এপিসোড শেষ করেছি।

EPISODES:

Episode 01

Episode 02

Episode 03

Episode 04

Episode 05

Episode 06

Episode 07

Episode 08

ধাপ ৮: কাস্টম পেজ টেমপ্লেট তৈরি করা (Custom Page Template)

ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে কাস্টম পেজ টেমপ্লেট হইলো এমন এক ধরণের টেমপ্লেট, যেটা কোনো নির্দিষ্ট পেজের জন্য আলাদা ডিজাইন বা লেআউট তৈরি করতে কাজে লাগে। ধরেন, আপনের একটা পেজ দরকার যেটা হোমপেজ বা সিঙ্গেল পোস্ট পেজের মতো না। তখন এই পদ্ধতি ব্যবহার করবেন।

১. নতুন পেজ টেমপ্লেট ফাইল তৈরি করা

১. আপনের থিম ফোল্ডারে যান।
২. custom-page.php নামে নতুন একটা ফাইল বানান।
৩. নিচের কোড দিয়ে শুরু করেন:

<?php
/* 
Template Name: Custom Page 
*/
get_header();
?>

<div class="container custom-page">
  <h1><?php the_title(); ?></h1>
  <p>এখানে আপনি নিজের কন্টেন্ট যোগ করবেন।</p>
</div>

<?php get_footer(); ?>

বিঃদ্রঃ: এখানে Template Name ফিল্ড দিয়ে ওয়ার্ডপ্রেসরে জানাইয়া দিচ্ছেন যে এইটা একটা কাস্টম টেমপ্লেট।

২. কাস্টম পেজ ড্যাশবোর্ড থেকে অ্যাসাইন করা

১. ওয়ার্ডপ্রেস ড্যাশবোর্ডে যান।
২. Pages > Add New-এ ক্লিক করেন।
৩. পেজের ডানপাশে Page Attributes নামে একটা সেকশন পাবেন।
৪. Template ড্রপডাউন থেকে Custom Page সিলেক্ট করেন।
৫. পেজ সেভ করেন।

এখন পেজ ভিজিট করেন। দেখবেন, পেজে আলাদা লেআউট লোড হইতেছে।

৩. কাস্টম কন্টেন্ট যোগ করা

custom-page.php ফাইলে আপনি নিজের মতো করে কন্টেন্ট, সেকশন বা ডাইনামিক ডেটা যোগ করতে পারেন। উদাহরণস্বরূপ:

পোস্ট লিস্ট যোগ করা:

<div class="custom-posts">
  <h2>সর্বশেষ পোস্ট:</h2>
  <ul>
    <?php
    $query = new WP_Query(array('posts_per_page' => 5));
    while ($query->have_posts()) : $query->the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
    <?php endwhile; wp_reset_postdata(); ?>
  </ul>
</div>

CSS স্টাইল যোগ করুন: (নিচে সর্বশেষ আপডেট করা css টা কপি করে পেস্ট করুন)

style.css-এ নিচের কোড যোগ করেন:

/*
Theme Name: Toposhwini
Theme URI: https://tanverhossain.rf.gd/
Author: Tanver Hossain
Author URI: https://facebook.com/tanver247
Description: This is my first custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Tanver-Hossain
*/
/* General Reset */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}

/* Header */
header {
  background: #0073aa;
  color: #fff;
  padding: 20px 0;
}

header h1 {
  font-size: 36px;
  text-align: center;
  margin: 0;
}

header nav {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

header nav a {
  margin: 0 15px;
  color: #fff;
  font-weight: bold;
}

header nav a:hover {
  text-decoration: underline;
}

/* Sidebar */
.sidebar {
  background: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

.sidebar h2 {
  font-size: 24px;
  margin-bottom: 15px;






}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin-bottom: 10px;
}

.sidebar ul li a {
  color: #0073aa;
}

.sidebar ul li a:hover {
  color: #005177;
}



.widget {
margin-bottom: 20px;
}

.widget-title {
font-size: 18px;
margin-bottom: 10px;
}

/* Main Content */
.main-content {
  margin-top: 20px;
}

.main-content h1,
.main-content h2 {
  margin: 20px 0;
}

.main-content p {
  margin-bottom: 15px;
}

/* Footer */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

footer a {
  color: #0073aa;
}

footer a:hover {
  color: #fff;
}
.blog-listing {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.blog-post {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.post-title a {
color: #0073aa;
text-decoration: none;
font-size: 24px;
font-weight: bold;
}
.post-title a:hover {
color: #005177;
}
.post-meta {
color: #666;
font-size: 14px;
margin-bottom: 10px;
}
.post-excerpt {
font-size: 16px;
color: #333;
line-height: 1.5;
}
.pagination {
margin-top: 20px;
text-align: center;
}
.pagination a {
display: inline-block;
padding: 8px 12px;
margin: 0 5px;
background: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 3px;
}

.pagination a:hover {
background: #005177;
}
.single-post {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.post-title {
font-size: 32px;
color: #333;
margin-bottom: 10px;
}
.post-meta {
font-size: 14px;
color: #777;
margin-bottom: 15px;
}
.post-thumbnail img {
width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 5px;
}
.post-content {
font-size: 18px;
color: #444;
line-height: 1.8;
}
.post-tags {



margin-top: 20px;
font-size: 14px;
color: #555;
}
.comments-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ddd;
}
/* Custom Page Template */
.custom-page {
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
}

.custom-page h1 {
  font-size: 32px;
  color: #0073aa;
}
.custom-posts ul {
  list-style: none;
  padding: 0;
}

.custom-posts li {
  margin-bottom: 10px;
}

.custom-posts a {
  color: #0073aa;
}

.custom-posts a:hover {
  color: #005177;
}

/* Custom Form */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

form label {
  font-weight: bold;
}

form input,
form button {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

form button {
  background: #0073aa;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
form button:hover {
  background: #005177;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }

  header h1 {
    font-size: 28px;
  }

  header nav {
    flex-direction: column;
  }

  header nav a {
    margin: 5px 0;
  }
}

৪. পেজ লেআউট আরও ডাইনামিক করা

কাস্টম পেজে আরো কন্টেন্ট যোগ করতে পারেন। যেমনঃ

কাস্টম ফর্ম:

<form method="post" action="">
  <label>Your Name:</label>
  <input type="text" name="name" required>
  <label>Your Email:</label>
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
</form>

পেজ স্পেসিফিক উইজেট:

<div class="widget-area">
  <?php if (is_active_sidebar('custom-sidebar')) : ?>
    <?php dynamic_sidebar('custom-sidebar'); ?>
  <?php endif; ?>
</div>

৫. কাস্টম পেজ ডিজাইন চেক করা

১. ড্যাশবোর্ডে নতুন একটা পেজ ক্রিয়েট করেন।
২. টেমপ্লেট হিসেবে Custom Page সিলেক্ট করেন।
৩. ব্রাউজারে পেজ ভিজিট করেন।

কাস্টম পেজের সুবিধা

১. আলাদা ডিজাইনের জন্য এক্সট্রা ফাইল বানাইতে হয় না।
২. স্পেসিফিক পেজের জন্য সহজে ডাইনামিক ফিচার যোগ করা যায়।
৩. ডেভেলপারদের জন্য এটা থিম কাস্টমাইজেশনের সবচেয়ে প্রফেশনাল পদ্ধতি।

এপিসোড-০৮ শেষ করছি এবং আপনাদের এক একটি কমেন্ট গুরুত্বপূর্ণ ভূমিকা রাখবে।
আপনাদের মতামত আমি কামনা করছি।
সবাই ভালো থাকবেন সুস্থ থাকবেন।

My Telegram