so I am building a custom wordpress theme for a client (I am a freelancer, pretty new to wordpress) and I have built the main theme that works 100% on the home page, but when I go into a post, archive, etc, the image path breaks, the sidebar breaks. I have attached photos for you to see:
And this is what the post looks like:
======== code edit =======
header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="wp- content/themes/custom1/css/reset.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<!-- HTML 5 shiv -->
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page-wrap">
<section id="header">
<div id="logo"></div>
<div id="nav">
<div class="wrapper">
<nav>
<ul>
<!-- <li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li> -->
<?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
</section> <!-- end of Header -->
<section id="page">
<div class="wrapper">
index.php:
<?php get_header(); ?>
<section id="main_content">
<article>
<?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 »', '1 Comment »', '% Comments »'); ?>
</div>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</article>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
and page.php (the buggy one):
<?php get_header(); ?>
<section id="main_content">
<article>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>
</div>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php // comments_template(); ?>
<?php endwhile; endif; ?>
</article>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
sorry for the long post 🙂
So I found the answer after alot of searching in a random blog post (I forgot where, sorry).
What I was doing: the image only worked on the homepage and no other page if I put the link to the image as:
wp-content/themes/[mytheme]/images/image.jpg
and it worked on all other pages but not the home page when I put the following:
../wp-content/themes/[mytheme]/images/image.jpg
So thank you to Nicholas King, George Marques, Domdev and Scott Simpson for putting me on the right track.
Thanks,
Josh