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

  • B
    Reply to Why are TrueType fonts bad?
    B
    They might have their reasons that would make sense once they were explained, like font conflicts with OpenType or Type 1 fonts or something to that effect. Who knows. Really, they'll both work just fine....
    Today, 12:41 AM
  • 858graphics
    Reply to Are you interested in selling your company?
    858graphics
    This is all in California, I will check some other sites as well. Looking forward to joining this group!
    Today, 12:12 AM
  • Buda
    Reply to Crop Marks and Cutting Paper
    Buda
    Hi PaperSeeker and welcome to GDF.

    We ask every new member to read the threads posted HERE, particularly this thread to get acquainted with how things work on GDF. They will explain how the...
    Yesterday, 11:39 PM
  • Designia
    Reply to free upload area?
    Designia
    FYI - wetransfer.com is the same as Hightail but the file limit is ginormous
    Yesterday, 09:49 PM
  • PaperSeeker
    Crop Marks and Cutting Paper
    PaperSeeker
    I admit I am a complete amateur so please don't blast me if these are stupid questions. I make paper designs/notepads and I would like to sell them and give them out as gifts, but it is taking me too...
    Yesterday, 09:45 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