Background: I’m messing around with theme development for WordPress. I’m a noob. I’ve completed multiple tutorials on how to develop themes. The theme that I’m currently working on has a problem with page competition I think. I’m building it on MAMP (if that’s important). There is not much to this new theme right now. I just started and made all the template files I thought I’d need. Everything except “index.php” and “style.css” is blank. There is nothing in the functions file either. All the information for the header and footer and menu are currently just in “index.php”.
Problem: When I include the file “page.php” in the theme folder, nothing loads on the page. And I don’t mean just visually. None of the elements from the templates appear at all on the page. I have “index.php” in the theme folder as well. When “page.php” is removed from the folder, the theme loads everything just as it should. It is my understanding, according to the WordPress Hierarchy that the index is called before the page template. I do plan on using pages. So it seems to me that “page.php” is competing with index.php and breaking the template.
The Question: Is “page.php” a competitor to “index.php” and how can I fix it so that it is not breaking my theme? Why might it do this on my theme and not on others?
What I’ve Tried:
- Copied the contents of “index.php” into “page.php”. The theme then loaded as expected but I anticipate this causing problems down the line.
- Leaving page template blank with index template full of code produces nothing. Leaving index blank with page full of code results in the theme loading.
- Copied “page.php” from another theme. Theme broke. Copied index from another theme. Still broken.
- Changed CSS just to make sure I didn’t have any CSS that was causing these elements not to appear. Again though, they don’t even show up when I use firebug or view source.
What I’ve Read: I’ve done my homework to try an resolve the issue without having to ask another question on stack but I can’t seem to find anyone else with this same problem (which only makes me think it’s probably something obvious that I’m doing wrong but since I’m a noob I missed it or something). I’ve read through all of these in their entirety:
-
I’ve done just about every Google search you can think of… to
no avail.
Any help on this matter is greatly appreciated. Latly here is the contents of index.php:
<!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>WordPress Training Wheels</title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container" class="container_16">
<div id="header" class="grid_16"><!-- Header Begins Here -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
<?php
wp_nav_menu(
array(
'theme_location' => 'top_header',
'container' => 'div',
'container_id' => 'top-menu',
'menu_class' => 'top-menu-list',
'fallback_cb' => 'false'
));
?>
</div>
<?php
wp_nav_menu(
array(
'theme_location' => 'bottom_header',
'container' => 'div',
'container_id' => 'menu',
'menu_class' => 'bottom-menu-list'
));
?>
<div id="content">
<div class="sidebar left grid_3"><!-- Left Sidebar Begins Here -->
<h4>Sidebar Header</h4>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Left Sidebar') ) : ?>
<h3 class="widget-title">Categories</h3>
<ul>
<?php wp_list_categories(); ?>
</ul>
<h3 class="widget-title">Archives</h3>
<ul>
<?php wp_get_archives(array('type' => 'monthly')); ?>
</ul>
<?php endif; ?>
</div>
<div id="middle-column" class="grid_6"><!-- Main Content Begins Here -->
<h3>Training Wheels Lesson 1</h3>
<p><img src="<?php bloginfo('template_directory'); ?>/images/training-wheels.jpg" width="426" height="142" alt="Training Wheels" /></p>
</div>
<div class="sidebar right grid_3"><!-- Right Sidebar Begins Here -->
<h4>Sidebar Header</h4>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar') ) : ?>
<h4>No Widgets added</h4>
<p>Please login and add some widgets to this sidebar</p>
<?php endif; ?>
</div>
<div style="clear:both;"></div>
</div><!-- Content Ends Here -->
<div id="footer"><!-- Footer Content Begins Here -->
<p>© WordPress Training Wheels, by wpbedouine</p>
</div>
</div>
</body>
</html>
After a lot of searching I believe I’ve found the solution. “home.php” was not ever being used by the theme because I didn’t have an important line in the comments at the top. I added:
to the top of “home.php” and then went in to the wp-admin and clicked on pages>all pages>home. I then found a drop down list item called “Template” on the right side of the page editor. I changed it from ‘default template’ to ‘Front Page’.
I guess the way I was reading the hierarchy made me assume that WordPress would automatically use “home.php” or “front-page.php” as the template for the homepage. Apparently this is an incorrect assumption because without that line in the comments and telling it what template to use, WordPress will just use page.php as the template.
At least, that’s how it seems to me. Anyone who would like to improve on this answer or make corrections please do.
Just an idea, but could your home page be set to a page, instead of the blog? As in Settings >Reading. http://codex.wordpress.org/Creating_a_Static_Front_Page
Otherwise, I don’t see why your home page would be using page.php instead of index.php.
Below might help.
If you have both Home and Blog page set, then wordpress used index.php for the blog and uses front-page.php for the home page you have set. Incase, only home page is set and their is no front-page.php created, it uses only index.php