Trying to work a Wordpress blog into my site template design

[JaCkinbOx]

So I've got a revision of my website up recently, and I'm trying to work a Wordpress blog into it where it's neatly based off of my site design. The blog is located at http://www.dreamscapecreative.net/insight/ but it needs to be customized to look like the page I have here http://www.dreamscapecreative.net/info/index.html. I need it to be contained just like the content of that page. You'll notice if you scroll down that the content fades out into the top of the page (important feature to me).

Any Wordpress/web design gurus around that can tell me what I need to do? I'm not a web coder -- it all tends to look disturbingly like math and gibberish, but I routinely get my hands dirty in it and grow bit by bit. Nowadays, I'm trying to step it up, though.

[JaCkinbOx]

So anyone want to take a crack at this? A number of people I've seen say it's easy, but hesitate to explain the intergration...

[tZ]

If you code post the wordpress template file with the server side code I could probably give you some assistance.

Have you created a static photoshop/illustrator comp of what you would like the blog page to appear like – where the archives content,navs go,etc?

[JaCkinbOx]

I do somewhat have an Illustrator comp that I based the template off of, but I deviated from it enough to warrant a revised comp. But the best model to work from is the second link in my first post.

I was told to manipulate the code for the default Wordpress template, but I'm not exactly sure what all to change. Which documents would you be needing to look at?

[tZ]

The PHP template/view for this page: http://www.dreamscapecreative.net/insight/.

I think that in wordpress terms it would be referred to as a theme.

[JaCkinbOx]

Would that be the main index template (index.php)?

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/

get_header(); ?>

<div id="content" class="narrowcolumn">

<?php if (have_posts()) : ?>

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

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

[tZ]

Does this work? By work I mean doesn't error. If you could also show me the output it would be appreciated.


<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/

get_header(); ?>

<div id="blogs-content">

<?php // This section of code displays each entry as a list ?>
<?php if (have_posts()) : ?>

<ul id="blog-posts">

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

<li <?php post_class() ?> id="blog-post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry"><?php the_content('Read the rest of this entry &raquo;'); ?></div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

</li> <!-- end of li#blog-post-<?php the_post() ?> -->

<?php endwhile; ?>

</ul> <!-- end of ul#blog-posts -->

<?php // show blog posts navigation ?>
<ul id="blog-posts-navigation">
<li><?php next_posts_link('&laquo; Older Entries') ?></li>
<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul> <!-- end of ul#blog-posts-navigation -->

<?php else : ?>

<?php // no blog(s) found display ?>
<div id="blog-posts-not-found">
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
</div> <!-- end of #blog-posts-not-found -->

<?php endif; ?>

</div> <!-- end of blogs-content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

[tZ]

If that works then this just takes that code and replaces your introductory paragraphs with it.


<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<!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>Dreamscape Creative Studios</title>
<style type="text/css">

<!--

body {
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;

}
#logo {
position:absolute;
width:255;
height:111;
z-index:1;
}

h1 {
font-family: Times New Roman, Georgia, Verdana, serif;
color:#666666;
font-size:16px;
font-weight:normal;
display:inline;

}
h1 a {
text-decoration:none;
color:#666666;
}

h1 a: hover {
text-decoration:underline;
color:#666666;
}

h1 a: visited {
text-decoration:none;
color:#666666;
}

h1 a: active {
text-decoration:none;
color:#666666;
}

#content {
font-family: Helvetica, Arial, sans-serif;
font-size:14px;
line-height:150%;
letter-spacing:1px;
color:#666666;
width:850px;
margin-left:auto;
margin-right:auto;
padding-top:160px;
padding-bottom:100px;
z-index:10;
}

#content a: {
color:#000000;

}

#decoration01 {
position:absolute;
width:324px;
height:461px;
z-index:1;
background-image: url(../images/decoration01.png);
}
#decoration01b {
position:absolute;
width:324px;
height:461px;
z-index:1;
background-image: url(../images/decoration01b.png);
}

.dropthecap {
float:left;
margin-top: 5px;
margin-bottom: 10px;
padding-top: .2em;
font-size:60pt;
font-family:"times","Times New Roman";
}

