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>Home</li>
<li>About Us</li>
<li>FAQ's</li>
<li>Contact Us</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><?php the_title(); ?> </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
<?php bloginfo('template_directory'); ?>/images/image1.jpg
So thank you to Nicholas King, George Marques, Domdev and Scott Simpson for putting me on the right track.
Thanks,
Josh
Related
Looking for help in getting my wordpress theme to display header image on all pages and not just the home page as it currently does. All pages use get_header php command and the header.php contains the following code:
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package Superb_Landingpage
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="navigation-wrapper">
<div class="site grid-container">
<header id="masthead" class="site-header grid-x grid-padding-x">
<div class="site-branding large-4 medium-10 small-9 cell">
<?php
the_custom_logo();
if ( is_front_page() && is_home() && is_page() ) :
?>
<div class="logo-container">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php
else :
?>
<div class="logo-container">
<h2 class="site-title"><?php bloginfo( 'name' ); ?></h2>
<?php
endif;
$superb_landingpage_description = get_bloginfo( 'description', 'display' );
if ( $superb_landingpage_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $superb_landingpage_description; /* WPCS: xss ok. */ ?></p>
<?php endif; ?>
</div>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation large-8 medium-2 small-3 cell">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
</div>
</div>
<?php if ( get_header_image() ) : ?>
<?php if ( is_front_page() ) : ?>
<div class="content-wrap">
<div class="bottom-header-wrapper">
<img src="<?php echo esc_url(( get_header_image()) ); ?>" alt="<?php echo esc_attr(( get_bloginfo( 'title' )) ); ?>" />
</div>
</div>
<?php endif; ?>
<?php endif; ?>
<div id="page" class="site grid-container start-container-head">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'superb-landingpage' ); ?></a>
<div id="content" class="site-content grid-x grid-padding-x">
What do I add/remove to simply have the header display on all pages?
I've tried removing the if/else conditions in the header.php but wordpress keeps rolling back the edit claiming errors. Any help is greatly appreciated! Thank you.
Try it
<?php
if ( is_home() ) {
// This is a homepage
} else {
// This is not a homepage
}
?>
<?php
if ( is_front_page() && is_home() ) {
// This is a homepage
} else {
// This is not a homepage
}
?>
If this does not work try this
<?php
if ( is_front_page() ) {
// This is a homepage
} else {
// This is not a homepage
}
?>
I'm quite new to WP, and am trying to learn some HTML5/CSS/PHP while using it. Currently I'm having some troubles.
I created a custom page (to have just a clean blank page without the header etc...) and I also created a Contact Form 7 that should be responsive..
However this doesn't work. When I load it on mobile, it does not adjust.
This is the code for the template page:
<?php
/**
* Template Name: Blank Page Header
*
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<div id="logo2" align="center"><img src="http://adventoury.com/wp-content/uploads/2017/04/IMG_20160507_153704_HDR-Recoveredcropped2.jpg" width="100%" ></div>
<br>
<!-- page title, displayed in your browser bar -->
<title><?php bloginfo('name'); ?> | <?php is_home() ? bloginfo('description') : wp_title(''); ?></title>
<!-- add feeds, pingback and stuff-->
<link rel="profile" href="http://gmpg.org/xfn/11" />
<?php wp_head(); ?>
</head>
<body id="top">
<div class='container_wrap' id='main'>
<div class='container'>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_template_part('page-parts/general-after-wrap'); ?>
<?php wp_footer(); ?>
</body>
</html>
And this is the CSS to make my from responsive
#media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
Am I missing something?
Kind regards!
You just need to add this code for template
<?php
/**
* Template Name: Blank Page Header
*
*/
get_header();
?>
<div class='container_wrap' id='main'>
<div class='container'>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_template_part('page-parts/general-after-wrap'); ?>
<?php get_footer(); ?>
How to create multiple headers in Wordpress? My file includes footer.php, footer-login.php, functions.php, header.php, header-login.php, index.php and page.php.
In my header-login.php file,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>??????</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
<meta http-equiv="Cache-Control" content="max-age=8640000" />
<?php wp_head();?>
</head>
<body>
For my index.php,
<?php get_header(); ?>
<div id="main">
<div id="content">
<p><?php if (have_posts()) : while (have_posts()) : the_post(); ?></p>
<p><?php the_content(__('(more...)')); ?></p>
<p><?php endwhile; else: ?></p>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<p><?php endif; ?></p>
</div>
</div>
<?php get_footer(); ?>
Page.php
<?php
if(is_page(2)) {
get_header('login');
} else {
get_header();
}
wp_head();
?>
Why can I still get the blank page when I open the website?
Result
File/Folder
I have a Wordpress website that has search form.
But when i click the submit button without writing anything inside search bar, then website gives me all the posts and pages that my website has.
Is there any way so that when a user clicks submit button without writing anything inside search field, that user gets message saying something like 'Search Fields was empty - Search Again'.
header.php - this is where i'm using get_search_form(), to get the search form from another page
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- site-header -->
<header class="site-header">
<div class="header-container">
<nav class="site-nav">
<h1 class ="head-title">Title</h1>
<!-- hd-search -->
<div class="hd-search">
<?php get_search_form(); ?>
</div><!-- /hd-search -->
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu( $args ); ?>
</nav>
</div>
</header><!-- /site-header -->
<div class="container">
searchform.php - this is where my search form is located
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="<?php the_search_query(); ?>" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
search.php - this is the page that i get after i press the search button
<?php
get_header();
if (have_posts()) : ?>
<h2>Search results for: <?php the_search_query(); ?></h2>
<?php
while (have_posts()) : the_post(); ?>
<article class="post <?php if ( has_post_thumbnail() ) { ?>has-thumbnail <?php } ?>">
<!-- post-thumbnail -->
<div class="post-thumbnail">
<?php the_post_thumbnail('small-thumbnail'); ?>
</div><!-- /post-thumbnail -->
<h2><?php the_title(); ?></h2>
<p class="post-info"><?php the_time('F j, Y g:i a'); ?> | by <?php the_author(); ?> | Posted in
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $separator;
}
echo trim($output, $separator);
}
?>
</p>
<?php the_excerpt(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
**strong text**?>
<!--functions.php-->
<?php
function learningWordPress_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
I get the message "class="home blog logged-in admin-bar no-customize-support">" below my navigation bar in the wordpress I am coding from scratch. Does anyone know how to remove this? If so, your help would be much appreciated : )
(The attached code won't run here because it's dependent on wordpress. Hopefully, the attached picture is enough to explain the situation)
/*
CSS:
Theme Name: Yonsei Fencing
Author: Yonsei Student
Version: 1.0
*/
<!--index.php-->
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile;
else:
echo '<p>No content found</p>';
endif;
get_footer();
?>
<!--header.php-->
<!DOCTYPE html>
<html> <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body> <?php body_class(); ?>>
<!--site-header-->
<header class="site-header">
<h1><?php bloginfo('name'); ?></h1>
<h5><?php bloginfo('description'); ?></h5>
</header><!--/site-header-->
<!--footer.php-->
<footer class="site-footer">
<p><?php bloginfo('name'); ?> - © <?php echo date('Y');?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
The issue is that the function body_class() belongs inside your body tag, but in the code you've posted, it's after the body tag.
Change your code as follows, and you're good to go:
FROM this, which closes the body tag first:
<body> <?php body_class(); ?>>
TO this, which contains the body_class inside the body tag:
<body <?php body_class(); ?>>