WordPress.org

Ready to get started?Download WordPress

Forums

Footer not working on index.php (17 posts)

  1. sarahjnassif
    Member
    Posted 5 years ago #

    I can't figure out why my index.php file puts my footer at the top while the page.php puts it in it's proper place at the bottom. Can anyone help me? I'm working from MAMP on my computer hard drive to work on my theme.

    Here's my index.php code:

    <?php
    /*
    Template Name: StaticPage
    */
    get_header();
    ?>
    
    <br /><br /><br /><br /><br />
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <div class="entry">
    			<h2 class="entrydate"><?php the_date() ?></h2>
    			<h3 class="entrytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
    			<div class="entrybody">
    				<?php the_content(__('(more...)')); ?>
    				<p class="comments_link">
    					<?php
    						$comments_img_link = '<img src="' . get_stylesheet_directory_uri() . '/images/comments.gif"  title="comments" alt="*" />';
    						comments_popup_link('No Comments', $comments_img_link . ' 1 Comment', $comments_img_link . ' % Comments');
    					?>
    				</p>
    
    			</div>
    	<!--
    	<?php trackback_rdf(); ?>
    	-->
    </div>
    
    <?php comments_template(); // Get wp-comments.php template ?>
    
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    
    <?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
    </div>
    </div><!-- The main content column ends  -->
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>

    Here's my page.php code:

    <?php
    /*
    Template Name: StaticPage
    */
    get_header();
    ?>
    
    <br /><br /><br /><br /><br />
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="entry">
    			<h2 class="entrydate"><?php the_date() ?></h2>
    			<h3 class="entrytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
    			<div class="entrybody">
    				<?php the_content(__('(more...)')); ?>
    				<p class="comments_link">
    					<?php
    						$comments_img_link = '<img src="' . get_stylesheet_directory_uri() . '/images/comments.gif"  title="comments" alt="*" />';
    						comments_popup_link('No Comments', $comments_img_link . ' 1 Comment', $comments_img_link . ' % Comments');
    					?>
    				</p>
    			</div>
    	<!--
    	<?php trackback_rdf(); ?>
    	-->
    </div>
    
    <?php comments_template(); // Get wp-comments.php template ?>
    
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    
    <?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
    </div>
    </div><!-- The main content column ends  -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    Here's my footer.php code:

    <!-- begin footer -->
    
    <div id="footer" >
    <!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
    	<p>
    		<?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/">WordPress</a>
    		<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
    		and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
    		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
    	</p>
    </div>
    <?php do_action('wp_footer'); ?>
    
    </body>
    </html>
  2. esmi
    Forum Moderator
    Posted 5 years ago #

    Um... your index.php file is a page template? That could be the problem. Rename your current index.php file to something like homepage.php. Amend the Template Name at the top of the file to HomePage (note: every custom template file should have an unique template name). Then set up a standard index.php (posts) template.

    If you want your home page to be a static page that can use your custom Home Page template, see Setting Up A Static WordPress Home Page.

  3. imranexpt
    Member
    Posted 5 years ago #

    try deleting the template name line in your index.php , and make sure you don't have any home.php or homepage.php file.. if you have then wordpress will use them instead..

    .
    -----------------------------------
    Premium wordpress theme generator with CMS features
    http://www.wpthemebuilder.com

  4. sarahjnassif
    Member
    Posted 5 years ago #

    Thanks for your responses. I tried imranexpt's idea. Did not work. I don't have a home.php or homepage.php file. Before I try emsi's idea, I thought I should provide more info.

    Here are the files I have in my theme folder:
    -404.php
    -comments.php
    -header.php
    -footer.php
    -index.php
    -page.php
    -sidebar.php
    -style.css
    -rectangle.js
    Images folder

    Here is my CSS code, which I think could be the culprit. I am very much a beginner, so any guidance is appreciated!

    /*
    	Theme Name: Gentle Calm
    	Theme URI: http://ifelse.co.uk/gentlecalm
    	Description: Liquid Serenity
    	Version: 1.0
    	Author: Phu Ly
    	Author URI: http://ifelse.co.uk/
    */
    
    /************************************************
     *	Main structure															*
     ************************************************/
    body {
      margin:0px;
      padding:0px;
      text-align:left;
      font:12px  Arial, Verdana, Helvetica, sans-serif;
    	color: #555555;
    	background:#FFFFFF;
    	background-image: url('images/header2.gif');
    	background-repeat: no-repeat;
    	background-position: top left;
    /*	border:solid 1px red*/
    
    }
    #maincol {
      width:620px;
      float:left;
      border: solid 1px blue;
    
    }
    #maincol .col {
    	padding-bottom: 0.5em;
    	padding-left:2.5em;
    	padding-right:8.5em;
    	line-height:1.6em;
    /*	border: solid 1px yellow;*/
    }
    #navcol {
    /*	padding:0.5em;
    	padding-top: 2em;
    	clear:right;
    	width:25%;
        right:0px;
    	float:right;
        font-size:1em;  */
    
    	position: absolute;
    	left: 650px;
    	top: 180px;
     	z-index:25	
    
    }
    #container{
     width:620px;
     text-align:left;
     margin-left: auto;
     display:block;
     margin-right: auto;
     padding-bottom:0;
    /* border: solid 1px purple;*/
    }
    
    #container:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    #footer{
    	color:#555555;
    	clear: both;
    	padding: 0px 0px;
    	text-align:center;
    	padding-left:-2.5em;
    
    }
    
    #footer a{
    	color: #F3703E;
    	font-weight:bold;
    }
    
    a:link {
    	color: #F3703E;
    	text-decoration: none;
    }
    a:visited {
    	color: #f3703e;
    	text-decoration: none;
    }
    a:hover {
    	color: #f1a385;
    	text-decoration: none;
    }
    a:active {
    	color: #f3703e;
    	text-decoration: none;
    }
    
    /************************************************
     *	Header																			*
     ************************************************/
    #header {
    	margin-top: 2em;
    	margin-bottom:0px;
    
    	padding-top:2em;
    	padding-bottom:1em;
    	padding-right:0em;
    	padding-left:2.0em;
    
    	text-align:left;
    	font:   Arial, Verdana, Helvetica, sans-serif;
    	color: #555555;
    	background:#FFFFFF;
    	width:200px;
    
    	font-size: 25 em;
    /* border: solid 3px purple;*/
    
    }
    #headbar{
    	background:##C6EAF1;
    	height:0.3em;
    	margin-bottom:8em;
    
    }
    #header h1{
    	padding:0px;
    	margin: 0px;
    	margin-bottom:0.3em;
    	font-size: 1.2em;
    	letter-spacing:0.2em;
    }
    #header h1 a {
    	color:#f3703e;
    }
    #header h1 a:hover {
    	text-decoration:none;
    	color: #f3703e;
    
    }
    #header img {
    	border:none;
    }
    #subtitle {
    	margin-bottom:0.3em;
    	font-size: 0.8em;
    	text-transform:uppercase;
    	color:#f3703e;
    }
    /************************************************
     *	Content																			*
     ************************************************/
    h1, h2, h3, h4 {
    	font-family: Arial, Verdana, Helvetica, sans-serif;
    }
    h2 {
    	margin-bottom:0.3em;
    	font-size: 0.8 em;
    	font-weight:normal;
    	color:#33b3cc;
    }
    h2.entrydate{
    	margin-bottom:0.3em;
    	font-size: 0.8 em;
    	font-weight:normal;
    	color:#33b3cc;
    	padding-left:30px;
    }
    .entrymeta{
    
    	color:#f3703e;
    }
    h3.entrytitle a{
    	color: #f3703e;
    	padding-left:30px;
    }
    h3.entrytitle{
    	margin-top:0px;
    	margin-bottom:0.1em;
    	font-size: 1.8em;
    	padding-left:0px;
    }
    .entrybody p {
    	margin-top:0.8em;
    	margin-bottom:1.6em;
    	padding-left:30px;
    }
    .entry{
        width:580px;
    	padding-left: 30px;
    	font-family: Arial, Verdana, Helvetica, sans-serif;
    	font-size: 1.05em;
    }
    /************************************************
     *	Navigation Sidebar													*
     ************************************************/
    ul {
     margin:0 0 1em 0;
     padding-left:0px;
     list-style-type:none;
    
    }
    
    li {
     margin:0 0 1em 0;
     padding-left:0px;
     margin-left:0px;
     list-style-type:none;
    }
    
    /************************************************
     *	Comments													*
     ************************************************/
    /*"One response to...*/
    h2#comments{
    	text-align:left;
        width:580px;
    	padding:10px;
    	margin-bottom:0em;
    	margin-top:2em;
    	margin-left:2.5em;
    }
    ol#commentlist {
    text-align:left;
        width:580px;
    	padding:0px;
    	margin-bottom:1em;
    	margin-top:0em;
    	margin-left:2.5em;
    	color: #f3703eb;
    	list-style-type: none;
    	font-size:0.9em;
    }
    #commentlist li  p{
    	padding: 0px;
    	margin-left: 2.5em;
    }
    .commentname {
    	float: left;
    	margin-left: 2.5em;
    	padding: 0 0 0 0;
    }
    .commentinfo{
    	width: 20em;
    	float: right;
    	text-align: right;
    }
    .commenttext {
    	clear: both;
    	padding-top: 0px;
    	margin-top: 0px;
    	margin-left: 2.5em;
    	margin-bottom: 0em;
    	margin 0px;
    
    }
    #commentsformheader{
    	padding-left:0em;
    	font-size: 1.4em;
    	margin-left:2.5em;
    	padding:10px;
    }
    #commentsform{
    	margin-top:none;
    	text-align:left;
    	margin: 0px;
    
    }
    #commentsform form{
    	text-align:left;
    	margin: 2.5em;
    }
    #commentsform p{
    	margin-left:2.5em;
    }
    #commentsform form textarea{
    	width:60%;
    }
    /************************************************
     *	Extra																				*
     ************************************************/
    code{
    	font-family: 'lucida console', 'Courier New', monospace;
    	font-size: 0.8em;
    	display:block;
    	padding:0.5em;
    	background-color: #E5EaE4;
    	border: 1px solid #d2d8d1;
    }
    input[type="text"], textarea {
    	padding:0.3em;
    	/*border: 1px solid #CCCFBC;
    	color: #656F5C;
    	-moz-border-radius: 0.5em;*/
    }
    input[type="submit"]{
    	padding:0.2em;
    	font-size: 1.25em;
    	border: 1px solid #CCCFBC;
    	color: #353F2f;
    	background: #fefff8;
    	-moz-border-radius: 0.5em;
    }
    blockquote {
    	border-left: 3px solid #686868;
    	color: #888;
    	padding-left: 0.8em;
    	margin-left: 2.5em;
    }
    a img {
    	border:none;
    }
    .imgborder img{
    	border: 1px solid #87a284;
    	background:#CCCFBC;
    	padding:0.3em;
    }
    .imgborder{
    	text-align: center;
    }
    
    a.a-nav:link {
    	font-size: 12px;
    	letter-spacing:1px;
    	color: #F3703E;
    	padding-left:7px;
    	padding-right:7px;
    	text-decoration: none;
    	margin-left: 0px;
    }
    a.a-nav:visited {
    	color: #F3703E;
    	letter-spacing:1px;
    	padding-left:7px;
    	padding-right:7px;;
    	text-decoration: none;
    }
    
    a.a-nav:hover {
    	color: #f1a385;
    	letter-spacing:1px;
    	padding-left:7px;
    	padding-right:7px;
    	text-decoration: none;
    }
    a.a-nav:active {
    	color: #F3703E;
    	letter-spacing:1px;
    	padding-left:7px;
    	padding-right:7px;
    	text-decoration: none;
    }
  5. Spencer Hill
    Member
    Posted 5 years ago #

    Try this: <div style="float: left; clear: both; width: 100%;"><?php get_footer(); ?></div>

  6. sarahjnassif
    Member
    Posted 5 years ago #

    ws5f3dj7 I put that code in the index.php file and the footer still goes up. Is there a way I can post my theme in development online somewhere without having to affect my current blog? then perhaps I could show you the problem.

  7. Spencer Hill
    Member
    Posted 5 years ago #

    Would you be able to upload just the template files to a sub directory and then send me that link?

  8. EMG
    Forum Volunteer
    Posted 5 years ago #

    Without being linked to a working copy of your site, I am willing to bet that the problem is with the navcolumn:

    #navcol {
    /*	padding:0.5em;
    	padding-top: 2em;
    	clear:right;
    	width:25%;
        right:0px;
    	float:right;
        font-size:1em;  */
    
    	position: absolute;
    	left: 650px;
    	top: 180px;
     	z-index:25	
    
    }

    The position: absolute tends to mess with the placement of layouts and the like because of it's positioning and z-index.

    If you absolutely must use absolute positioning (I don't see why you do or would in this case), then try adding a position: relative to the footer and see if that helps the footer stay at the bottom of everything.

    Also, if you can't show us a working copy of your site, can you please copy and paste the code for the header file?

  9. sarahjnassif
    Member
    Posted 5 years ago #

    Thanks for the help. I fixed the footer problem by getting rid of the positioning/z index thing. Now I have uploaded the theme to my blog which is live at http://www.rectangledesigns.com/news/

    (I have only tested in FF on a Mac, so I'm sure there are some scary things that I'll see if I look at it on a PC or IE.)

    The only problems now are
    1. get rid of the floating logo image on the left. I can't find where to axe that--it wasn't there on my MAMP trial of the theme, so I thought it must be in my css or html for the website. I thought I found it and deleted it but it did not work.

    2. fix the entry title wrap for long titles

    3. on pages that show every entry, the footer winds up somewhere in the middle.

    If you notice any other issues I should fix, please let me know. This theme was doctored up from an older WP theme, so I don't know for sure if I've made it 2.8 compliant or whatever.

    thanks!

  10. EMG
    Forum Volunteer
    Posted 5 years ago #

    On 1: Remove the <div id="Layer1"> and its included content (which is the image) from the header.php file or whichever template file it is located in.

    On 2: The long entry titles indents because the h3 a specifications says so. The indention looks better, so apply the same indention to the h3 in its entirety like so:

    h3.entrytitle{
    	margin-top:0px;
    	margin-bottom:0.1em;
    	font-size: 1.8em;
    	padding-left:30px;
    }

    (The padding-left is what will fix your problem.)

    On 3: Your footer is missing on your separate entries because you don't have your footer div in your coding at all somehow on your separate entries page. This I suspect is because of some unclosed tags. Look around in your code for unclosed tags. Additionally the footer seems to show only in your 'home', 'gallery', 'retailers', 'about', and 'contact'.

    Suggestions: PLEASE validate your coding by running it through W3C's XHTML and CSS validator.

    More than likely, that will show you where your coding is causing you troubles and more than likely, fixing these problems will help fix what you're looking to fix. :)

    Also, styling and templating a WP site is a bit different from styling and templating a regular website due to all the php hooks and code and the like that is typically involved and remembering where all the tags need to be opened and closed.

    Good luck and hopefully this helps.

  11. sarahjnassif
    Member
    Posted 5 years ago #

    EMG-- Your advice was very helpful. Thanks - I think I made a lot of progress today.

    Further questions:
    1. I've determined my footer problem must be related to the default maincol height? Not sure if I'm saying that right. I've put a dashed green line around the maincol element. The footer is at the bottom of it--it's just that the blog entry element is running over it. I cleaned up my nav column so it's not so long, so that area is ok. By the way, why is my maincol shifted so far to the right--when the code says this:

    #maincol {
      width:850px;
      float:left;
    border:1px dashed green;
    }

    2. I tried to make a special h2 class called h2.navheading so that I could force the word "categories" up a bit--there is so much space under my little Etsy thing. I'm not sure if I tried the right properties. Any suggestions?

    thanks!

  12. EMG
    Forum Volunteer
    Posted 5 years ago #

    Try adding a:

    clear: both;

    to your footer CSS and seeing what happens.

    Additionally, validating your page with W3C returns 36 errors. Some of them are mostly cosmetic (font tags are deprecated in XHTML for instance), but some of them seem to be serious... like miswritten tags or unclosed tags or prematurely closed tags.

    Link to Validation Result and Errors

    If you can fix those errors and add the clear: both like I suggested to the footer, we should be able to clear up any other problems better, including figuring out why your footer scooted right.

    It's awesome that you're learning from all of this; hopefully when everything's straightened out, these problems (which I'm sure we've all faced in one form or another during our learning process) won't be so troublesome anymore.

    :)

  13. sarahjnassif
    Member
    Posted 5 years ago #

    thanks for your detailed help. I can't figure out which document the w3 error is referring to--is it one of my php files? I did a search to find the first error in all the php and .js files and could not even find it. what am I not understanding?

  14. sarahjnassif
    Member
    Posted 5 years ago #

    ok...I see that it's the news.html file I need to fix the errors in.

    In trying to fix the first error (javascript line 68) I don't understand what to do. I resaved with lowercase javascript (was JavaScript) but the error still says the same thing. I don't understand what to do regarding the document type issue. Should I change the doctype info somehow?

  15. sarahjnassif
    Member
    Posted 5 years ago #

    I don't understand what this means
    font tags are deprecated in XHTML for instance

    I see that many errors refer to
    "element "font" undefined. Did you mean "font" or "basefont"?"

    what do I need to do - and do I do it in the html or the css?

    thank you...

  16. sarahjnassif
    Member
    Posted 5 years ago #

    EMG - I'm diligently working away but still have lots of questions. Please forgive me if I've not done everything you've recommended--it is probably that I didn't understand. Here's where I'm at now:

    1. I figured out that it was an offending "container' element in the CSS that caused the footer and maincol to scoot over. I commented it out in css and in the index file and the problem went away.

    2. The footer still won't behave. I've done the "clear" thing to several places where footer code is but to no effect

    3. I thought maybe it was how the posts are styled that makes them flow over the footer (rather than the footer being in the wrong place). So I found that the posts are styled per the .entry class, but I don't see what element .entry is a class under. Should the .entry class refer to an element such as "content." I attempted to create a #content ID but it recreated the container issue.

    4. Overflow property: can I use this to keep the post text from flowing over the footer? How and where do I put the code?

    5.FYI. I have the number of posts to show at 2 per page.

    6. I don't think I understand how my news.html file relates to all my theme files, therefore making it hard for me to understand how to correct all the W3 validation errors. I can't find any good reading on the topic explaining it. Can you advise how to visualize all the files interacting?

    mostly, I just want to get the footer to go to the bottom of whatever the page displays and stay there. I'd love any help on this!

  17. sarahjnassif
    Member
    Posted 5 years ago #

    another issue: I can't seem to change my comments setting. I've gone in to a couple posts and enabled comments. But when I bring up that post, it still says "comments off" and "comments are closed" at the bottom.

Topic Closed

This topic has been closed to new replies.

About this Topic