আগামী ৩০ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

WordPress Theme Development (Part-3)

Once again coming back with 3rd part of this featured WordPress theme development tutorial. In last two part, we were discussing about how to create a basic template layout and we did that prominently.

We discussed the importance of drawing wireframes that map out the content contained on each page of our theme, and how that content will be organized. Now that we’ve reached the design phase, it’s time to map out the theme’s layout in more detail. Selecting the layout of your theme is one of the most crucial decisions to make during the design process. And today we’re going to create a complete front page layout of a WordPress theme.

WordPress Theme Development (Part-1)
WordPress Theme Development (Part-2)

Till the last part of this series tutorial, we developed a colorful layout. According on that layout, now we’ll create a minimal and classic looking front page or home page interface.

Copy and paste the following code into style.css file and replace with previous.

*{
	margin:0;
	padding:0;
	outline:0;
	text-decoration:none;
	font-weight:none;
}

.clear{ clear:both; display:block }

body{ background:#f0f0f0 }

In line 1 we used a star (*) selector and it’ll reset all other elements with it’s property and value. Then placing the wrapper or main layout is very important.

#wrapper{
	background:#fff;
	display:block;
	width:960px;
	margin:0 auto;
}

Highlighted line 5 will fit the wrapper center to the screen with margin property. 0 value is for setting the margin of wrapper top and bottom. Value auto will fit wrapper to the center. Those are very important for positioning it centrally.

Now we’ll design our theme’s header.

#header{
	height:200px;
	border-bottom:1px solid #ccc;
}
#header .title{
	padding:3.5em 0 0 10%;
}
#header .title a{
	font-size:40px;
	font-weight:bold;
	color:#400baa;
	text-decoration:none;
}
#header .desc{
	display:block;
	font-size:20px;
	padding-top:5px;
}

Line 1 is a ID Selector and it’s property is for size of header. Line 5 is for blog title position and Line 8 is for title anchor link. Line 14 is for title tag line or blog description.

Now it’s time to design content area. Before that, first we’ve to cerate a new directory in theme root called ‘images’ and we’ll put all necessary images into that directory.

#content-main{
	width:960px;
}
#content{
	width:660px;
	float:left;
	background:url(images/dot.png) repeat-y right 0;
}
#content .post{
	padding:10px;
}

We used a image to set right side border of content as background value in highlighted line 7. You’ll find this image into theme’s documentation file. Download link given at the end of post.

After that we’ll design sidebar.

#sidebar{
	width:300px;
	float:right;
}
#widgets{
	padding:10px;
}
#widgets ul{
	padding:10px;
}
#widgets ul li{
	list-style:none;
}

And finally design theme’s footer.

#footer{
	height:50px;
	border-top:1px solid #a2a2a2;
	line-height:50px;
	text-align:center;
}

Now we’ll do some coding in theme files.

Open header.php file and paste these codes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<!-- BEGIN html head -->
<head profile="http://gmpg.org/xfn/11">

	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
	<?php wp_head(); ?>

</head>
<!-- END html head -->

<!-- Start Body from here -->
<body>
<div id="wrapper">

	<!-- Start Header Area -->
	<div id="header">

		<div class="title">
			<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
			<span class="desc"><?php bloginfo('description'); ?></span>
		</div>

	</div>
	<!-- End Header Area -->

	<!-- Start Navigation Menu -->
	<div id="nav-menu">

		<ul>
			<li class="page_item"><a class="first" href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"><?php _e('Home', 'w3p'); ?></a></li>
			<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
		</ul>

	</div>
	<!-- End Navigation Menu -->

Between line 1 to 21, it’s remain same as last part. Bellow that, we used bloginfo() function to show blog title and tagline in line 24 and 25. It’s a WordPress template tag and very useful function to getting some various information. See codex.

In 35th line, we used _e(‘Home’, ‘w3p’) to display home link into navigation bar. ‘w3p’ is a short name of ‘w3programmers’. We used it as a textdomain name. Textdomain is for Internationalization and Localization of any WordPress theme. It’s known as i18n and l10n.

In line 36, wp_list_pages() function is for display all page link.

Now open footer.php and put these code there.

	<div id="footer">
		<h2>Footer</h2>
	</div>

</div>

</body>
</html>

Open sidebar.php paste these code given bellow.

<div id="sidebar">

	<div id="widgets">

		<h2 class="widget-title"><?php _e('Categories', 'w3p'); ?></h2>
			<ul class="list-cat">
				<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
			</ul>

		<h2 class="widget-title"><?php _e('Archives', 'w3p'); ?></h2>
			<ul class="list-archive">
				<?php wp_get_archives('type=monthly'); ?>
			</ul>

	</div>
	<div id="sidebar">

	<div id="widgets">

		<h2 class="widget-title"><?php _e('Categories', 'w3p'); ?></h2>
			<ul class="list-cat">
				<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
			</ul>

		<h2 class="widget-title"><?php _e('Archives', 'w3p'); ?></h2>
			<ul class="list-archive">
				<?php wp_get_archives('type=monthly'); ?>
			</ul>

	</div>

</div>
</div>

wp_list_cats() and wp_get_archives() function is for getting category and archive list.

Finally open index.php and paste following codes.

<?php get_header(); ?>

<div id="content-main">

	<div id="content">

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

			<div class="post" id="post-<?php the_ID(); ?>">

				<h2><?php the_title(); ?></h2>
				<h4><?php _e('Posted on ', 'w3p'); ?><?php the_time('jS F, Y') ?></h4>
				<p><?php the_excerpt(); ?></p>

			</div>

		<?php endwhile; else: ?>

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

    <?php endif; ?>

	</div>

<?php get_sidebar(); ?>

</div>

<div class="clear"></div>

<?php get_footer(); ?>

the_excerpt() function displays the excerpt of the current post with […] at the end, which is not a “read more” link. But it’s customizable by using function hook.

After completing all tasks successfully, the layout looks like image bellow.

Click the button bellow to see the action in live.

Hi, I'm Mirazul Hossain Mithu. A PHP philanderer by passion along with WordPress. Dreaming to join WordCamp. Loving Open Source and also like to play with Linux Tux. Now living only with PHP to achieve a most desired dream.
5 comments on “WordPress Theme Development (Part-3)
  1. Hi, I’m Bijoy. A PHP philanderer by passion along with WordPress. Dreaming to join WordCamp. Loving Open Source and also like to play with Linux Tux. Now living only with PHP to achieve a most desired dream.

  2. Thanks Mithu bhaya for the wonderful tutorial.
    It was very clearly explained.

    However, I think on that tutorial we don’t have cutom menu and dynamic sidebar.
    Is that coming along on the next tutorial?
    Although the site isn’t iPhone friendly as I can’t see it properly from my Phone. I just wanted to point it out. So you can take care of it.

  3. Very meaningful and helpful article for beginner. This article is clear and easy to understand how to make a new theme.. Thanks MITHU..

Leave a Reply

Your email address will not be published. Required fields are marked *