WordPress › Support » Noob needs help creating theme

thelongmile
Member
Posted 3 years ago #

Ok, I'm a complete noob, so I apologise in advance (ready the fish to slap me over the back of the head if I've shoved this in the wrong section or I end up being utterly stupid)

I'm working on creating a theme for a wordpress installation. It's basically an HTML page that I want to show the wordpress posts in.

I'll post the code in a momment, but let me just run through what I am trying do to exactly.

All I want is the posts and comments available on the page. I have no interest in the header image, sidebar or search box. It's going to be managed from the backend including comment deletion, basically all I want is the following section outlined in red.

http://img225.imageshack.us/my.php?image=imagerj1.jpg

The post should appear where my code says "Content Here"

and I can place the RSS Information and wordpress accreditation in the links at the bottom of the page where my code says about a bottom banner.

I cannot for the life of me work out how to do it. On other systems I have managed to sucessfully pull out the PHP information and stick it where I want, alot of the time it's been quite simple, almost like <posts></posts> etc just copy and paste give it a few bits of header information and it pulls what it needs.

I'm trying very hard to keep the same sort of style through the site, but I cannot figure this out, so please if you can, help.

Here is the code for the site.

<!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>the | longmile.net 2008</title>
<style type="text/css">
<!--
body,td,th {
	color: #FFFFFF;
}
body {
	background-color: #464646;
}
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
	font-size: small;
	font-style: italic;
}
.style3 {font-size: small}
.style4 {font-size: large}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: small; }
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #FFFFFF;
}
a:active {
	color: #FFFFFF;
}
.style6 {font-size: medium}
.style7 {font-size: large; font-family: Arial, Helvetica, sans-serif;
}

.tableset {
padding-left: 40px;
padding-right: 50px;
padding-top: 1px;
padding-bottom: 0px;
}
-->
</style></head>

<body>
<div align="center">
  <table width="200" border="0" padding="0">
    <tr>
      <td><div align="left"><img src="webimages/toplogomenu.jpg"  align="right" width="900" height="405" border="0" usemap="#Map" /></div></td>
    </tr>
    <tr>
      <td background="webimages/tabmiddle.jpg" class="tableset"><div align="left">Content Here</div>
      <div align="left"></div>        <div align="left"></div>        <div align="left"></div>        <div align="left" class="style3"></div>
      <p class="style5">&nbsp;</p>
      <p class="style5">&nbsp;</p></td>
    </tr>

    <tr>
      <td><div align="left"><img src="webimages/bottomban.jpg" width="900" height="60" /></div></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<p>&nbsp;</p>

<map name="Map" id="Map"><area shape="rect" coords="524,345,587,371" href="../../Website/build/index.html" />
<area shape="rect" coords="594,345,656,373" href="../../Website/build/gallery.html" />
<area shape="rect" coords="668,347,739,372" href="../../Website/build/services.html" />
<area shape="rect" coords="749,345,819,370" href="../../Website/build/contact.html" />
<area shape="rect" coords="827,348,887,371" href="../../Website/build/about.html" />
</map></body>
</html>

It's messy I know, I'm sorry, the map links will go on another revision of the site going up shortly, but once I can work out how to do this, I will.

Thanks to anyone that can help

JarretCade
Member
Posted 3 years ago #

You need to start the WordPress loop code otherwise known as The Loop.

This lets you start to pull information from WordPress and use it to display your post data.

So on your main page that you displayed you need to have

<?php get_header(); ?>

somewhere inside of the BODY tags. From there we move onto more code of The Loop.

<?php
if (have_posts()) :
while (have_posts()) :
the_post();

That will start up the main part of the loop and then all you have to do is place the WP tags wherever you want inside of your code.

So to redo some of your code it would look like

<?php get_header();
if(have_posts()) :
while (have_posts()) :
the_post();
?>
<div align="center">
  <table width="200" border="0" padding="0">
    <tr>
      <td><div align="left"><img src="webimages/toplogomenu.jpg"  align="right" width="900" height="405" border="0" usemap="#Map" /></div></td>
    </tr>
    <tr>
      <td background="webimages/tabmiddle.jpg" class="tableset"><div align="left">
<?php the_content(); ?>
<?php comments_template(); ?>
<?php endwhile; else: endif; ?>
</div>
      <div align="left"></div>        <div align="left"></div>        <div align="left"></div>        <div align="left" class="style3"></div>
      <p class="style5">&nbsp;</p>
      <p class="style5">&nbsp;</p></td>
    </tr>

    <tr>
      <td><div align="left"><img src="webimages/bottomban.jpg" width="900" height="60" /></div></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

Sort of like that, hopefully you can understand somewhat. This should give you a basic understanding and if you already know HTML and some PHP you should be able to figure it out. If not, lemme know and I'll try to explain further.

thelongmile
Member
Posted 3 years ago #

sorta, i assume I have to install this as a theme?

Basically the way the template works is a single HTML page with integrated CSS, along with a seperate folder for images, thats it. No other header information, (sorry I really am a little dense) my understanding of PHP is very limited, im more of an HTML person
thelongmile
Member
Posted 3 years ago #

hm now im confused, i get a lot of call to undefined errors on the page
JarretCade
Member
Posted 3 years ago #

You do have the html template inside of the themes folder in your WP directory right? Sorry I didn't mention that but you should have the file that you pasted above as index.php inside of a folder inside of the themes directory.

It should like something like
http://www.yourdomainname.com/wp-content/themes/themename/index.php
thelongmile
Member
Posted 3 years ago #

not as of yet, will put it in there now and see how it goes, thanks for your help so far! its really appriciated
thelongmile
Member
Posted 3 years ago #

eugh sorry being thick, i've copied the HTML file now saved as .php to the themes folder as well as the images i need into the test themes folder, now, I cant find any way to actually install it

i've tried copying the index.php file to the wordpress default theme folder to overwrite it but get the error

Fatal error: Call to undefined function have_posts() in /home/tlm01/public_html/pr/index.php

i know im being incredibly stupid, but I really do not know what I am doing here (HTML im fine with lol) so this is a learning experience for me

Note:
The makeup of the theme is like this

1 folder = webimages
1 file = index.php

thats it, no additional files in there, none of the header.php etc....
iridiax
Member
Posted 3 years ago #

The index.php in the main WordPress folder is NOT the one you edit for your theme. Read up on creating themes before doing this. There's lots of links to info here:

http://codex.wordpress.org/Templates
thelongmile
Member
Posted 3 years ago #

AH HA! Got it... sort of!

used a combination of both the script on here, my own script and the guides (thanks for pointing me to those, I keep forgetting to look at the most obvious things) only thing I'm now having trouble with is font's applying, the CSS doesent seem to want to take, but I'll do that in another post.

Thanks so much for your help people!

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] Noob needs help creating theme (9 posts)

Topic Closed

About this Topic

Tags

Code is Poetry