#footer {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:lighter;
color:#666666;
text-align:center;
position:fixed;
bottom:0;
left:0;
background-image: url(../images/footer.png);
height:42px;
width:100%;
z-index:1;
}
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #006666;
}
a:hover {
text-decoration: underline;
color: #666666;
}
a:active {
text-decoration: none;
color: #666666;
}

-->
</style>

</head>

<body style="text">
<div id="decoration01" style="position:fixed; top:0; left:0; z-index:2;"></div>
<div id="decoration01b" style="position:fixed; bottom:0; right:0;"></div>
<div id="nav" style="width:100%; height:170px; background-image: url(../images/navbg.png); position:fixed; top:0; right:0;">
<div style="padding-top:10px; width:255px; height:111px; margin-left:auto; margin-right:auto;"><a href="../index.html"><img src="../images/logo.png" alt="Home Page" border="0" longdesc="index.html"/></a></div>

<div style="width:695px; height:21px; color:#666666; margin-left:auto; margin-right:auto; padding-top:1px;">
<div align="center"><a href="../photography/index.html"><h1>Photography</h1></a> | <a href="../design/index.html"><h1>Design</h1></a> | <a href="index.html"><h1>Info</h1></a> | <a href="../links/index.html"><h1>Links</h1></a> | <a href="../insight/index.html"><h1>Insight</h1></a></div>

</div>

</div>
<div id="content">
<p align="center">Contact us with your questions or comments.</p>
<p align="center"><a href="mailto:contact@dreamscapecreative.net">contact@dreamscapecreative.net </a><a href="mailto:contact@dreamscapecreative.net">or </a>phone (843.323.5531)</p>
<p>If you ever want to get writer's block, try writing about yourself. That'll put a cramp in anyone's style, unless they're a pig-headed narcissist. In which case you don't really want to work with them. Either way, here's a bit about us.</p>
<p align="center"><img src="../images/line01.png" width="193" height="37" /><br /></p>

<!-- start blog content -->

<div id="blogs-content">

<?php // This section of code displays each entry as a list ?>
<?php if (have_posts()) : ?>

<ul id="blog-posts">

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

<li <?php post_class() ?> id="blog-post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry"><?php the_content('Read the rest of this entry &raquo;'); ?></div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

</li> <!-- end of li#blog-post-<?php the_post() ?> -->

<?php endwhile; ?>

</ul> <!-- end of ul#blog-posts -->

<?php // show blog posts navigation ?>
<ul id="blog-posts-navigation">
<li><?php next_posts_link('&laquo; Older Entries') ?></li>
<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul> <!-- end of ul#blog-posts-navigation -->

<?php else : ?>

<?php // no blog(s) found display ?>
<div id="blog-posts-not-found">
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
</div> <!-- end of #blog-posts-not-found -->

<?php endif; ?>

</div> <!-- end of blogs-content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

</div>
<div align="center" id="footer">

<div style="padding-top:19px;">All images, text, and brilliance copyright © Dreamscape Creative Studios, Matthew Lamm and/or Anna Lamm. All rights reserved.</div>
</div>
</body>
</html>


This file would then need to be saved as the new theme for that blog or you could just overwrite the existing file contents that you posted. I can't test this so I'm not really sure how close I am, but hopefully it works without error.

[JaCkinbOx]

Wow, you're definitely on to something. I've left the code in for the last edit you made so you can see what's going on.

[tZ]

Now all you need to do is style the page. The HTML looks like its good to go.

If you like I think if the get_footer() function call is removed the WordPress ad stuff will be omitted. I could be mistaken though. You can comment it out by placing // before it and see what happens.


<?php // get_footer(); ?>

[JaCkinbOx]

Thanks, tZ! This sorts out a lot of confusion for me. I expect I can figure it out from here.

Holler at me if you need a favor. :P

[dmerfield]

My friend, save the headaches and use http://expressionengine.com

I managed to do exactly what you are attempting, in one afternoon, I would recomend leaving wordpress, expressionengine is the future.

[JaCkinbOx]

You'd think I'd be used to it by now, as soon as I get a foothold learning one thing, someone tells me there's now a different, wave-of-the-future way to do it.