treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Lynda.com course - Create and Edit Custom Theme

  • This is a really good course from Chris Coyier which I highly recommend. It covers creating the psd mockup of the site and converting the psd to HTML and CSS as well as then converting it to a custom wp theme. Along the way Chris points out some really useful photoshop tips and wordpress resources. I learned a ton.

    One embarrassing question - I can't get the index.php or the home.php page to display by clicking on the menu item 'home'. Everything else is working nicely - the header, sidebar, footer, comments, single page, blog page, products and category pages all do what they're supposed to. From the dashboard, clicking on 'visit site' works, displaying the home page properly but why wont it show up when clicking on the menu item from within the site itself?

    I've used wp version 3.5.1 which is the latest version - is there some setting I need to alter?

  • Could you post up a link?

  • I developed it locally as a learning project.

    Just to clarify, when I click on the nav link to home or click on a nav item which doesn't have a specific page template set up the sidebar, header and footer display but nothing else and the layout is incorrect.

    If I key in the full url e.g. localhost/widgetCorp/index.php or localhost/widgetCorp/home.php or localhost/widgetCorp/

    Within the dashboard, from the pages menu if I click on view page, then I just get the header, sidebar and footer templates with the layout awry. Is this something to do with how the pages are set up? currently they are set to default template.

  • It's really difficult to answer this question. Can you post the code you have in your index.php? This might help us better understand what is going on.

    You might want to check out WordPress Template Hierarchy. To better understand how WordPress template files work.

  • Yea, I appreciate that its difficult without being able to access the site and the code. I'll try and put it up tomorrow. In the meantime, here's the code for index.php

    <?php get_header(); ?>
         <div id='main-content'>
    
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
    
          <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    
          <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
    
          <div class="entry">
            <?php the_content(); ?>
          </div>
    
          <div class="postmetadata">
            <?php the_tags('Tags: ', ', ', '<br />'); ?>
            Posted in <?php the_category(', ') ?> | 
            <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
          </div>
    
        </div>
    
      <?php endwhile; ?>
    
      <?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
    
      <?php else : ?>
    
        <h2>Not Found</h2>
    
      <?php endif; ?>
    
    </div> 
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>
    

    and this is home.php

          <?php get_header(); ?>
      <div id='main-content'>
          <p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Donec non elementum nunc. Vestibulum orci nisl, vulputate nec elementum nec, 
          aliquet at est. Cras porta leo nec leo porttitor pharetra. In id eros nibh, 
          eu tincidunt libero. Duis a metus nibh. Quisque sit amet ipsum sit amet 
          lorem luctus elementum. </p><blockquote id="main-quote">
            We are able to do the quote we do because of the quality of these widgets.
            <cite>- Frank James, Tick Tock Corp.</cite>
          </blockquote>
    
          <h2>Featured Widgets</h2>
          <ul id="featured-widgets">
          <?php query_posts("posts_per_page=1&post_type=page&post_parent=25"); the_post(); ?>
            <li>
              <h3><?php the_title(); ?></h3>
              <p><?php the_excerpt(); ?></p>
              <div class="image-and-button">
              <img src="<?php echo get_post_meta($post->ID, "product_regular", true); ?>" alt="Image of <?php the_title();?>" />
              <a href="<?php the_permalink();?>" class="button">View Product</a>
              </div>
            </li>
    
            <?php query_posts("posts_per_page=1&post_type=page&post_parent=27"); the_post(); ?>
            <li>
              <h3><?php the_title(); ?></h3>
              <p><?php the_excerpt(); ?></p>
              <div class="image-and-button">
              <img src="<?php echo get_post_meta($post->ID, "product_regular", true);?>" alt="Image of <?php the_title();?>" />
              <a href="<?php the_permalink(); ?>" class="button">View Product</a>
              </div>
            </li>
          </ul> 
        <br />
      <h2>Web Special<em> of the</em> Week</h2>
      <div class="coupon">
        Buy two sprockets get the third free!
      </div>
    </div> 
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>
    
  • I'm not sure if the comment box on this site is breaking your code. But the line after this:

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

    says:

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

    Which is invalid syntax.

    Check out index.php of HTML5 Reset WordPress theme.

  • The problem was down to a page.php script in the theme which I didn't realise was there, so I just needed to update that script. Always a good call to revisit the template hierarchy, thanks.