Jump to content

Wordpress From Scratch


JamesCoats

Recommended Posts

I am doing the Wordpress From Scratch videos and have had good luck until Video 22. It seems my current post "Hello World" and footer "shadow" are rendering below the white background of the next three posts. I have used the "completed files" to see what I was doing wrong and I get the same issue. I have Googeled a bit but I don't think I'm using well targeted search terms for this problem. All my pictrues and everything less seems correct. I just can't get the current post to render under the title just prior to the next three posts.

 

Here is a copy of the php file that is (I think) the problem:

 

(index.php)

 

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">
        <?php if ( have_posts() ) : ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            <?php endwhile; ?>

            <?php twentytwelve_content_nav( 'nav-below' ); ?>

        <?php else : ?>

            <article id="post-0" class="post no-results not-found">

            <?php if ( current_user_can( 'edit_posts' ) ) :
                // Show a different message to a logged-in user who can add posts.
            ?>
                <header class="entry-header">
                    <h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
                </header>

                <div class="entry-content">
                    <p><?php printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
                </div><!-- .entry-content -->

            <?php else :
                // Show the default message to everyone else.
            ?>
                <header class="entry-header">
                    <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
                </header>

                <div class="entry-content">
                    <p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
                    <?php get_search_form(); ?>
                </div><!-- .entry-content -->
            <?php endif; // end current_user_can() check ?>

            </article><!-- #post-0 -->

        <?php endif; // end have_posts() check ?>

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(this is the header.php)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

    
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >

    <div id="wrapper">
        <div id="col_left">
            <div class="logo">
                <a href="#"><img src="<?php bloginfo('template_directory');?>/images/logo.png"<?php bloginfo ('template_directory');?>/images/logo.png" alt="Killer Blog"></a>
            </div>
            
            <div class="links">
                <h4>Categories:</h4>
                <ul class="categories">
                    <li><a href="#">Category</a></li>
                    <li><a href="#">Category</a></li>
                    <li><a href="#">Category</a></li>
                    <li><a href="#">Category</a></li>
                    <li><a href="#">Category</a></li>
                    <li><a href="#">Category</a></li>
                </ul>
                
                <h4>Favorite Links:</h4>
                <ul class="favorites">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
            
            <div class="social">
                <h4>Get Social:</h4>
                <a href="#" class="facebook"><img src="<?php bloginfo('template_directory');?>/images/social-facebook.gif" alt="facebook"></a>
                <a href="#" class="twitter"><img src="<?php bloginfo('template_directory');?>/images/social-twitter.gif" alt="twitter"></a>
            </div>
            <img src="<?php bloginfo('template_directory');?>/images/shadow-left.png" alt="">
        </div>
        <div id="col_right">
            <div class="search">
                <form action="" method="">
                <div>
                    <input name="search" type="text" value="Search" class="text"
                        onfocus="if (this.value == 'Search') { this.value = ''; }"
                        onblur="if (this.value == '') { this.value = 'Search'; }">
                    <input name="submit" type="submit" value="Submit" class="submit">
                </div>
                </form>
            </div>
            
            <div class="navigation">
                <ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page</a></li>
                    <li><a href="#">Page</a></li>
                    <li><a href="#">Page</a></li>
                    <li><a href="#">Page</a></li>
                </ul>
            </div>
            
            
            
            
            
            
            
            
            <div class="banner">
                <ul>
                    <li><img src="<?php bloginfo('template_directory');?>/images/banner1.jpg" alt=""></li>
                    <li><img src="<?php bloginfo('template_directory');?>/images/banner2.jpg" alt=""></li>
                </ul>
                <div class="pager">
                    <a href="#" id="prev">Prev</a>
                    <a href="#" id="next">Next</a>                    
                </div>
            </div>
            
            <div class="content">
            
                <h1>Welcome to the Killer Blog! Read some of our recent blog posts below:</h1>
                
                <div class="post">
                    <div class="excerpt">
                        <a href="#"><img src="<?php bloginfo('template_directory');?>/images/thumb.jpg" alt=""></a>
                        
                        <div class="text">
                            <h2><a href="#">Blog Post Title</a></h2>
                            <div class="meta">1.01.2013  |  <a href="#">category</a>, <a href="#">category</a>, <a href="#">category</a></div>
                            
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu turpis justo, ac rutrum dui. Integer quis metus enim. Praesent id justo non purus tempor faucibus sit amet non libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. <a href="#">read more</a></p>
                        </div>
                    </div>
                    
                    <div class="excerpt">
                        <a href="#"><img src="<?php bloginfo('template_directory');?>/images/thumb.jpg" alt=""></a>
                        
                        <div class="text">
                            <h2><a href="#">Blog Post Title</a></h2>
                            <div class="meta">1.01.2013  |  <a href="#">category</a>, <a href="#">category</a>, <a href="#">category</a></div>
                            
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu turpis justo, ac rutrum dui. Integer quis metus enim. Praesent id justo non purus tempor faucibus sit amet non libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. <a href="#">read more</a></p>
                        </div>
                    </div>
                    
                    <div class="excerpt">
                        <a href="#"><img src="<?php bloginfo('template_directory');?>/images/thumb.jpg" alt=""></a>
                        
                        <div class="text">
                            <h2><a href="#">Blog Post Title</a></h2>
                            <div class="meta">1.01.2013  |  <a href="#">category</a>, <a href="#">category</a>, <a href="#">category</a></div>
                            
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu turpis justo, ac rutrum dui. Integer quis metus enim. Praesent id justo non purus tempor faucibus sit amet non libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. <a href="#">read more</a></p>
                        </div>
                    </div>
                </div><!--post-->
                
                <div class="pager">
                    <a href="#">previous posts</a>
                </div>
            </div><!--content-->
            
            
            




 

 

 

 

 

