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

  • neeru_m
    Reply to Need help with logo
    neeru_m
    Thanks Amit for your suggestions. I'll try to improve my logo...
    Today, 04:22 AM
  • AmitMan
    Reply to Music album cover
    AmitMan
    I like the grunge style here. Its a little hard to read at times, especially with the white text on black.

    Nice work, keep up the good stuff!
    Today, 03:29 AM
  • AmitMan
    Reply to Need help with logo
    AmitMan
    I think I see what your trying to do with the underline, but I don't think its working in this case. A simple underline can help to add distance between a title and say a headline and can also make the...
    Today, 03:25 AM
  • AmitMan
    Reply to :::-----What's the graphic standards logo ------:::
    AmitMan
    I've heard of checklists and similar documents used for say ensuring your file is print ready (ensuring all digital images are at least 300dpi, file formats are corrects, appropriate bleeds etc.) but...
    Today, 03:11 AM
  • neeru_m
    Reply to Need help with logo
    neeru_m
    Sorry I just forget to mention. Its a Graphic and Web Design company logo. And the major symbol is a combination of "D" and "L" which is the first letter of company name "Design...
    Today, 02:57 AM
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, 07: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, 08: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, 09: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, 10: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

                           
                          home | site map | advertising/sponsorships | about us | careers | contact us | help courses | browse jobs | freelancers | events | forums | content | member benefits | reprints & permissions about | terms of use | privacy policy | Copyright © 2014 Mediabistro Inc. Mediabistro Inc. call (212) 389-2000 or email us
                          Working...
                          X