ওয়ার্ডপ্রেস কাস্টম থিম তৈরী: পর্ব-৪, তৈরীকৃত ফাইলে কোড যোগ করা।

সিহাব সুমন | September 29, 2018 | ওয়ার্ডপ্রেস | No Comments

ওয়ার্ডপ্রেস কাস্টম থিম তৈরীর ৪র্থ পোষ্ট এটি। এর আগে আমরা তিনটি পোষ্ট দেখেছি। আপনি যদি আগের তিন টি পোষ্ট দেখে থাকেন তাহলে এই পোষ্ট থেকে কন্টিনিউ করেন আর যদি আগের পোষ্ট তিনটি না দেখে থাকেন তাহলে এই পোষ্ট এর নিচে দেখেন সিরিজ পোষ্ট এর লিংক দেওয়া আছে সেখান থেকে পূর্বের তিনটি পোষ্ট দেখে আসেন।
আজকের পর্বে আমরা আমাদের ৩য় পোষ্টে তৈরীকৃত ফাইল গুলোতে কোড যোগ করব। এবং ৫ম পোষ্টে ফোল্ডার-ফাইল গুলো কে থিমে পরিণত করে ওয়ার্ডপ্রেস সাইটে ইন্সটল করব। তাহলে চলুন আমরা একে একে ফাইল গুলোতে কোড যোগ করি।
header.php
প্রথমে নিচ থেকে কোড গুলো কপি করে আপনার নোটপ্যাড দিয়ে header.php ফাইলটি ওপেন করুন এবং সেখানে পেষ্ট করে সেভ করুন:

<html>
<head> <!--start head--->
<!--start title--->
<title><?php wp_title('|',true,'right');?>
<?php bloginfo('name');?></title>
<!--end title--->

<!--start call style sheet--->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<!--end call style sheet--->

</head> <!--end head--->

<body>  <!--start body from here--->
<div id="wrapper"> <!--start wrapper styling--->
<div id="header"> <!--start header section styling--->
	<h1><a href="<?php echo get_option('home');?>">
      <?php bloginfo('name');?>
      </a></h1>
    <h3>
      <?php bloginfo('description');?>
    </h3>
</div> <!--end header section styling--->
<div id="container"> <!--start container--->

<html>

<?php bloginfo('name');?></title>

</head>

<?php bloginfo('name');?>

</a></h1>

<h3>

<?php bloginfo('description');?>

</h3>

</div>

index.php
এবার নিচের কোড গুলো কপি করে index.php ফাইলে সেভ করুন:

<!--Start Call header.php file--->
<?php get_header(); ?>
<!--End Call header.php file--->

<div id="content-homepage"> <!--start content or post styling--->	

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></h2>

<!--start post bio--->
        »<?php the_author();?>
        »<?php the_date('j F, Y');?>
      »<?php comments_popup_link ('মন্তব্য করুন' , '1 টি মন্তব্য' , '% মন্তব্য'); ?>
       »<?php edit_post_link('সম্পাদনা', '', '');?>
      » <?php the_category (' , ') ?>
<!--end post bio--->
       	
<div id="clear"></div>	
		
<div class="homepage-excerpt-thumbnail"> <!--start homepage excerpt thumbnail styling--->
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('portfolio'); } else { ?> <img src="<?php bloginfo('template_directory'); ?>/images/default.gif" /> <?php } ?>
</div> <!--end homepage excerpt thumbnail styling--->
	
<?php the_excerpt();?>

<hr>
<?php endwhile; else: ?>

<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>
</div> <!--end content or post styling--->

<?php get_sidebar(); ?>

<div id="clear"></div>

</div> <!--End container--->
<?php get_footer(); ?>

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

»<?php the_author();?>

»<?php the_date('j F, Y');?>

»<?php comments_popup_link ('মন্তব্য করুন' , '1 টি মন্তব্য' , '% মন্তব্য'); ?>

»<?php edit_post_link('সম্পাদনা', '', '');?>

» <?php the_category (' , ') ?>

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('portfolio'); } else { ?> <img src="<?php bloginfo('template_directory'); ?>/images/default.gif" /> <?php } ?>

</div>

<?php the_excerpt();?>

<hr>

<?php endwhile; else: ?>

<?php _e('Sorry, no posts matched your criteria.'); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

footer.php
এবার নিচের কোডগুলো কপি করে আপনার footer.php ফাইলে সেভ করুন:

<div id="footer"> <!--start footer styling--->
<h1>Our footer area</h1>
</div> <!--end footer styling--->

</div> <!-- end wrapper styling -->

</body> <!-- end body here -->
</html> <!--End html start from header--->

<h1>Our footer area</h1>

</div>

</div>

</body>

</html>

sidebar.php
এবার নিচের কোডগুলো কপি করে আপনার sidebar.php ফাইলে সেভ করুন:

<div id="sidebar">
<h2> Sidebar area</h2>

<h2><?php _e('Categories'); ?></h2>

<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>

<h2><?php _e('Archives'); ?></h2>

<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>

</div>

<h2> Sidebar area</h2>

<ul>

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

</ul>

<ul>

<?php wp_get_archives('type=monthly'); ?>

</ul>

</div>

single.php
এবার নিচের কোডগুলো কপি করে আপনার single.php ফাইলে সেভ করুন:

<?php get_header(); ?>
	
