Learn WordPress Basis

Posted by jitendra chauhan

Now a days WORDPRESS has become a most popular tool for web developing.... but you should have some knowledge about PHP too and also HTML. If you don't know html than CLICK HERE....
Now , for the sake of simplicity....suppose consider any HTML page. In html page we have some short of DIV tags that we are using as a header,footer,sidebar,...etc. For the single page it is convenient for us to write all the div source. But think that you are making your own website than this chunk of code for every page than task is difficult as it take more time. Now what is the solution of this question???? -WORDPRESS....and that's here.
As you know you have to install WAMP or XAMP to make this PHP pages runnable. So first of all install one of this two. And for coding you can use Dream Weaver or Notepad also...

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

 <div id="menu">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</div>
<div id="header">

 <div id="logo">
<h1>metamorph_uberblue</h1>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
<div id="wel">
        <h4>Welcome</h4>
        <a href="#" class="web">To Our Website</a>
        <div id="weltext">
        <p>Donec placerat turpis sed turpis convallis accumsan congue et...lorem. Etiam feugiat   diam sit amet leo imperdiet id dignissim purus interdum. Quisque imperdiet sem sit amet libero iaculis...vitae pulvinar tortor blandit. Ut aliquet varius tempor...  </p>
        <div class="read"><a href="#">read more</a></div>
        </div>
      
      
        </div>
<!--Header end -->

</div>

</body>
</html>
Write above code and save it as a (.php) file in (C:\wamp\www\Word Press\header.php) as it only contain some link and description.

In new Notepad file write....
<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div id="leftbar" class="sidebar">
<h2>Categories</h2>
<div class="ulbg">
<ul>
<li><a href="#">June 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#">April 2009</a></li>
<li><a href="#">March 2009</a></li>
<li><a href="#">February 2009</a></li>
<li><a href="#">January 2009</a></li>
</ul>
</div>
<h2>Archives</h2>
<div class="ulbg">
<ul>
<li><a href="#">Nam condimentum dui urna, vel </a></li>
<li><a href="#">Ut quis neque in erat vestibulum </a></li>
<li><a href="#">Sed vitae purus quis ipsum </a></li>
<li><a href="#">Lorem ipsum dolor amet</a></li>
<li><a href="#">Suspendisse tristique nisi sed</a></li>
<li><a href="#">Curabitur sed lacus sed libero </a></li>
</ul>
</div>
</div>

</body>
</html>
Write above code and save it as a (leftbar.php) file in (C:\wamp\www\Word Press\leftbar.php) as it only contain some link and description.

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div id="rightbar" class="sidebar">

<h2>COMMENTS</h2>
<div class="ulbg">
<div style="padding-left: 10px;">
<img src="images/img1.jpg" style="float:left; padding: 8px;" alt="" />“Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Sed non metus sed odio porta rhoncus”<div style="clear:both;"></div>
            <img src="images/img2.jpg" style="float:left; padding: 8px;" alt="" /> “Donec urna odio, auctor et porttitor a, scelerisque facilisis sapien. Praesent vel eros eros”
</div><div id="add"><a href="#">Add comments</a></div>
</div>
<div style="clear:both;"></div>
</div>

</body>
</html>
Write above code and save it as a (rightbar.php) file in (C:\wamp\www\Word Press\rightbar.php) as it only contain some link and description.

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div id="footer">
   Copyright &copy; 2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a><br />
Website Design by <a href="http://www.metamorphozis.com/" title="Free Web Templates">Free Web Templates</a>
</div>

</body>
</html>
Write above code and save it as a (footer.php) file in (C:\wamp\www\Word Press\footer.php) as it only contain some link and description. 

Now as we have four files in our word press ditectery named (header,footer,leftbar,rightbar)...now the important part is come into the picture....let's see.
<!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=iso-8859-1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Use Of Word Press</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="main">
<!-- start header -->
<?php get_header(); ?>

