Announcement

Collapse
No announcement yet.

Trying to work a Wordpress blog into my site template design

Collapse
X
  • 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, 02: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, 03: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, 04: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, 05: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

                          Search

                          Collapse

                          Sponsor

                          Collapse

                          Incredible Stock

                          Latest Topics

                          Collapse

                          • B
                            Reply to Recently fired. Climbing out of depression. I need some advice.
                            B
                            Seriously, have you tried antidepressants or therapy? Depression is a serious problem that interferes with people's lives, and you've just spelled out an excellent example. If you haven't already done...
                            Yesterday, 11:45 PM
                          • keluitry
                            Reply to Illustrator - Recolouring a vector remains in grayscale
                            keluitry
                            Thanks for your response! Had a break and came back to it, and I think I stumbled upon your method by messing around, and it's worked! Cheers for the help, appreciate it!
                            Yesterday, 11:31 PM
                          • B
                            Reply to Illustrator - Recolouring a vector remains in grayscale
                            B
                            It sounds like you've run into one of my personal annoyances with Illustrator, and I have no idea why Adobe hasn't fixed this old problem. I half suspect there's some reason for it that I'm overlooking,...
                            Yesterday, 11:26 PM
                          • keluitry
                            Illustrator - Recolouring a vector remains in grayscale
                            keluitry
                            Hi guys,

                            I'm new to Illustrator and am working on a graphic for my clothing business. I want parts of this in different colours, so I'm slicing them using the knife tool, and going from there....
                            Yesterday, 10:10 PM
                          • Virindi
                            Career advice
                            Virindi
                            I'm a UX Designer considering a job doing UX, but with the title "Associate Director Digital Media". Would this title hurt me down the road if I were to apply to other design jobs?
                            Yesterday, 07:59 PM
                          GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
                          Working...
                          X