<div id="content-single-post"> <!--start content--->
<?php while ( have_posts() ) : the_post(); ?>
<h3><?php the_title(); ?></h3>
	
	<!--start post bio--->
        »<?php the_author();?>
        »<?php the_date('j F, Y');?>
      »<?php comments_popup_link ('মন্তব্য করুন' , '1 টি মন্তব্য' , '% মন্তব্য'); ?>
       »<?php edit_post_link('সম্পাদনা', '', '');?>
      » <?php the_category (' , ') ?>
<!--end post bio--->
		
<?php the_content(); ?>
<?php endwhile; // end of the loop. ?>
</div> <!--end content--->   

<?php get_sidebar(); ?>

<div id="clear"></div>
</div> <!--End container--->
<?php get_footer(); ?>

<?php get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>

»<?php the_author();?>

»<?php the_date('j F, Y');?>

»<?php comments_popup_link ('মন্তব্য করুন' , '1 টি মন্তব্য' , '% মন্তব্য'); ?>

»<?php edit_post_link('সম্পাদনা', '', '');?>

» <?php the_category (' , ') ?>

<?php the_content(); ?>

<?php endwhile; // end of the loop. ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

functions.php
এবার নিচের কোডগুলো কপি করে আপনার functions.php ফাইলে সেভ করুন:

<?php


add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100);




?>

<?php

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 100, 100);

style.css
এবার নিচের কোডগুলো কপি করে আপনার style.css ফাইলে পেষ্ট করে সেভ করুন:

/*
Theme Name: Custom Theme
Description: This is my custom theme
Author: itbatayan.com
Version: 1.0
*/

body {
text-align: left;
	background-color: #615299;
}

#wrapper {
display: block;
border: 1px #a2a2a2 solid;
width:90%;
margin:0px auto;
}

#header {
	border: 2px #a2a2a2 solid;
	background-color: #e34de4;
	}

#content-homepage {
	background-color: #cfcfcf;
	width: 75%;
	border: 1px #a2a2a2 solid;
	padding: 5px;
	float: left;
	}

#content-single-post {
	background-color: #cfcfcf;
	width: 75%;
	border: 1px #a2a2a2 solid;
	padding: 5px;
	float: left;
	}

#container {
	width: 100%;
	background-color: #000000;
	
	float: left;
	}


#clear{
	clear: both;
	}

a {
text-decoration: none;
}

#footer {
	border: 1px #a2a2a2 solid;
	background-color: #000fff;
	padding: 5px;

	}

.title {
	font-size: 11pt;
	font-family: verdana;
	font-weight: bold;
	}


.homepage-excerpt-thumbnail {
float: left;
}

.homepage-excerpt-thumbnail img {
    height: 80px;
    width: 80px;
    background: #fcfcfc;
    padding: 0.3em;
    margin: 1em 1em 0.5em 0em;
    border: 1px solid #bbbdde;
border-radius:.1em 0 0 0; 
}



img {
    height: auto;
    max-width: 100%;
}
#sidebar {
	width: 22%;
	background-color: #995e52;
	border: 0px #a2a2a2 solid;
	float: right;
	padding: 5px;
	}

Theme Name: Custom Theme

Description: This is my custom theme

Author: itbatayan.com

Version: 1.0

body {

text-align: left;

background-color: #615299;

}

#wrapper {

display: block;

border: 1px #a2a2a2 solid;

width:90%;

margin:0px auto;

}

#header {

border: 2px #a2a2a2 solid;

background-color: #e34de4;

}

#content-homepage {

background-color: #cfcfcf;

width: 75%;

border: 1px #a2a2a2 solid;

padding: 5px;

float: left;

}

#content-single-post {

background-color: #cfcfcf;

width: 75%;

border: 1px #a2a2a2 solid;

padding: 5px;

float: left;

}

#container {

width: 100%;

background-color: #000000;

float: left;

}

#clear{

clear: both;

}

a {

text-decoration: none;

}

#footer {

border: 1px #a2a2a2 solid;

background-color: #000fff;

padding: 5px;

}

.title {

font-size: 11pt;

font-family: verdana;

font-weight: bold;

}

.homepage-excerpt-thumbnail {

float: left;

}

.homepage-excerpt-thumbnail img {

height: 80px;

width: 80px;

background: #fcfcfc;

padding: 0.3em;

margin: 1em 1em 0.5em 0em;

border: 1px solid #bbbdde;

border-radius:.1em 0 0 0;

}

img {

height: auto;

max-width: 100%;

}

#sidebar {

width: 22%;

background-color: #995e52;

border: 0px #a2a2a2 solid;

float: right;

padding: 5px;

}

আগামী পর্বে আমরা উপরোক্ত ফাইল-ফোল্ডার গুলো কে থিমে পরিণত করে ওয়ার্ডপ্রেস সাইটে ইন্সটলেশন করব। সেই প্রত্যাশায় আজকের মত বিদায়। আল্লাহ হাফেজ।

‘ওয়ার্ডপ্রেস এর কাস্টম থিম তৈরী’ সিরিজ এর সকল পোষ্ট এখানে।

Tags:wp theme making, ওয়ার্ডপ্রেস কাস্টম থিম, ওয়ার্ডপ্রেস কোডিং, থিম মেকিং

About The Author

shihabsumon

Add a Comment

You must be logged in to post a comment.

Related Posts

About The Author

shihabsumon

Add a Comment