If you know basic structure of WordPress theme than you can
easily create a theme for your own requirement. So here you will see how to create simple basic
theme with minimum required files.
Index.php and Style.css are two basic files. You can create
a basic theme with the help of only these two files. How?
First of all create a folder inside /wp-content/themes/ folder
give it a name whatever you like, I give mytheme.
Before coding, decide the layout; here we will make a theme with
header, right sidebar, content area and footer like below.
Header
|
|
Content are
|
Sidebar
|
Footer
|
|
Now create index.php and style.css inside mytheme folder.
In index.php add stylesheet between the head tag.
<head>
<link rel="stylesheet" href="<?php
bloginfo('stylesheet_url'); ?>">
</head>
Now add html code inside body tag.
First of all create main container for whole page. All area's layouts will come inside this main container.
<div id="wrapper">
</div>
Now
add header area.
<div id="header">
<h1>HEADER</h1>
</div>
After header, add another container for post and sidebar.
<div id="main">
</div>
Inside this container add post and sidebar areas like below:
For post area:
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) :
the_post(); ?>
<h1><?php the_title(); ?></h1> <!—Post
titleà
<h4>Posted on <?php the_time('F jS, Y')
?></h4> <!—Post timeà
<p><?php the_content(__('(more...)'));
?></p> <!—Post contentà
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your
criteria.'); ?></p><?php endif; ?>
</div>
For sidebar area
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2> ß Categories widgetà
<ul >
<?php
wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2> ß
Archives widgetà
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
Last is footer
<div id="footer">
<h1>FOOTER</h1>
</div>
It will look like this.
To adjust the layout you have to add some css
styling in style.css file. You can add your own styling to make it good.
body { text-align: center;}
#wrapper { display: block;
width:90%; margin:0px auto; color: #000; }
#header { border-bottom: 2px #a2a2a2 solid; }
#content { width: 75%;border-right: 2px #a2a2a2 solid;
float: left;
padding-right: 10px; }
#sidebar { width: 23%; border: 0px #a2a2a2 solid; float:
right; }
#delimiter { clear: both; }
#footer { border: 0px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight:
bold; }
hr
{
border-bottom:dotted
1px #666;
width:20%;
}
hr:last-child {border:none;}
Now look at frontend.
I have described very minimum required files to create WordPress theme but professionally it is not recommended to add all html code in
one file. Create separate files for header, sidebar and footer, call them in
index.php with the help of template tags. How?
See, you have already created two files index.php and
style.css, now create 3 different files.
header.php
sidebar.php
footer.php
And add part of html separately in these files.
In header.php add below code.
<!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">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="<?php
bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
Html for sidebar.php.
<div id="sidebar">
<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>
And below code for footer.php.
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
Now you need to call these files in index.php, so the
index.php will look like this.
<?php get_header(); ?> <!-- To call header.php-->
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) :
the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y')
?></h4>
<p><?php the_content(__('(more...)'));
?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your
criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?> <!-- To call sidebar.php-->
</div>
<?php get_footer(); ?> <!-- To call footer.php-->
At last you can design theme of your choice but there is a lot of things for WordPress theme. Overall the basics are based on above described 5 files,
Click on the link to download the code.
Click on the link to download the code.
0 Comment