Help me php! (0:

ok, i read the faq..., but im not sure what im looking for. i am unfamiliar with php, but trying to learn. i am currently trying to put together my first wordpress template. keeping it simple, i followed a basic tutorial and tried it out with wordpress on my computer. epic fail. my html/css works great on its own... but saved in sections of php and 'called back' in the index.php file... it... well it does nothing. i got hello world in the basic blue text and a white page.

if you have the time, it would be super helpful to have someone look through my files and tell me what isn't right.

=================================================

----- the style sheet -----
/*
Theme Name: SciFi HiFi
Theme URI: Your Theme's URI
Description: This site belongs to SciFi HiFi, music label and blog.
Version: 1.0
Author: Design by Organism No.12
Author URI: Your website address.
*/

@charset "utf-8";
/* CSS Document */

#tvwrapper {height:650px; width:1130px; margin-left:95px; margin-top:-20px;}
#tv-left {height:404px; width:674px; float:left; background-image:url(images/tv-left.png);}
#tv-right {height:404px; width:456px; float:left; background-image:url(images/tv-right.png);}
#tv-top {height:246px; width:1130px; float:left; background-image:url(images/tv-top.png);}
#buttonbox {height:200px; width:95px; position:absolute; margin-left:40px;}

#bodywrapper {height:840px; width:1230px; margin-left:0px; margin-top:0px;}
#col1 {height:750px; width:292px; background-color:#FFF; float:left; padding:0px; background-image:url(images/col1.png); display:block; margin-left:96px;}
#col2 {height:750px; width:541px; background-color:#FFF; float:left; padding:0px; background-image:url(images/col2.png); display:block;}
#col3 {height:750px; width:297px; background-color:#FFF; float:left; padding:0px; background-image:url(images/col3.png); display:block;}

#spacer {height:35px; width:990px; background-color:none; float:left;}
#footer {height:20px; width:990px; background-color:#000; float:left; padding:10px; margin-left:156px;}

#leftbar {height:750px; width:200px; border:none; background-color:none; padding-left:75px; padding-top:75px; padding-right:75px; padding-bottom:75px; float:left;}
#postarea {color:#AAA; height:750px; width:450px; border:none; background-color:none; padding-left:60px; padding-top:75px; padding-right:75px; padding-bottom:75px; float:left;}
#rightbar {height:750px; width:200px; border:none; background-color:none; padding-left:25px; padding-top:75px; padding-right:75px; padding-bottom:75px; float:left;}

h2 {color: #999; margin-bottom: 0; margin-left:13px; background:url(navigation.jpg) no-repeat; height:40px;}

h2 span {display: none;}

p {color: #ffff66; margin-top: .5em; font-size: .75em; padding-left:15px;}

#navigation-block {position:absolute; top:800px; left:937px;}

#hide {position:absolute; top:-30px; left:200px;}

ul#sliding-navigation {list-style: none; font-size: .75em; margin: 30px 0; padding: 0;}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a {display: block; width: 150px; padding: 5px 18px; margin: 0; margin-bottom: 5px;}

ul#sliding-navigation li.sliding-element h3 {color:#ffffff; background:#666666 url(heading_bg.jpg) repeat-y; font-weight: normal;}

ul#sliding-navigation li.sliding-element a {color: #999; background:#000 url(tab_bg.jpg) repeat-y; border: 1px solid #000; text-decoration: none;}

ul#sliding-navigation li.ele1 a:hover {color:#52BA6C;}
ul#sliding-navigation li.ele2 a:hover {color:#F7EC16;}
ul#sliding-navigation li.ele3 a:hover {color:#0C71B9;}
ul#sliding-navigation li.ele4 a:hover {color:#E81D2A;}
ul#sliding-navigation li.ele5 a:hover {color:#97449A;}
ul#sliding-navigation li.ele6 a:hover {color:#F7931E;}
ul#sliding-navigation li.ele7 a:hover {color:#E53A95;}
ul#sliding-navigation li.ele8 a:hover {color:#000000;}
ul#sliding-navigation li.ele9 a:hover {color:#52BA6C;}
ul#sliding-navigation li.ele10 a:hover {color:#F7EC16;}
--------------------------

--------index.php---------
<?php get_header(); ?>
<!-- INDEX PHP BEGIN -->
<div id="col2"><div id="postarea"><?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div></div>
<!-- INDEX PHP END -->
<?php get_leftbar(); ?>
<?php get_rightbar(); ?>
<?php get_footer(); ?>

--------------------------

------header.php--------
<!-- HEADER PHP BEGIN -->
<!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" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>


<body onload="MM_preloadImages('images/but8.png','images/images/but1hover.png','images/images/but2hover.png','images/images/but3hover.png','images/images/but4hover.png','images/images/but5hover.png','images/images/but6hover.png','images/images/but7hover.png','images/images/but8hover.png')">

<div id="tvwrapper">
<div id="tv-top"></div>
<div id="tv-left"></div>
<div id="tv-right"><div id="buttonbox">
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button1','','images/images/but1hover.png',1)"><img src="images/images/but1.png" name="button1" width="40" height="43" border="0" id="button1" style="float:left" /></a>
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button2','','images/images/but2hover.png',1)"><img src="images/images/but2.png" name="button2" width="37" height="43" border="0" id="button2" style="float:left" /></a>
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button3','','images/images/but3hover.png',1)"><img src="images/images/but3.png" name="button3" width="40" height="35" border="0" id="button3" style="float:left" /></a>
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button4','','images/images/but4hover.png',1)"><img src="images/images/but4.png" name="button4" width="37" height="35" border="0" id="button4" style="float:left" /></a>
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button5','','images/images/but5hover.png',1)"><img src="images/images/but5.png" name="button5" width="40" height="36" border="0" id="button5" style="float:left" /></a>
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button6','','images/images/but6hover.png',1)"><img src="images/images/but6.png" name="button6" width="37" height="36" border="0" id="button6" style="float:left" /></a>
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button7','','images/images/but7hover.png',1)"><img src="images/images/but7.png" name="button7" width="40" height="34" border="0" id="button7" style="float:left" /></a>
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button8','','images/images/but8hover.png',1)"><img src="images/images/but8.png" name="button8" width="37" height="34" border="0" id="button8" style="float:left" /></a></div>
</div></div>
</div>
<!-- HEADER PHP END -->
-------------------------

------leftbar.php---------
<!-- LEFTBAR PHP BEGIN -->
<div id="bodywrapper">
<div id="col1"><div id="leftbar">This is the left bar text</div></div>
<!-- LEFTBAR PHP END -->
-------------------------

------rightbar------------
<!-- RIGHTBAR PHP BEGIN -->
<div id="col3"><div id="rightbar">This is the right bar text
<div id="navigation-block">
<img src="background.jpg" id="hide" />
<ul id="sliding-navigation">
<li class="sliding-element ele1"><h3>LOREM IPSUM</h3></li>
<li class="sliding-element ele2"><a href="#">Link 1</a></li>
<li class="sliding-element ele3"><a href="#">Link 2</a></li>
<li class="sliding-element ele4"><a href="#">Link 3</a></li>
<li class="sliding-element ele5"><a href="#">Link 4</a></li>
<li class="sliding-element ele6"><a href="#">Link 5</a></li>
</ul>
</div></div>
</div></div>
</div>
<!-- RIGHTBAR PHP END -->
-------------------------

------footer------------
<!-- FOOTER PHP BEGIN -->
<div id="spacer"></div>
<div id="footer">this is the footer</div>
<div id="spacer"></div>

</body>
</html>
<!-- FOOTER PHP END -->
------------------------

From looking at your code, it looks like it's just the actual HTML output, not the individual php files, template PHP files, that handle the HTML/CSS theme for WordPress.

WordPress themes are made up of individual php files, which are called template files, like "footer.php" or "header.php" or "index.php", etc.

I can understand your frustration as it's not an easy thing to understand at first.

Basically what you have to do is take part of the HTML & CSS you pasted, and paste them into the correct template php files.

Like see the part in your html that says "<!-- FOOTER PHP BEGIN -->" and "<!-- FOOTER PHP END -->" begin? That part in between the comment marks will go into the footer.php. Do the same for the RIGHTBAR, INDEX.PHP etc.

The easiest way to edit these files is through the WordPress admin. Once you login, click on the "editor" menu option in the left sidebar. It's under "Appearance".

Once your are on that page, you'll see all the templates files for your particular theme on the right-hand site. Click on "footer.php" and you can paste in your footer HTML code and then hit the "update" button. Do the same for index.php, header.php, etc.

FYI, the theme template files reside in your "\wp-content\themes" folder of your website. If you wanted to edit them without using the WordPress admin, you can edit the files and them upload them in the correct theme folder under that directory.

Also just in case, you may want to backup your theme files before you make changes.

Hope that helps!

First of all, thanks so much for your reply. I know it was a great bunch of gobbledygook to look through, lol.

Ok, so I basically already have it saved like you mentioned. In my content/themes folder I have a folder labeled themescifihifi.

That folder contains a folder of images, as well as the following php files:

index.php
header.php
rightbar.php
leftbar.php
footer.php

In each of the php files I pasted the corresponding code. Meaning, I put that bit of footer html code into the footer.php file and so on and so on. I did NOT cut up the css and put it inside the php files, however. Maybe this is the issue. I left the css as a whole style sheet and just left the 'link rel' code in the header.

In the index.php file, I put the main body section of html, as well as the loop. I also included the commands to "get" the other php files. <php get something or other ?> etc etc. (they are written correctly in the actual files lol.) I even made sure that the "get command php bits" were in the right areas of the index file. The tutorial I followed told me where to put them. I just can't figure out why it isn't showing any images or styles or text/content or ANYTHING except Hello World, the date, and a bunch of white space.

Yeah you have to watch out that the various links to the CSS files are correct, as they use php code.

Like the the Twenty Ten theme, in their head.php template file uses this to access the styesheet.

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

Same goes for images.

If you are really stuck, you can try the WordPress support forums and ask for more detailed help there.
http://wordpress.org/support/