<!-- end header -->
<!-- start page -->
<div id="con_top">
<div id="page">
<!-- start leftbar -->
<?php get_leftbar(); ?>
<!-- end leftbar -->
<!-- start content -->
<div id="content">
<div class="post">
          <div class="met">Metamorphosis Design</div><div class="text">
<p>This website template is released under  a Creative Commons Attribution 2.5 License</p>
   <p>We request you retain the full copyright notice in the template footer including the link to www.metamorphozis.com.<br />
     This not only gives respect to the large amount of time given freely by the developers
     but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good
     reason) retain the full copyright we request you at least leave in place the
     Website Templates line, with Website Templates  linked to www.metamorphozis.com. If you refuse
     to include even this then support may be affected.<br />
                <br />
     You are allowed to use this design only if you agree to the following conditions:<br />
     - You cannot remove copyright notice from this design without our permission.<br />
     - If you modify this design it still should contain copyright because it is based on our work.<br />
     - You may copy, distribute, modify, etc. this template as long as link to our website remains untouched.<br />
     For support visit <a href="http://www.metamorphozis.com/contact/contact.php">http://www.metamorphozis.com/contact/contact.php</a><br />
  <br />
     The Metamorphosis Design : 2010</p><div class="read2"><a href="#">read more</a></div></div>
</div>
<div class="postbot"></div>
<div class="post">
          <div class="met">Free Website Templates</div><div class="text">
<img src="images/img3.jpg" style="float:left; padding: 8px;" alt="" />
<p>Nulla facilisi. Sed viverra laoreet est semper dignissim. Phasellus in porta orci. Curabitur pulvinar mi sit amet ante imperdiet tincidunt. Fusce euismod elementum malesuada.
                <br /><br />
     Nam dapibus mattis dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pharetra adipiscing nibh sit

amet iaculis. Phasellus vel erat lorem, eu vulputate tellus. Aliquam ut sollicitudin ante.</p><div class="read2"><a href="#">read more</a></div></div>
</div>
</div>
<!-- end content -->
<!-- start rightbar -->
<?php get_rightbar(); ?>
<!-- end rightbar -->

</div><div style="clear:both;"></div>
</div><div id="con_bot"></div>
<!-- end page -->

<?php get_footer(); ?>
</div>
</body>
</html>

Write above code and save it as a (index.php) file in (C:\wamp\www\Word Press\index.php) as it contain most of the contents...
 Now... as you see in above code <?php      ?>. php start with the (<?php) tag and end with the (?>) tag. all the content in-between this two tags is called "php script" or php code.
 <?php get_your php file name(); ?> in above code this statement using get function through which we can include header, footer and sidebar,etc. so in this way using "get" function we can include DIV ftags into a single php file.
Now for to make complete project run you have to add some short of images and css file to your same project folder which reside in the wamp.... CLICK HERE FOR DOWNLOAD <-----------
                          
Tips :-
--> In your website in all the pages you just have to include all the header and footer php files and you are free from write that code more than once....
--> Most web developers make there Databases most frequntly used functions into single php file so thay can enable to access it throughout there website....

2 comments

2 comments:

  1. Sanket
    Sunday, October 17, 2010 6:50:00 AM

    linux ma kevi rite thay.??
    kemke php mostly linux ma use thay che mysql connectivity best che atle..:P
    and mast hato blog.!

  1. jitendra chauhan
    Sunday, October 17, 2010 8:21:00 AM

    @ Sanket :
    Wamp or XAMP is used for Windows and same thing in LINUX is calld "LAMP".
    So on linux you have to install LAMP package...
    IF you want more details on that this the website link for that....
    http://www.techiecorner.com/125/how-to-install-lamp-apache-php-and-mysql-in-linux-using-yum/

Post a Comment

Thanx for Supporting me....

Subscribe to: Posts (Atom)

My Snapped Photos...

Jitendra Photography Loading...