(this is the footer.php)

 

 

            <img src="<?php bloginfo ('template_directory');?>/images/shadow-right.png" alt="">
            
            <div class="footer">
                © Copyright 2013 Killer Blog
            </div>
            
        </div><!--col_right-->
    </div><!--wrapper-->
<?php wp_footer(); ?>
</body>
</html>
 

 

Link to comment
Share on other sites

What is the file name of that middle file? The one that starts:

<div class="banner">
                <ul>
                    <li><img src="<?php bloginfo('template_directory');?>/images/banner1.jpg" alt=""></li>
                    <li><img src="<?php bloginfo('template_directory');?>/images/banner2.jpg" alt=""></li>
Link to comment
Share on other sites

Sorry, I was gone for the weekend, so I didn't have the chance to look at this.

 

After understanding your files a bit better, this isn't a CSS issue. Based on these files, the site is displaying as it should -- you have a header.php file, which has the header information, as well as filler content (which I don't think should be there?), you have an index.php page, which is pulling from Wordpress which is loaded by default, and you have the footer.php file. 

 

-- I would start by comparing my header.php file with yours. You should see that my header.php page includes less information -- it doesn't include the blog post excerpts, and ends after the main navigation. I discuss the header.php file and integrating our template code into Wordpress in video 23.

 

-- I'm also using front-page.php to control what appears on the home page, which I discuss in video 24. Assuming you have that file in place, you shouldn't ever be using that index.php file in the theme.

 

My best guess is that at some point, you've accidentally included additional code in the header.php file that shouldn't be there. That file should end after the <div class="navigation"></div> section -- it shouldn't include the banner or content sections. I think this extra code is throwing you off, and making you think that things are perhaps more broken than they are?

Link to comment
Share on other sites

Ben,

 

Thanks for the response. I will begin working on this. I was surprised to see you working on the weekend anyway. Completely understand you have to be off at some point. I really like your video and I am learning fast. I will go back a vid or two and check against the final files.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...