Announcement Announcement Module
Collapse
No announcement yet.
Trying to work a Wordpress blog into my site template design Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • KitchWitch
    Reply to Unused designs - who owns them?
    KitchWitch
    Hi EmberMike and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done...
    Today, 01:40 PM
  • KitchWitch
    Comment on Avatars
    KitchWitch
    If you read the original post, you'll find, "The function that allows avatars to be uploaded broke a few weeks ago for unknown reasons." There's a workaround posted in comment #6 you can try....
    Today, 01:39 PM
  • KitchWitch
    Reply to How to choose a good graphic design for a web design company?
    KitchWitch
    Hi Omar and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done anything...
    Today, 01:35 PM
  • KitchWitch
    Reply to Getting started...
    KitchWitch
    Hi rtk3tt and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done...
    Today, 01:32 PM
  • BJMRamage
    Comment on Christmas cards
    BJMRamage
    yeah, we had photos taken in October...just waiting on the pics from the photographer.
    Today, 01:24 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trying to work a Wordpress blog into my site template design

    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.
    Creativity is taking what is and bringing in what isn't.

  • #2
    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...
    Creativity is taking what is and bringing in what isn't.

    Comment


    • #3
      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?
      Last edited by tZ; 05-26-2009, 08:56 PM.

      Comment


      • #4
        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?
        Creativity is taking what is and bringing in what isn't.

        Comment


        • #5
          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.
          Last edited by tZ; 05-26-2009, 09:20 PM.

          Comment


          • #6
            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 &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></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(); ?>
            Creativity is taking what is and bringing in what isn't.

            Comment


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

              PHP Code:
              <?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(); ?>

              Comment


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

                PHP Code:
                <?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.
                Last edited by tZ; 05-26-2009, 10:57 PM.

                Comment


                • #9
                  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.
                  Creativity is taking what is and bringing in what isn't.

                  Comment


                  • #10
                    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 Code:
                    <?php // get_footer(); ?>
                    Last edited by tZ; 05-26-2009, 11:23 PM.

                    Comment


                    • #11
                      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
                      Creativity is taking what is and bringing in what isn't.

                      Comment


                      • #12
                        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.

                        Comment


                        • #13
                          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.
                          Creativity is taking what is and bringing in what isn't.

                          Comment

                          Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc.
                          Working...
                          X