WordPress Theme Development (Part-2)
Posted on by

WordPress Theme Development (Part-2)

After quite a while coming back with our featured series tutorial on developing a WordPress theme. Let’s take a look on previous part, we’re discussing about fundamentals and basic structure of a WordPress theme. Today we’ll learn an important and very beginning part for WordPress theme development.

Hopefully you’ll build plenty of themes over the coming weeks, months, and years 🙂 . This part is all about that: what to consider before you begin, site goals that can make it easier to plan for the long run, and checklists for stuff you just can’t forget about, such as required template files and basics for good framework design. Whether you’re looking to release your theme for anyone to download, or just want to build a cool site for yourself, your clients, or other projects, these are things to consider.

Plan Before You Build

Before you create a brand new theme, make things as easy as possible for yourself. Establish a plan before you get carried away building your theme files and designing a layout. There are many ways to plan a theme, but I tend to go about it in this way.

At the concept stage, I want to answer the following questions:

  • What is the primary goal for this theme?
  • Do I need to build it up for later use, or can I just get it out there in the minimum amount of time?
  • Do I want to release this theme to the general public at some point?
  • Do I need outside help to create this theme?

Next, start thinking about the design, and more specifically the layout of design. How you go about creating a design is unique to each individual. Some people build mockups in Photoshop, while others prefer to draw them on paper. I carry a notebook with me (as you see in figure bellow) to sketch design ideas (and other ideas as well, for that matter).

However you start, you need to figure out how you want your theme to look.

These scribbles can end up as many pretty websites in a browser near you.

Creating Layout

Now time to action and setup your plan to visual layout. In last part we did some CSS coding with theme information. That was something like bellow.

/*
Theme Name: W3Programmers
Theme URI: https://www.w3programmers.com/
Description: A clean theme completely compatible with WordPress 3.0
Author: m.h.mithu
Author URI: http://mithu.info/
Version: 1.0
Tags: 2 column, content, 1 sidebar, widget ready
*/

We’ll add rest of code after the code block above.

*{
	margin:0;
	padding:0;
	outline:0;
}
.clear{clear:both}

body{ background:#f0f0f0; }

#wrapper{
	margin:0 auto;
	width:960px;
	height:1000px;
	border:1px solid #ccc;
	background:#fff;
}

Now open header.php file and paste the following 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">

	<div id="header"></div>

In above code bloginfo() function displays various information for your blog. It has total 21 parameters. Go for details.

Open footer.php and paste the codes bellow

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

	</div>

</div><!-- End wrapper-->

</body><!-- End Body -->

</html>

We’ve to create a new file name sidebar.php

Now open index.php and paste these codes

<?php get_header(); //load header.php ?>

	<div id="content">

	</div>

<?php get_sidebar(); //load sidebar.php ?>

<?php get_footer(); //load footer.php  ?>

So far this is the layout

Creating Header Layout

Now we’re going to create header layout. Add these codes to style.css file

#header{
	background:#FF82AB;
	height:200px;
}

Creating Content Layout

To create content layout add these lines into style.css

#content{
	background:#FFD39B;
	width:660px;
	height:600px;
	float:left;
}

Creating Sidebar Layout

Add these lines into style.css

#sidebar{
	background:#79CDCD;
	width:300px;
	height:600px;
	float:right;
}

Now open sidebar.php and add these line there.


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

Creating Footer Layout

For footer, add these codes into style.css file

#footer{
	background:#A2CD5A;
	height:200px;
	float:none;
}

Fresh layout

Now we’re going to run a loop inside index.php file to getting our post title

	<div id="content">

		<?php if (have_posts()) :
		  
			while (have_posts()) : the_post();
			
				the_title();
				
				echo "<br>";

			endwhile; endif;
		?>
		
	</div>

And finally we’re going to get our result 🙂 Click the button bellow to see the action in live 😛

One comment to “WordPress Theme Development (Part-2)”

Leave a Reply

Your email address will not be published.