My website is www.rosstheexplorer.com.
I want to have a separate customer header when the site loads on mobile devices, so below 600px and above 601px.
I have attempted to change my header.php code to accomplish this but nothing I have tried has sorted the problem.
Here is my header.php code
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package Penscratch
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( 'A|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="content" class="site-content">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
</a>
<?php endif; // End header image check. ?>
These are the two key lines
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
As #Michael Coker noted above in the comments
add a CSS class to the 'img' tag for mobile displays
You can then use the class selector - .mobile-header-img in my example below - To hide the mobile header if the screen is bigger than 660px
Then do the opposite for the other image to hide the large image from small displays
See the code below:
#media screen and (min-width: 660px) {
.mobile-header-img {
display: none;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
The easiest way to do this is to have one container element (such as a <div>) to hold the header image. Use CSS to assign the background property of this element to one of the images. You can then use media queries in the CSS to adjust the background property (image) as necessary.
Related
I've downloaded the MetaSlider plugin for WordPress, and am able to insert the generated code into my theme's header.php files so that the slider displays in the correct location. However, the site logo and description disappear when I do this (they should be overlaying the header image). Here's the code for the header.php file:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Preloader -->
<?php get_template_part( 'templates/header/preloader' ); ?>
<!-- Page Wrapper -->
<div id="page-wrap">
<!-- Boxed Wrapper -->
<div id="page-header" <?php echo esc_attr(ashe_options( 'general_header_width' )) === 'boxed' ? 'class="boxed-wrapper"': ''; ?>>
<?php
// Top Bar
get_template_part( 'templates/header/top', 'bar' );
// Page Header
get_template_part( 'templates/header/page', 'header' );
// Main Navigation
get_template_part( 'templates/header/main', 'navigation' );
?>
</div><!-- .boxed-wrapper -->
<!-- Page Content -->
<div id="page-content">
<?php get_template_part( 'templates/sidebars/sidebar', 'alt' ); // Sidebar Alt ?>
To get the slider into the correct location I need to replace the code underneath //Page Header with the code that Meta Slider provides. The Problem, I think, is that it's replacing the Header Template. So, I've looked at the php for the header template as well, but I'm not sure what, if anything, I might do in there to fix the issue. Here's the header template code:
<div class="entry-header">
<div class="cv-outer">
<div class="cv-inner">
<div class="header-logo">
<?php
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
</div>
</div>
</div>
</div>
Any ideas as to how I might go about fixing this would be much appreciated!!
Have you try to give position:relative; z-index:9999;//z-index number depends to your logo and description?
This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 5 years ago.
I'm new here and I'm not sure how to properly ask this question.My goal is to change href for my logo in wordpress, there's no easy setting within wordpress so I decided to change code itself. error that I got is "Parse error: syntax error, unexpected '<' in /home/gtacontr/public_html/mississaugacardetailing.ca/blog/wp-content/themes/publisherly/header.php on line 38". Below is my code, can someone please tell me why I got this error and how can I fix it
<?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 Publisherly
*/
?><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'publisherly' ); ?></a> <!-- add this reference in code -->
<header id="masthead" class="site-header" role="banner">
<div class="header-wrapper">
<div class="site-branding">
<a href="http://www.mississaugacardetailing.ca">
//<?php
// Display the Custom Logo
<img width="2000" height="666" src="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png" class="custom-logo" alt="" itemprop="logo" srcset="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png 2000w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-300x100.png 300w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-768x256.png 768w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-1024x341.png 1024w" sizes="(max-width: 2000px) 100vw, 2000px"></a>
/* if ( has_custom_logo() ) {
the_custom_logo();
} else {
if ( is_front_page() && is_home() ) : ?>
</a>
<h1 class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></p>
<?php endif;
}
?> */
</div><!-- .site-branding -->
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<a id="menu-toggle" class="menu-toggle" href="#"><!-- <i class="fa fa-bars"></i>--> <?php _e( 'Menu', 'publisherly' ); ?></a>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'publisherly' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
</div><!-- .site-header-menu -->
<?php endif; ?>
</div><!-- /header-wrapper -->
</header><!-- .site-header -->
You should comment it this way
<!--?php // Display the Custom Logo -->
<img width="2000" height="666" src="..." sizes="(max-width: 2000px) 100vw, 2000px"></a>
<!-- if ( has_custom_logo() ) {
the_custom_logo();
} else {
if ( is_front_page() && is_home() ) : ?>
</a>
<h1 class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></h1>
<!--?php else : ?>
<p class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></p>
<?php endif;
}
?-->
If you notice I just changed the tags so <?php becomes <!--?php and ?> becomes ?-->. This is just a personal prefrenace because it helps me remember where things are, if you left the PHP tags intact they would work as PHP but the output would be inside a comment. I do the same with HTML such as:
<!-- form id="myfrom" action="" >
</form -->
NOTE That said if this is a live site, I might just leave the PHP alone, as you don't want that code displaced in the source for the page.
Here is a sand box that shows what you have wrong sandbox
Cheers.
You need to change near to "" tag inside anchor() tag and make sure you need to comment it or you need to remove this tag if not need. and also remove anchor tag after image tag. please see below code.
<a href="http://www.mississaugacardetailing.ca">
<!--?php
// Display the Custom Logo
?-->
<img width="2000" height="666" src="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png" class="custom-logo" alt="" itemprop="logo" srcset="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png 2000w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-300x100.png 300w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-768x256.png 768w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-1024x341.png 1024w" sizes="(max-width: 2000px) 100vw, 2000px">
<!--?php /* if ( has_custom_logo() ) {
the_custom_logo();
} else {
if ( is_front_page() && is_home() ) : ?-->
</a>
Okay I have no idea why wordpress is not rendering html, just a blank screen. Checking inspect element and I can't see the html structure of the website.
I assume the problem could be with the header however I've double checked for errors not sure. The title name on the window tab screen isn't even showing.
Any ideas: here is a link too: https://www.radian3.com
Here is the header.php
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package Shape
* #since Shape 2.0
*/
?><!DOCTYPE html>
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'shape' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- This part loads a JavaScript file that enables old versions of Internet Explorer to recognize the new HTML5 elements, and it only loads for visitors who are using IE 8 or earlier. -->
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav role="navigation" class="site-navigation main-navigation">
<!-- add a skip link so folks using a screen reader don’t have to suffer through our menu when they just want to get to the content. -->
<h1 class="assistive-text"><?php _e( 'Menu', 'playTheme' ); ?></h1>
<div class="assistive-text skip-link"><?php _e( 'Skip to content', 'playTheme' ); ?></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->
<div
id="main" class="site-main">
index.php
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* #package Shape
* #since Shape 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<script type="text/javascript"> alert("asdasdsa");</script>
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
<div>
asldjaslkdj
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
I am a beginner in WP. I want different logo in each page of word press site like for few page of the site i need different logo and different for other. i tried to use conditional statement but as i am beginner so my overall site crashes and have a blank screen. if there is some plugin that can achieve this kind of functionality it would be really a great help.
Can you guide me how to achieve it.
Here is my header.php code i tried to edit it but all in vain.
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<meta name="viewport" content="initial-scale=1">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/source/vendor/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="container">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="site-branding">
<!--Editing start from here and i am gona delete all other code from above span section-->
<?php $header_image = get_header_image(); ?>
<h1 class="site-title">
<?php if ( ! empty( $header_image ) ) : ?>
<img src="<?php echo $header_image ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
<span><?php bloginfo( 'name' ); ?></span>
</h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<nav id="site-navigation" class="site-primary-navigation slide-left">
<i class="icon-cancel-circled"></i> <span><?php _e( 'Close', 'jobify' ); ?></span>
<?php get_search_form(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu-primary' ) ); ?>
</nav>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<i class="icon-menu"></i>
<?php endif; ?>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">
Thanks
Try using something like this.
if(is_page('Blog')){ // the parameter used here is the post_title
echo '<img src="http://yourwebsite.com/path-to-your-image/blog-logo.png" />';
}elseif(is_page('home')){ // the parameter used here is the post slug
echo '<img src="http://yourwebsite.com/path-to-your-image/home-logo.png" />';
}elseif(is_page('42')){ // the parameter used here is the post id
echo '<img src="http://yourwebsite.com/path-to-your-image/other-logo.png" />';
}else{ // else display default logo
$header_image = get_header_image();
}
You can get more info here:
https://codex.wordpress.org/Function_Reference/is_page
Depending on the theme you are using, it's sometimes build-in feature!
I know Arcade Basic which has this custom header feature:
https://wordpress.org/themes/arcade-basic/
There are probably much more theme's which supports this feature by default, search on the 'featured-image-header' and 'flexible-header' tags on the Wordpress site to find more themes....
https://wordpress.org/themes/tags/featured-image-header/
https://wordpress.org/themes/tags/flexible-header/
And maybe 'custom-header' tag?
https://wordpress.org/themes/tags/custom-header/
Finally, there are indeed a lot of plugins, like "WP Header Images", more can be found here:
https://wordpress.org/plugins/search.php?q=header+image&sort=
I've removed the Search function from the theme 'Corporate' (by WP Explorer), I've deleted Search.php Searchform.php, search from CSS and also Search from the Header file, however the area where search was is now clickable, linking to homepage.
Header info below:
<?php
/**
* The Header for our theme.
*
* #package WordPress
* #subpackage Corporate WPExplorer Theme
* #since Corporate 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( get_theme_mod('wpex_custom_favicon') ) { ?>
<link rel="shortcut icon" href="<?php echo get_theme_mod('wpex_custom_favicon'); ?>" />
<?php } ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrap" class="clr container">
<div id="header-wrap" class="clr">
<header id="header" class="site-header clr" role="banner">
<?php
// Outputs the site logo
// See functions/logo.php
wpex_logo(); ?>
<!-- Search removed from here -->
</header><!-- #header -->
</div><!-- #header-wrap -->
<div id="sidr-close"></div>
<div id="site-navigation-wrap">
<span class="fa fa-bars"></span><?php echo __( 'Menu', 'wpex' ); ?>
<nav id="site-navigation" class="navigation main-navigation clr" role="navigation">
<?php
// Display main menu
wp_nav_menu( array(
'theme_location' => 'main_menu',
'sort_column' => 'menu_order',
'menu_class' => 'dropdown-menu sf-menu',
'fallback_cb' => false
) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #site-navigation-wrap -->
<div id="main" class="site-main clr">
Add the search div back, but only remove the code within the div. By removing the div, you removed the space that it was taking up and the logo's clickable area was extended to be wider. Removing it fully will require some CSS edits.