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:
A Similar Question on Stack
A WordPress Forum About Page Hierarchy
I've Double Checked the WordPress Codex
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><?php bloginfo('name'); ?></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:
<?php
/*
Template Name: Front Page
*/
?>
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
Related
I have been really struggling with something, wondered if anyone could help.
I am trying to run a Google Experiment to A/B test my homepage to a variation homepage that i've already created in Wordpress.
I need to add the Google analytics code to the of the two homepage's, i think i need a php code to target the two homepage's.
I previously used (many) Wordpress plugin's and each plugin wouldn't let me specify where the code hit, it just ran the code across the whole site, so I was getting the variation homepage on every link i clicked through on my site.
This is my header.php and i think i need a php code to specify the two homepage's to attack with the Google experiment code?
<header class="banner container" role="banner">
<div class="row">
<div class="col-lg-12">
<a class="brand" href="<?php echo esc_url(home_url()); ?>/"><?php bloginfo('name'); ?></a>
<nav class="nav-main" role="navigation">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav nav-pills'));
endif;
?>
</nav>
</div>
</div>
</header>
Thanks in advance, any help would be much appreciated.
Matt (SEO and CRO intern)
I'm trying to build a Wordpress theme from scratch. The drop down menu isn't appearing, although I added the list pages tag. Here is the code I'm using for the wp_nav_menu function.
<?php wp_head(); ?>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li class="cursive">Mu Alpha Theta</li>
</ul>
<?php wp_nav_menu( array('menu' => 'Menu' )); ?>
</div>
</div>
The pages appear on the site's menu; however, they aren't merging into a drop-down. I'm wondering if it has something to do with the CSS. As in, do I have to create a structure for how it would look? Or, I'm thinking that I'm misusing th wordpress function.
Thank you for reading my questions. I would love to hear any advice.
If it's placing, but not as you want (in a drop down) it would seem to be a css issue. There are many arguments you can parse to the function outlined here in the codex. From there it's just using the id's/classes and css to get the display you're looking for.
Also, from that codex page:
Note: As of 3.5, if there are no menu items, no HTML markup will be
output.
So ensure there is some items in your menu as well, even for testing.
Depending on how fancy you want to be, you may need a custom Walker. Caveat emptor: they are not for the faint of heart.
This is with respect to a buddypress addon (plugin) whose theming I am unable to do. I searched many sites but unable to get a concrete solution. In the plugins page, Header is getting disturbed if its a buddypress theme but is working fine in default wordprress themes.
I am using this code at present at the top of the template page
<?php get_header('buddypress'); ?>
<div id="buddypress">
<div id="profile">
<div class="row">
Than the following stuff like
<?php do_action( 'bp_before_member_home_content' ); ?>
<div id="item-header" role="complementary">
<?php bp_get_template_part ( 'members/single/member-header' ) ?>
</div><!--#item-header-->
I feel this is not the right way to do. I want to know if the plugin has to copy the buddypress template header without disturbing footer or sidebar how it can be done. i.e my plugin should show only the plugin content and should not disturb any part of the buddypress template.
you have to edit your buddy press header with your html structure.
and keep buddy-press functionality as it is.
I have a simple html pages that i want to convert into a WordPress website. I've installed WordPress and created the necessary files. So far i've been looking for a tutorial on how to convert a static website to WordPress but with no luck. Most of the tutorials the user doesn't have knowledge of html or php and as i understand WordPress has functions you have to add to your html page. Here is my index.php
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<title></title>
</head>
<body>
<div id="wrapper">
<?php
include "header.php";
?>
<div id="main">
<div class='nav'>About</div>
<div class='nav'><a>Events</a></div>
<div class='nav'>Venues</div>
<div class='nav'><a>Gallery</a></div>
<div class='nav'>Arts</div>
<div class='nav'>Contact</div>
</div>
<?php
include "footer.php";
?>
</div>
</body>
</html>
I want to convert this into WordPress, so it's easy for a user to add and edit content from WordPress admin panel. Is there any tutorial any of you can recommend that walks me through how to do this? If not, how would you add WordPress functions into my index.php to make it compatible with WordPress.
Wordpress is a completely different beast from a basic static site. All the content is database-driven, which means all your 'html pages' need to be converted to Wordpress pages through the dashboard. Converting won't be a quick process unless your site is very small.
Give each page a sensible title and 'slug' and cut and paste your existing code into the text editor (you'll find plenty of help for this online). Converting images will be more of a hassle - they need to be loaded in via WP media. Links will also need to be changed.
To make sure your site has a static front page (i.e. not a blog) go to Settings...Reading... and click the link.
Styling the content is done through page templates, which come in packages called themes. Use one of the default themes until your content is transferred. They'll even have menus and allow you to modify some styles and header images etc. Have a look at the files in an existing theme to see how it all works.
When you're ready to style, either use one of these themes as a starting point or if you want to start from scratch do a bit of research into blank or starter themes - there's a ton out there. Then I suggest you follow a tutorial on designing a WP theme...
If your site is simple, try taking a barebones/starter WordPress theme and customizing it to use your stylesheets/javascript etc.
This will be much easier and robust than creating something from scratch.
There are also tools like Theme Matcher which will do this for you.
Here's about the simplest barebones super basic explanation I could come up with..
When writing a Wordpress website I think the first thing you should get is that where-as coding a plain HTML site you have to write the structure of the page and the content.. when you write a Wordpress page you are only writing the structure, all of the content is going to be created in the Wordpress backend user portal.
So to start, remove all the content from your code and your left with this (I'm going to remove the PHP includes and start fresh)
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
</body>
</html>
A wordpress theme is made up of several PHP files and whenever a theme is displayed, typically the index.php file is loaded first so that's where we'll start.
Wordpress themes, most of them, amongst all the PHP files that make up the theme, there will be a header.php file, footer.php file..
So in index.php the first line we write is get_header(); (within php tags of course) This is a Wordpress function that is essentially
I assume your going to want your nav on all pages so you can cut all of this code out of your index file and paste it into header.php
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
Back to index.php the second line we'll add is get_footer(); another Wordpress function to get footer.php.
Currently index.php would look like this now..
<?php get_header(); ?>
</body>
</html>
because everything else is in header.php.. well that closing body and html tag.. those go in footer.php. so your index.php file is going to end up looking like this
<?php get_header();
get_footer(); ?>
Header.php is going to look like this:
<!DOCTYPE>
<html <?php language_attributes(); ?>>
<head>
<!-- Page title / meta -->
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php wp_head(); ?>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<?php wp_nav_menu(); ?>
</div>
</div>
and you know what's in footer.php. As far as those CSS and javascript files, those are going to be in your functions.php file.
Wordpress has LOTS and LOTS of prefab functions that they like for you to use and it would take forever to explain them all. Luckily a lot of that's already been done in the Wordpress Codex. Though it's got a lot to be desired as far as the quality of the documentation in some places in my opinion it is something you should spend a good amount of time reading thru before you start, in order to familiarize yourself with all their functions.
I am building a Wordpress website from HTML/CSS/JS templates i made earlier. However this is my first time using it and im really struggling. There are plenty of resources and solutions however none seem to be working for me, for example; one tutorial pointed out you could create template pages if you go into your management screen > pages > add new > page attributes > template. But under page attributes is only "order" although it does claim there should be a template bit if you click help.
I've managed to link my stylesheet but none of my images are appearing. They are all in a folder named images within my theme directory.
In my external stylesheet i have:
body{
background:url("images/subfolder/image01.jpg");
}
I have also tried:
body{
background-image:url("images/subfolder/image.jpg");
}
In my html I have:
<img src="<?php echo get_template_directory_uri(); ?>/images/subfolder/image02.png" alt="DESCRIPTION" />
I have also tried:
<img src="<?php bloginfo('template_directory'); ?>/images/subfolder/image02.png" alt="DESCRIPTION" />
I can't seem to get any of these up.
Here is the deal:) Your folder structure "must" look like this
-Yourtheme Folder
index.php
style.css
page.php
single.php
...other files
-images (images folder)
-js (js folder)
So if you are developing a theme full image path will not help you much because you simply don't know how will your clients domain look, like it can be http://www.mydomain.com/somefolder/ but it can also be http://www.mydomain.com/somefolder/subfolder/anothersubfolder so to access your images use relative paths like this:background-image:url('../images/myimage.jpg'); that way images will work no matter how your domain path will look.
Now to templates:)
In order to wordpress recognize that you are having a template create a file and name it mycooltemplate.php (you can name it however you want)
Your first line inside your template file must read something like this:
<?php /*Template name: This is my cool template*/
?>
That way wordpress will know that you are using a template and you can access it inside
management screen > pages > add new > page attributes > template
So to give a real world example let's create our first template shall we?
We will now create an simple archive template.
Open your text editor and add this code
<?php
/*
Template Name: My Cool Archives Template
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php get_search_form(); ?>
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_categories(); ?>
</ul>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Save it as archives.php (name it however you want) and upload it to your theme folder. So now your folders should look like this:
-Yourtheme Folder
index.php
style.css
page.php
single.php
archives.php (your first template yeeey!!)
...other files
-images (images folder)
-js (js folder)
Hope this helps...
Try specifying the full path to the themes directory from your web root.
eg. /wp-content/themes/[yourtheme]/images/subfolder/image01.jpg
The image paths should work in your CSS but in your HTML/PHP you will need to use something like
<img src="<?php bloginfo('stylesheet_directory'); ?> /images/subfolder/image02.png" />