How to create WordPress Theme

0
14

As of Everybody me too is think of this topic for a long time and tried lots of steps to create one for myself and finally i made it today

i make it on my local machinf before going for any web server hosting , you too i prefer to load on local machine and then go for uploading,Word press is one of the most leading personal Publishing platform having comparetively simple Function Set, here in  this article  difference lies where  modules are coded in pure HTML tabular mode apart from Divs and Stylesheets , and later on we ll go for that kind of Markup codes

Requirements

1. WordPress installation so as

http://localhost/wordpress/

Now we need to create our first theme, say theme1

Files needed here

  1. header.php
  2. sidebar.php
  3. footer.php
  4. index.php
  5. functions.php
  6. screenshot.png
  7. style.css

all php files are for functioning, CSS for because WordPress need it for theme initialization,Screenshot.png is the theme screen snap on installation Screen

Now Start with Creation

Header ; header.php

<html>
<head>
<title>meabi tutorial</title>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
</div>

<html>

<head>

<title>meabi tutorial</title>

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>

</div>

Here under lined portion is the only line consuming WordPress Functions

You may see the Entire WordPress Functions From here   Function Reference , this is the Header Portion

Now its turn of Sidebar.php

here i am dealing with widgetised side bar , For this 1 more file is needed termed functions.php

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar();

?>

sidebar.php looks like

<ul id=”sidebar”>

<?php if ( !function_exists(‘dynamic_sidebar’)

|| !dynamic_sidebar() ) : ?>

<li id=”about”>

<h2>wordpress1</h2>

<p>This is my blog.</p>

</li>

<li id=”links”>

<h2>Links</h2>

<ul>

<li><a href=”http://google.com”>google</a></li>

</ul>

</li>

<?php endif; ?>

</ul>

footer.php

<div id=”footer”>

<h1>footer text (run from footer.php)</h1>

</div>

</div>

</body>

</html>

This too is a normal file nothing calledhere any how you may call from wordpress functions,Now we need to club all these to a single file index.php, i m using pure HTML Code here

wordpress

ie. a table having 3 rows and 2 columns to the second row

code is here

<html>

<head>

<meta content=”text/html; charset=ISO-8859-1″

http-equiv=”content-type”>

<title></title>

</head>

<body>

<table style=”text-align: left; width: 100%;” border=”1″ cellpadding=”2″

cellspacing=”2″>

<tbody>

<tr>

<td colspan=”2″ rowspan=”1″ style=”vertical-align: top;”><?php get_header(); ?><br>

</td>

</tr>

<tr>

<td style=”vertical-align: top;”><?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; ?><br>

</td>

<td style=”vertical-align: top; width: 25%;”><?php get_sidebar(); ?>

<br>

</td>

</tr>

<tr>

<td colspan=”2″ rowspan=”1″ style=”vertical-align: top;”><?php get_footer(); ?><br>

</td>

</tr>

</tbody>

</table>

<br>

<br>

</body>

</html>

ALL THE ABOVE FILES ARE INCLUDED ACCORDINGLY ON BOLD AREAS AND THE BLUE AREA IS THE MAIN CONTENT AREA

Now upload all these files to your

wp-content/themes/theme1 Folder and Activate theme theme1


Run http://localhost/wordpress

WP-SCREEN

LEAVE A REPLY

Please enter your comment!
Please enter your name here